Fixed #4530 - Export styles of all components
mertsincan
parent
7b6d458067
commit
dc2913e887
|
|
@ -0,0 +1,13 @@
|
|||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
|
|
@ -15,5 +15,9 @@
|
|||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
|
||||
function copyDependencies(inFolder, outFolder) {
|
||||
function copyDependencies(inFolder, outFolder, subFolder) {
|
||||
fs.readdirSync(path.resolve(__dirname, inFolder), { withFileTypes: true })
|
||||
.filter((dir) => dir.isDirectory())
|
||||
.forEach(({ name: folderName }) => {
|
||||
|
|
@ -10,10 +10,20 @@ function copyDependencies(inFolder, outFolder) {
|
|||
fs.copySync(path.resolve(__dirname, inFolder + folderName) + '/' + file, outFolder + folderName + '/' + file);
|
||||
}
|
||||
});
|
||||
|
||||
if (subFolder) {
|
||||
try {
|
||||
fs.readdirSync(path.resolve(__dirname, inFolder + folderName + subFolder)).forEach((subFile) => {
|
||||
if (subFile === 'package.json' || subFile.endsWith('d.ts') || subFile.endsWith('vue')) {
|
||||
fs.copySync(path.resolve(__dirname, inFolder + folderName + subFolder) + '/' + subFile, outFolder + folderName + subFolder + '/' + subFile);
|
||||
}
|
||||
});
|
||||
} catch {}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
copyDependencies('./components/lib/', 'dist/');
|
||||
copyDependencies('./components/lib/', 'dist/', '/style');
|
||||
copyDependencies('./components/lib/icons/', 'dist/icons/');
|
||||
copyDependencies('./components/lib/passthrough/', 'dist/passthrough/');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,53 +1,6 @@
|
|||
<script>
|
||||
import AccordionStyle from 'primevue/accordion/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.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 } = useStyle(styles, { name: 'accordion', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseAccordion',
|
||||
|
|
@ -82,10 +35,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: AccordionStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./accordion.cjs.js",
|
||||
"module": "./accordion.esm.js",
|
||||
"unpkg": "./accordion.min.js",
|
||||
"types": "./Accordion.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Accordion.vue"
|
||||
}
|
||||
}
|
||||
"main": "./accordion.cjs.js",
|
||||
"module": "./accordion.esm.js",
|
||||
"unpkg": "./accordion.min.js",
|
||||
"types": "./Accordion.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Accordion.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.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'
|
||||
}
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'accordion',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./accordionstyle.cjs.js",
|
||||
"module": "./accordionstyle.esm.js",
|
||||
"unpkg": "./accordionstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import AccordionTabStyle from 'primevue/accordiontab/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
export default {
|
||||
|
|
@ -15,6 +16,7 @@ export default {
|
|||
contentProps: null,
|
||||
disabled: Boolean
|
||||
},
|
||||
style: AccordionTabStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./accordiontab.cjs.js",
|
||||
"module": "./accordiontab.esm.js",
|
||||
"unpkg": "./accordiontab.min.js",
|
||||
"types": "./AccordionTab.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AccordionTab.vue"
|
||||
}
|
||||
}
|
||||
"main": "./accordiontab.cjs.js",
|
||||
"module": "./accordiontab.esm.js",
|
||||
"unpkg": "./accordiontab.min.js",
|
||||
"types": "./AccordionTab.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AccordionTab.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export default {};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./accordiontabstyle.cjs.js",
|
||||
"module": "./accordiontabstyle.esm.js",
|
||||
"unpkg": "./accordiontabstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,154 +1,6 @@
|
|||
<script>
|
||||
import AutoCompleteStyle from 'primevue/autocomplete/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-autocomplete {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input,
|
||||
.p-autocomplete-dd .p-autocomplete-multiple-container {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-dropdown {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-autocomplete-item {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-autocomplete-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-autocomplete-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: { position: 'relative' }
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-autocomplete p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-autocomplete-dd': props.dropdown,
|
||||
'p-autocomplete-multiple': props.multiple,
|
||||
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
|
||||
'p-inputwrapper-focus': instance.focused,
|
||||
'p-overlay-open': instance.overlayVisible
|
||||
}
|
||||
],
|
||||
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
|
||||
container: 'p-autocomplete-multiple-container p-component p-inputtext',
|
||||
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
|
||||
tokenLabel: 'p-autocomplete-token-label',
|
||||
removeTokenIcon: 'p-autocomplete-token-icon',
|
||||
inputToken: 'p-autocomplete-input-token',
|
||||
loadingIcon: 'p-autocomplete-loader',
|
||||
dropdownButton: 'p-autocomplete-dropdown',
|
||||
panel: ({ instance }) => [
|
||||
'p-autocomplete-panel p-component',
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
list: 'p-autocomplete-items',
|
||||
itemGroup: 'p-autocomplete-item-group',
|
||||
item: ({ instance, option, i, getItemOptions }) => [
|
||||
'p-autocomplete-item',
|
||||
{
|
||||
'p-highlight': instance.isSelected(option),
|
||||
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
|
||||
'p-disabled': instance.isOptionDisabled(option)
|
||||
}
|
||||
],
|
||||
emptyMessage: 'p-autocomplete-empty-message'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseAutoComplete',
|
||||
|
|
@ -314,11 +166,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
inlineStyles,
|
||||
loadStyle
|
||||
},
|
||||
style: AutoCompleteStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./autocomplete.cjs.js",
|
||||
"module": "./autocomplete.esm.js",
|
||||
"unpkg": "./autocomplete.min.js",
|
||||
"types": "./AutoComplete.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AutoComplete.vue"
|
||||
}
|
||||
}
|
||||
"main": "./autocomplete.cjs.js",
|
||||
"module": "./autocomplete.esm.js",
|
||||
"unpkg": "./autocomplete.min.js",
|
||||
"types": "./AutoComplete.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AutoComplete.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,154 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-autocomplete {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-input,
|
||||
.p-autocomplete-dd .p-autocomplete-multiple-container {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-dd .p-autocomplete-dropdown {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.p-autocomplete .p-autocomplete-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-autocomplete-panel {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.p-autocomplete-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-autocomplete-item {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-autocomplete-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-autocomplete-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-autocomplete-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-autocomplete-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
|
||||
width: 1%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: { position: 'relative' }
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-autocomplete p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-autocomplete-dd': props.dropdown,
|
||||
'p-autocomplete-multiple': props.multiple,
|
||||
'p-inputwrapper-filled': props.modelValue || ObjectUtils.isNotEmpty(instance.inputValue),
|
||||
'p-inputwrapper-focus': instance.focused,
|
||||
'p-overlay-open': instance.overlayVisible
|
||||
}
|
||||
],
|
||||
input: ({ props }) => ['p-autocomplete-input p-inputtext p-component', { 'p-autocomplete-dd-input': props.dropdown }],
|
||||
container: 'p-autocomplete-multiple-container p-component p-inputtext',
|
||||
token: ({ instance, i }) => ['p-autocomplete-token', { 'p-focus': instance.focusedMultipleOptionIndex === i }],
|
||||
tokenLabel: 'p-autocomplete-token-label',
|
||||
removeTokenIcon: 'p-autocomplete-token-icon',
|
||||
inputToken: 'p-autocomplete-input-token',
|
||||
loadingIcon: 'p-autocomplete-loader',
|
||||
dropdownButton: 'p-autocomplete-dropdown',
|
||||
panel: ({ instance }) => [
|
||||
'p-autocomplete-panel p-component',
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
list: 'p-autocomplete-items',
|
||||
itemGroup: 'p-autocomplete-item-group',
|
||||
item: ({ instance, option, i, getItemOptions }) => [
|
||||
'p-autocomplete-item',
|
||||
{
|
||||
'p-highlight': instance.isSelected(option),
|
||||
'p-focus': instance.focusedOptionIndex === instance.getOptionIndex(i, getItemOptions),
|
||||
'p-disabled': instance.isOptionDisabled(option)
|
||||
}
|
||||
],
|
||||
emptyMessage: 'p-autocomplete-empty-message'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'autocomplete',
|
||||
css,
|
||||
classes,
|
||||
inlineStyles
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./autocompletestyle.cjs.js",
|
||||
"module": "./autocompletestyle.esm.js",
|
||||
"unpkg": "./autocompletestyle.min.js"
|
||||
}
|
||||
|
|
@ -1,56 +1,6 @@
|
|||
<script>
|
||||
import AvatarStyle from 'primevue/avatar/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.p-avatar.p-avatar-image {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.p-avatar.p-avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-avatar-circle img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-avatar .p-avatar-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.p-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-avatar p-component',
|
||||
{
|
||||
'p-avatar-image': props.image != null,
|
||||
'p-avatar-circle': props.shape === 'circle',
|
||||
'p-avatar-lg': props.size === 'large',
|
||||
'p-avatar-xl': props.size === 'xlarge'
|
||||
}
|
||||
],
|
||||
label: 'p-avatar-text',
|
||||
icon: 'p-avatar-icon'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseAvatar',
|
||||
|
|
@ -85,10 +35,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: AvatarStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./avatar.cjs.js",
|
||||
"module": "./avatar.esm.js",
|
||||
"unpkg": "./avatar.min.js",
|
||||
"types": "./Avatar.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Avatar.vue"
|
||||
}
|
||||
}
|
||||
"main": "./avatar.cjs.js",
|
||||
"module": "./avatar.esm.js",
|
||||
"unpkg": "./avatar.min.js",
|
||||
"types": "./Avatar.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Avatar.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-avatar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.p-avatar.p-avatar-image {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.p-avatar.p-avatar-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-avatar-circle img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.p-avatar .p-avatar-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.p-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-avatar p-component',
|
||||
{
|
||||
'p-avatar-image': props.image != null,
|
||||
'p-avatar-circle': props.shape === 'circle',
|
||||
'p-avatar-lg': props.size === 'large',
|
||||
'p-avatar-xl': props.size === 'xlarge'
|
||||
}
|
||||
],
|
||||
label: 'p-avatar-text',
|
||||
icon: 'p-avatar-icon'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'avatar',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./avatarstyle.cjs.js",
|
||||
"module": "./avatarstyle.esm.js",
|
||||
"unpkg": "./avatarstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,33 +1,11 @@
|
|||
<script>
|
||||
import AvatarGroupStyle from 'primevue/avatargroup/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-avatar-group .p-avatar + .p-avatar {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.p-avatar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-avatar-group p-component'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseAvatarGroup',
|
||||
extends: BaseComponent,
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: AvatarGroupStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./avatargroup.cjs.js",
|
||||
"module": "./avatargroup.esm.js",
|
||||
"unpkg": "./avatargroup.min.js",
|
||||
"types": "./AvatarGroup.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AvatarGroup.vue"
|
||||
}
|
||||
}
|
||||
"main": "./avatargroup.cjs.js",
|
||||
"module": "./avatargroup.esm.js",
|
||||
"unpkg": "./avatargroup.min.js",
|
||||
"types": "./AvatarGroup.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./AvatarGroup.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-avatar-group .p-avatar + .p-avatar {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.p-avatar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-avatar-group p-component'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'avatargroup',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./avatargroupstyle.cjs.js",
|
||||
"module": "./avatargroupstyle.esm.js",
|
||||
"unpkg": "./avatargroupstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,62 +1,6 @@
|
|||
<script>
|
||||
import BadgeStyle from 'primevue/badge/style';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-badge {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.p-overlay-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-overlay-badge .p-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%,-50%);
|
||||
transform-origin: 100% 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-badge-dot {
|
||||
width: .5rem;
|
||||
min-width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-badge-no-gutter {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props, instance }) => [
|
||||
'p-badge p-component',
|
||||
{
|
||||
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
|
||||
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
|
||||
'p-badge-lg': props.size === 'large',
|
||||
'p-badge-xl': props.size === 'xlarge',
|
||||
'p-badge-info': props.severity === 'info',
|
||||
'p-badge-success': props.severity === 'success',
|
||||
'p-badge-warning': props.severity === 'warning',
|
||||
'p-badge-danger': props.severity === 'danger'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseBadge',
|
||||
|
|
@ -75,10 +19,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: BadgeStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./badge.cjs.js",
|
||||
"module": "./badge.esm.js",
|
||||
"unpkg": "./badge.min.js",
|
||||
"types": "./Badge.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Badge.vue"
|
||||
}
|
||||
}
|
||||
"main": "./badge.cjs.js",
|
||||
"module": "./badge.esm.js",
|
||||
"unpkg": "./badge.min.js",
|
||||
"types": "./Badge.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Badge.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-badge {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.p-overlay-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-overlay-badge .p-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%,-50%);
|
||||
transform-origin: 100% 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-badge-dot {
|
||||
width: .5rem;
|
||||
min-width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-badge-no-gutter {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props, instance }) => [
|
||||
'p-badge p-component',
|
||||
{
|
||||
'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
|
||||
'p-badge-dot': ObjectUtils.isEmpty(props.value) && !instance.$slots.default,
|
||||
'p-badge-lg': props.size === 'large',
|
||||
'p-badge-xl': props.size === 'xlarge',
|
||||
'p-badge-info': props.severity === 'info',
|
||||
'p-badge-success': props.severity === 'success',
|
||||
'p-badge-warning': props.severity === 'warning',
|
||||
'p-badge-danger': props.severity === 'danger'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'badge',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./badgestyle.cjs.js",
|
||||
"module": "./badgestyle.esm.js",
|
||||
"unpkg": "./badgestyle.min.js"
|
||||
}
|
||||
|
|
@ -1,54 +1,8 @@
|
|||
import BadgeDirectiveStyle from 'primevue/badgedirective/style';
|
||||
import BaseDirective from 'primevue/basedirective';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-badge {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.p-overlay-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-overlay-badge .p-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%,-50%);
|
||||
transform-origin: 100% 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-badge-dot {
|
||||
width: .5rem;
|
||||
min-width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-badge-no-gutter {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-badge p-component'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
|
||||
|
||||
const BaseBadgeDirective = BaseDirective.extend({
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
}
|
||||
style: BadgeDirectiveStyle
|
||||
});
|
||||
|
||||
export default BaseBadgeDirective;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"main": "./badgedirective.cjs.js",
|
||||
"module": "./badgedirective.esm.js",
|
||||
"unpkg": "./badgedirective.min.js",
|
||||
"types": "./BadgeDirective.d.ts"
|
||||
}
|
||||
"main": "./badgedirective.cjs.js",
|
||||
"module": "./badgedirective.esm.js",
|
||||
"unpkg": "./badgedirective.min.js",
|
||||
"types": "./BadgeDirective.d.ts"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-badge {
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.p-overlay-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-overlay-badge .p-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%,-50%);
|
||||
transform-origin: 100% 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-badge-dot {
|
||||
width: .5rem;
|
||||
min-width: .5rem;
|
||||
height: .5rem;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-badge-no-gutter {
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-badge p-component'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'badge',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./badgedirectivestyle.cjs.js",
|
||||
"module": "./badgedirectivestyle.esm.js",
|
||||
"unpkg": "./badgedirectivestyle.min.js"
|
||||
}
|
||||
|
|
@ -1,32 +1 @@
|
|||
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;
|
||||
padding-right: var(--scrollbar-width);
|
||||
}
|
||||
`;
|
||||
|
||||
export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
|
||||
|
||||
const Base = {
|
||||
styles
|
||||
};
|
||||
|
||||
export default Base;
|
||||
export default {};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const css = `
|
||||
.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;
|
||||
padding-right: var(--scrollbar-width);
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {};
|
||||
|
||||
const inlineStyles = {};
|
||||
|
||||
export default {
|
||||
name: 'base',
|
||||
css,
|
||||
classes,
|
||||
inlineStyles,
|
||||
loadStyle(options = {}) {
|
||||
return useStyle(this.css, { name: this.name, ...options });
|
||||
},
|
||||
getStyleSheet(extendedCSS = '', props = {}) {
|
||||
const _props = Object.entries(props)
|
||||
.reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
|
||||
.join(' ');
|
||||
|
||||
return `<style type="text/css" data-primevue-style-id="${this.name}" ${_props}>${this.css}${extendedCSS}</style>`;
|
||||
},
|
||||
extend(style) {
|
||||
return { ...this, ...style };
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./basestyle.cjs.js",
|
||||
"module": "./basestyle.esm.js",
|
||||
"unpkg": "./basestyle.min.js"
|
||||
}
|
||||
|
|
@ -1,365 +1,8 @@
|
|||
<script>
|
||||
import { loadBaseStyle } from 'primevue/base';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
import BaseStyle from 'primevue/base/style';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
const inlineStyles = {};
|
||||
|
||||
const buttonStyles = `
|
||||
.p-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-button-icon-only .p-button-label {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-button-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:first-of-type:not(:only-of-type) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:last-of-type:not(:only-of-type) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
`;
|
||||
const checkboxStyles = `
|
||||
.p-checkbox {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-checkbox.p-checkbox-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
const inputTextStyles = `
|
||||
.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 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 .input:-webkit-autofill ~ label {
|
||||
top: -20px;
|
||||
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 radioButtonStyles = `
|
||||
.p-radiobutton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-radiobutton.p-radiobutton-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) scale(.1);
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-radiobutton-box.p-highlight .p-radiobutton-icon {
|
||||
transform: translateZ(0) scale(1.0, 1.0);
|
||||
visibility: visible;
|
||||
}
|
||||
`;
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-component, .p-component * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.p-hidden-space {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-disabled, .p-disabled * {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.p-link {
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-link:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Non vue overlay animations */
|
||||
.p-connected-overlay {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-visible {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-hidden {
|
||||
opacity: 0;
|
||||
transform: scaleY(1);
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
/* Vue based overlay animations */
|
||||
.p-connected-overlay-enter-from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-connected-overlay-enter-active {
|
||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-active {
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
/* Toggleable Content */
|
||||
.p-toggleable-content-enter-from,
|
||||
.p-toggleable-content-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-to,
|
||||
.p-toggleable-content-leave-from {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.p-toggleable-content-leave-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 1s ease-in-out;
|
||||
}
|
||||
${buttonStyles}
|
||||
${checkboxStyles}
|
||||
${inputTextStyles}
|
||||
${radioButtonStyles}
|
||||
}
|
||||
`;
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
|
||||
const { load: loadGlobalStyle } = useStyle('', { name: 'global', manual: true });
|
||||
import BaseComponentStyle from './style/BaseComponentStyle';
|
||||
|
||||
export default {
|
||||
name: 'BaseComponent',
|
||||
|
|
@ -387,8 +30,8 @@ export default {
|
|||
immediate: true,
|
||||
handler(newValue) {
|
||||
if (!newValue) {
|
||||
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
|
||||
this.$options.css && this.$css.loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
|
||||
BaseComponentStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
|
||||
this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -410,7 +53,7 @@ export default {
|
|||
this._hook('onCreated');
|
||||
},
|
||||
beforeMount() {
|
||||
loadBaseStyle(undefined, { nonce: this.$config?.csp?.nonce });
|
||||
BaseStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
|
||||
this._loadGlobalStyles();
|
||||
this._hook('onBeforeMount');
|
||||
},
|
||||
|
|
@ -452,7 +95,7 @@ export default {
|
|||
|
||||
const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);
|
||||
|
||||
ObjectUtils.isNotEmpty(globalCSS) && loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
|
||||
ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
|
||||
},
|
||||
_getHostInstance(instance) {
|
||||
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
|
||||
|
|
@ -535,12 +178,12 @@ export default {
|
|||
return this._getPTValue(obj, key, { instance: this, ...params }, false);
|
||||
},
|
||||
cx(key = '', params = {}) {
|
||||
return !this.isUnstyled ? this._getOptionValue(this.$css.classes, key, { ...this.$params, ...params }) : undefined;
|
||||
return !this.isUnstyled ? this._getOptionValue(this.$style.classes, key, { ...this.$params, ...params }) : undefined;
|
||||
},
|
||||
sx(key = '', when = true, params = {}) {
|
||||
if (when) {
|
||||
const self = this._getOptionValue(this.$css.inlineStyles, key, { ...this.$params, ...params });
|
||||
const base = this._getOptionValue(inlineStyles, key, { ...this.$params, ...params });
|
||||
const self = this._getOptionValue(this.$style.inlineStyles, key, { ...this.$params, ...params });
|
||||
const base = this._getOptionValue(BaseComponentStyle.inlineStyles, key, { ...this.$params, ...params });
|
||||
|
||||
return [base, self];
|
||||
}
|
||||
|
|
@ -561,8 +204,8 @@ export default {
|
|||
$params() {
|
||||
return { instance: this, props: this.$props, state: this.$data, parentInstance: this.$parentInstance };
|
||||
},
|
||||
$css() {
|
||||
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$css, ...this.$options.css };
|
||||
$style() {
|
||||
return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
|
||||
},
|
||||
$config() {
|
||||
return this.$primevue?.config;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./basecomponent.cjs.js",
|
||||
"module": "./basecomponent.esm.js",
|
||||
"unpkg": "./basecomponent.min.js",
|
||||
"types": "./BaseComponent.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./BaseComponent.vue"
|
||||
}
|
||||
}
|
||||
"main": "./basecomponent.cjs.js",
|
||||
"module": "./basecomponent.esm.js",
|
||||
"unpkg": "./basecomponent.min.js",
|
||||
"types": "./BaseComponent.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./BaseComponent.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,364 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const buttonCSS = `
|
||||
.p-button {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
vertical-align: bottom;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-button-label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-button-icon-right {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.p-button:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-button-icon-only {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-button-icon-only .p-button-label {
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-button-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-button-icon-bottom {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
|
||||
border-right: 0 none;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:first-of-type:not(:only-of-type) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:last-of-type:not(:only-of-type) {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.p-buttonset .p-button:focus {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
const checkboxCSS = `
|
||||
.p-checkbox {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-checkbox.p-checkbox-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-checkbox-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
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 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 .input:-webkit-autofill ~ label {
|
||||
top: -20px;
|
||||
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 radioButtonCSS = `
|
||||
.p-radiobutton {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.p-radiobutton.p-radiobutton-disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-radiobutton-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-radiobutton-icon {
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0) scale(.1);
|
||||
border-radius: 50%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-radiobutton-box.p-highlight .p-radiobutton-icon {
|
||||
transform: translateZ(0) scale(1.0, 1.0);
|
||||
visibility: visible;
|
||||
}
|
||||
`;
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-component, .p-component * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.p-hidden-space {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-disabled, .p-disabled * {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-component-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.p-link {
|
||||
text-align: left;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-link:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Non vue overlay animations */
|
||||
.p-connected-overlay {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-visible {
|
||||
opacity: 1;
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-hidden {
|
||||
opacity: 0;
|
||||
transform: scaleY(1);
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
/* Vue based overlay animations */
|
||||
.p-connected-overlay-enter-from {
|
||||
opacity: 0;
|
||||
transform: scaleY(0.8);
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.p-connected-overlay-enter-active {
|
||||
transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.p-connected-overlay-leave-active {
|
||||
transition: opacity .1s linear;
|
||||
}
|
||||
|
||||
/* Toggleable Content */
|
||||
.p-toggleable-content-enter-from,
|
||||
.p-toggleable-content-leave-to {
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-to,
|
||||
.p-toggleable-content-leave-from {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.p-toggleable-content-leave-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
|
||||
}
|
||||
|
||||
.p-toggleable-content-enter-active {
|
||||
overflow: hidden;
|
||||
transition: max-height 1s ease-in-out;
|
||||
}
|
||||
${buttonCSS}
|
||||
${checkboxCSS}
|
||||
${inputTextCSS}
|
||||
${radioButtonCSS}
|
||||
}
|
||||
`;
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'common',
|
||||
css,
|
||||
loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options })
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./basecomponentstyle.cjs.js",
|
||||
"module": "./basecomponentstyle.esm.js",
|
||||
"unpkg": "./basecomponentstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { loadBaseStyle } from 'primevue/base';
|
||||
import BaseStyle from 'primevue/base/style';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
import { mergeProps } from 'vue';
|
||||
|
||||
|
|
@ -94,7 +94,7 @@ const BaseDirective = {
|
|||
$host: el,
|
||||
$binding: binding,
|
||||
$el: $prevInstance['$el'] || undefined,
|
||||
$css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
|
||||
$style: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.style },
|
||||
$config: config,
|
||||
/* computed instance variables */
|
||||
defaultPT: BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
|
||||
|
|
@ -102,8 +102,8 @@ const BaseDirective = {
|
|||
/* instance's methods */
|
||||
ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
|
||||
ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
|
||||
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$css?.classes, key, { ...params }) : undefined),
|
||||
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$css?.inlineStyles, key, { ...params }) : undefined),
|
||||
cx: (key = '', params = {}) => (!el.$instance?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.$style?.classes, key, { ...params }) : undefined),
|
||||
sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.$style?.inlineStyles, key, { ...params }) : undefined),
|
||||
...$options
|
||||
};
|
||||
|
||||
|
|
@ -119,8 +119,8 @@ const BaseDirective = {
|
|||
beforeMount: (el, binding, vnode, prevVnode) => {
|
||||
const config = binding?.instance?.$primevue?.config;
|
||||
|
||||
loadBaseStyle(undefined, { nonce: config?.csp?.nonce });
|
||||
!el.$instance?.isUnstyled && el.$instance?.$css?.loadStyle(undefined, { nonce: config?.csp?.nonce });
|
||||
BaseStyle.loadStyle(undefined, { nonce: config?.csp?.nonce });
|
||||
!el.$instance?.isUnstyled && el.$instance?.$style?.loadStyle(undefined, { nonce: config?.csp?.nonce });
|
||||
handleHook('beforeMount', el, binding, vnode, prevVnode);
|
||||
},
|
||||
mounted: (el, binding, vnode, prevVnode) => {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,7 @@
|
|||
<script>
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
import BaseIconStyle from 'primevue/baseicon/style';
|
||||
import { ObjectUtils } from 'primevue/utils';
|
||||
|
||||
const styles = `
|
||||
.p-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-icon-spin {
|
||||
-webkit-animation: p-icon-spin 2s infinite linear;
|
||||
animation: p-icon-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes p-icon-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-icon-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'baseicon', manual: true });
|
||||
|
||||
export default {
|
||||
name: 'BaseIcon',
|
||||
props: {
|
||||
|
|
@ -50,7 +15,7 @@ export default {
|
|||
}
|
||||
},
|
||||
beforeMount() {
|
||||
loadStyle(undefined, { nonce: this.$config?.csp?.nonce });
|
||||
BaseIconStyle.loadStyle({ nonce: this.$config?.csp?.nonce });
|
||||
},
|
||||
methods: {
|
||||
pti() {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"main": "./baseicon.cjs.js",
|
||||
"module": "./baseicon.esm.js",
|
||||
"unpkg": "./baseicon.min.js",
|
||||
"browser": {
|
||||
"./sfc": "./BaseIcon.vue"
|
||||
}
|
||||
}
|
||||
"main": "./baseicon.cjs.js",
|
||||
"module": "./baseicon.esm.js",
|
||||
"unpkg": "./baseicon.min.js",
|
||||
"browser": {
|
||||
"./sfc": "./BaseIcon.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
.p-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.p-icon-spin {
|
||||
-webkit-animation: p-icon-spin 2s infinite linear;
|
||||
animation: p-icon-spin 2s infinite linear;
|
||||
}
|
||||
|
||||
@-webkit-keyframes p-icon-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes p-icon-spin {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'baseicon',
|
||||
css
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./baseiconstyle.cjs.js",
|
||||
"module": "./baseiconstyle.esm.js",
|
||||
"unpkg": "./baseiconstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,28 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-blockui-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-blockui.p-component-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-blockui-document.p-component-overlay {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-blockui-container'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
|
||||
import BlockUIStyle from 'primevue/blockui/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseBlockUI',
|
||||
|
|
@ -45,10 +23,7 @@ export default {
|
|||
default: true
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: BlockUIStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./blockui.cjs.js",
|
||||
"module": "./blockui.esm.js",
|
||||
"unpkg": "./blockui.min.js",
|
||||
"types": "./BlockUI.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./BlockUI.vue"
|
||||
}
|
||||
}
|
||||
"main": "./blockui.cjs.js",
|
||||
"module": "./blockui.esm.js",
|
||||
"unpkg": "./blockui.min.js",
|
||||
"types": "./BlockUI.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./BlockUI.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-blockui-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-blockui.p-component-overlay {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.p-blockui-document.p-component-overlay {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-blockui-container'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'blockui',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./blockuistyle.cjs.js",
|
||||
"module": "./blockuistyle.esm.js",
|
||||
"unpkg": "./blockuistyle.min.js"
|
||||
}
|
||||
|
|
@ -1,61 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-breadcrumb {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-breadcrumb-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-breadcrumb p-component',
|
||||
menu: 'p-breadcrumb-list',
|
||||
home: 'p-breadcrumb-home',
|
||||
separator: 'p-menuitem-separator',
|
||||
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
|
||||
action: ({ props, isActive, isExactActive }) => [
|
||||
'p-menuitem-link',
|
||||
{
|
||||
'router-link-active': isActive,
|
||||
'router-link-active-exact': props.exact && isExactActive
|
||||
}
|
||||
],
|
||||
icon: 'p-menuitem-icon',
|
||||
label: 'p-menuitem-text'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
|
||||
import BreadcrumbStyle from 'primevue/breadcrumb/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseBreadcrumb',
|
||||
|
|
@ -74,10 +19,7 @@ export default {
|
|||
default: true
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: BreadcrumbStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
{
|
||||
"main": "./breadcrumb.cjs.js",
|
||||
"module": "./breadcrumb.esm.js",
|
||||
"unpkg": "./breadcrumb.min.js",
|
||||
"types": "./Breadcrumb.d.ts"
|
||||
,
|
||||
"browser": {
|
||||
"./sfc": "./Breadcrumb.vue"
|
||||
}
|
||||
}
|
||||
"main": "./breadcrumb.cjs.js",
|
||||
"module": "./breadcrumb.esm.js",
|
||||
"unpkg": "./breadcrumb.min.js",
|
||||
"types": "./Breadcrumb.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Breadcrumb.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-breadcrumb {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-breadcrumb-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-text {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-link {
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb .p-menuitem-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-breadcrumb::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-breadcrumb p-component',
|
||||
menu: 'p-breadcrumb-list',
|
||||
home: 'p-breadcrumb-home',
|
||||
separator: 'p-menuitem-separator',
|
||||
menuitem: ({ instance }) => ['p-menuitem', { 'p-disabled': instance.disabled() }],
|
||||
action: ({ props, isActive, isExactActive }) => [
|
||||
'p-menuitem-link',
|
||||
{
|
||||
'router-link-active': isActive,
|
||||
'router-link-active-exact': props.exact && isExactActive
|
||||
}
|
||||
],
|
||||
icon: 'p-menuitem-icon',
|
||||
label: 'p-menuitem-text'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'breadcrumb',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./breadcrumbstyle.cjs.js",
|
||||
"module": "./breadcrumbstyle.esm.js",
|
||||
"unpkg": "./breadcrumbstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,38 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-button p-component',
|
||||
{
|
||||
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
|
||||
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
|
||||
'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
|
||||
'p-button-loading': props.loading,
|
||||
'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
|
||||
'p-button-link': props.link,
|
||||
[`p-button-${props.severity}`]: props.severity,
|
||||
'p-button-raised': props.raised,
|
||||
'p-button-rounded': props.rounded,
|
||||
'p-button-text': props.text,
|
||||
'p-button-outlined': props.outlined,
|
||||
'p-button-sm': props.size === 'small',
|
||||
'p-button-lg': props.size === 'large',
|
||||
'p-button-plain': props.plain
|
||||
}
|
||||
],
|
||||
loadingIcon: 'p-button-loading-icon pi-spin',
|
||||
icon: ({ props }) => [
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': props.iconPos === 'left' && props.label,
|
||||
'p-button-icon-right': props.iconPos === 'right' && props.label,
|
||||
'p-button-icon-top': props.iconPos === 'top' && props.label,
|
||||
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
|
||||
}
|
||||
],
|
||||
label: 'p-button-label'
|
||||
};
|
||||
import ButtonStyle from 'primevue/button/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseButton',
|
||||
|
|
@ -103,9 +71,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
style: ButtonStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./button.cjs.js",
|
||||
"module": "./button.esm.js",
|
||||
"unpkg": "./button.min.js",
|
||||
"types": "./Button.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Button.vue"
|
||||
}
|
||||
}
|
||||
"main": "./button.cjs.js",
|
||||
"module": "./button.esm.js",
|
||||
"unpkg": "./button.min.js",
|
||||
"types": "./Button.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Button.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-button p-component',
|
||||
{
|
||||
'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
|
||||
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
|
||||
'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
|
||||
'p-button-loading': props.loading,
|
||||
'p-button-loading-label-only': props.loading && !instance.hasIcon && props.label,
|
||||
'p-button-link': props.link,
|
||||
[`p-button-${props.severity}`]: props.severity,
|
||||
'p-button-raised': props.raised,
|
||||
'p-button-rounded': props.rounded,
|
||||
'p-button-text': props.text,
|
||||
'p-button-outlined': props.outlined,
|
||||
'p-button-sm': props.size === 'small',
|
||||
'p-button-lg': props.size === 'large',
|
||||
'p-button-plain': props.plain
|
||||
}
|
||||
],
|
||||
loadingIcon: 'p-button-loading-icon pi-spin',
|
||||
icon: ({ props }) => [
|
||||
'p-button-icon',
|
||||
{
|
||||
'p-button-icon-left': props.iconPos === 'left' && props.label,
|
||||
'p-button-icon-right': props.iconPos === 'right' && props.label,
|
||||
'p-button-icon-top': props.iconPos === 'top' && props.label,
|
||||
'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
|
||||
}
|
||||
],
|
||||
label: 'p-button-label'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'button',
|
||||
classes,
|
||||
loadStyle: () => {}
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./buttonstyle.cjs.js",
|
||||
"module": "./buttonstyle.esm.js",
|
||||
"unpkg": "./buttonstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,227 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-calendar {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.p-calendar .p-inputtext {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-inputtext {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-datepicker-trigger {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-calendar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar .p-inputtext {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/* Datepicker */
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-inline {
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.p-datepicker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-datepicker-header .p-datepicker-title {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Multiple Month DatePicker */
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* DatePicker Table */
|
||||
.p-datepicker table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.p-datepicker td > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Month Picker */
|
||||
.p-monthpicker-month {
|
||||
width: 33.3%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Year Picker */
|
||||
.p-yearpicker-year {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Button Bar */
|
||||
.p-datepicker-buttonbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.p-timepicker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-timepicker button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-timepicker > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Touch UI */
|
||||
.p-datepicker-touch-ui,
|
||||
.p-calendar .p-datepicker-touch-ui {
|
||||
min-width: 80vw;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ props, state }) => [
|
||||
'p-calendar p-component p-inputwrapper',
|
||||
{
|
||||
'p-calendar-w-btn': props.showIcon,
|
||||
'p-calendar-timeonly': props.timeOnly,
|
||||
'p-calendar-disabled': props.disabled,
|
||||
'p-inputwrapper-filled': props.modelValue,
|
||||
'p-inputwrapper-focus': state.focused,
|
||||
'p-focus': state.focused || state.overlayVisible
|
||||
}
|
||||
],
|
||||
input: 'p-inputtext p-component',
|
||||
dropdownButton: 'p-datepicker-trigger',
|
||||
panel: ({ instance, props, state }) => [
|
||||
'p-datepicker p-component',
|
||||
{
|
||||
'p-datepicker-inline': props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
'p-datepicker-timeonly': props.timeOnly,
|
||||
'p-datepicker-multiple-month': props.numberOfMonths > 1,
|
||||
'p-datepicker-monthpicker': state.currentView === 'month',
|
||||
'p-datepicker-yearpicker': state.currentView === 'year',
|
||||
'p-datepicker-touch-ui': props.touchUI,
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
groupContainer: 'p-datepicker-group-container',
|
||||
group: 'p-datepicker-group',
|
||||
header: 'p-datepicker-header',
|
||||
previousButton: 'p-datepicker-prev p-link',
|
||||
previousIcon: 'p-datepicker-prev-icon',
|
||||
title: 'p-datepicker-title',
|
||||
monthTitle: 'p-datepicker-month p-link',
|
||||
yearTitle: 'p-datepicker-year p-link',
|
||||
decadeTitle: 'p-datepicker-decade',
|
||||
nextButton: 'p-datepicker-next p-link',
|
||||
nextIcon: 'p-datepicker-next-icon',
|
||||
container: 'p-datepicker-calendar-container',
|
||||
table: 'p-datepicker-calendar',
|
||||
weekHeader: 'p-datepicker-weekheader p-disabled',
|
||||
weekNumber: 'p-datepicker-weeknumber',
|
||||
weekLabelContainer: 'p-disabled',
|
||||
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
|
||||
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
|
||||
monthPicker: 'p-monthpicker',
|
||||
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
|
||||
yearPicker: 'p-yearpicker',
|
||||
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
|
||||
timePicker: 'p-timepicker',
|
||||
hourPicker: 'p-hour-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
separatorContainer: 'p-separator',
|
||||
minutePicker: 'p-minute-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
secondPicker: 'p-second-picker',
|
||||
ampmPicker: 'p-ampm-picker',
|
||||
buttonbar: 'p-datepicker-buttonbar',
|
||||
todayButton: 'p-button-text',
|
||||
clearButton: 'p-button-text'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
|
||||
import CalendarStyle from 'primevue/calendar/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseCalendar',
|
||||
|
|
@ -442,11 +221,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
inlineStyles,
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: CalendarStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./calendar.cjs.js",
|
||||
"module": "./calendar.esm.js",
|
||||
"unpkg": "./calendar.min.js",
|
||||
"types": "./Calendar.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Calendar.vue"
|
||||
}
|
||||
}
|
||||
"main": "./calendar.cjs.js",
|
||||
"module": "./calendar.esm.js",
|
||||
"unpkg": "./calendar.min.js",
|
||||
"types": "./Calendar.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Calendar.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,227 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-calendar {
|
||||
display: inline-flex;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.p-calendar .p-inputtext {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-inputtext {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.p-calendar-w-btn .p-datepicker-trigger {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
/* Fluid */
|
||||
.p-fluid .p-calendar {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-calendar .p-inputtext {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
/* Datepicker */
|
||||
.p-calendar .p-datepicker {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-datepicker {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.p-datepicker-inline {
|
||||
display: inline-block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.p-datepicker-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-datepicker-header .p-datepicker-title {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-datepicker-prev,
|
||||
.p-datepicker-next {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Multiple Month DatePicker */
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* DatePicker Table */
|
||||
.p-datepicker table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.p-datepicker td > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Month Picker */
|
||||
.p-monthpicker-month {
|
||||
width: 33.3%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Year Picker */
|
||||
.p-yearpicker-year {
|
||||
width: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Button Bar */
|
||||
.p-datepicker-buttonbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Time Picker */
|
||||
.p-timepicker {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-timepicker button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-timepicker > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Touch UI */
|
||||
.p-datepicker-touch-ui,
|
||||
.p-calendar .p-datepicker-touch-ui {
|
||||
min-width: 80vw;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ props, state }) => [
|
||||
'p-calendar p-component p-inputwrapper',
|
||||
{
|
||||
'p-calendar-w-btn': props.showIcon,
|
||||
'p-calendar-timeonly': props.timeOnly,
|
||||
'p-calendar-disabled': props.disabled,
|
||||
'p-inputwrapper-filled': props.modelValue,
|
||||
'p-inputwrapper-focus': state.focused,
|
||||
'p-focus': state.focused || state.overlayVisible
|
||||
}
|
||||
],
|
||||
input: 'p-inputtext p-component',
|
||||
dropdownButton: 'p-datepicker-trigger',
|
||||
panel: ({ instance, props, state }) => [
|
||||
'p-datepicker p-component',
|
||||
{
|
||||
'p-datepicker-inline': props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
'p-datepicker-timeonly': props.timeOnly,
|
||||
'p-datepicker-multiple-month': props.numberOfMonths > 1,
|
||||
'p-datepicker-monthpicker': state.currentView === 'month',
|
||||
'p-datepicker-yearpicker': state.currentView === 'year',
|
||||
'p-datepicker-touch-ui': props.touchUI,
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
groupContainer: 'p-datepicker-group-container',
|
||||
group: 'p-datepicker-group',
|
||||
header: 'p-datepicker-header',
|
||||
previousButton: 'p-datepicker-prev p-link',
|
||||
previousIcon: 'p-datepicker-prev-icon',
|
||||
title: 'p-datepicker-title',
|
||||
monthTitle: 'p-datepicker-month p-link',
|
||||
yearTitle: 'p-datepicker-year p-link',
|
||||
decadeTitle: 'p-datepicker-decade',
|
||||
nextButton: 'p-datepicker-next p-link',
|
||||
nextIcon: 'p-datepicker-next-icon',
|
||||
container: 'p-datepicker-calendar-container',
|
||||
table: 'p-datepicker-calendar',
|
||||
weekHeader: 'p-datepicker-weekheader p-disabled',
|
||||
weekNumber: 'p-datepicker-weeknumber',
|
||||
weekLabelContainer: 'p-disabled',
|
||||
day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
|
||||
dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date) && date.selectable, 'p-disabled': !date.selectable }],
|
||||
monthPicker: 'p-monthpicker',
|
||||
month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
|
||||
yearPicker: 'p-yearpicker',
|
||||
year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
|
||||
timePicker: 'p-timepicker',
|
||||
hourPicker: 'p-hour-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
separatorContainer: 'p-separator',
|
||||
minutePicker: 'p-minute-picker',
|
||||
incrementButton: 'p-link',
|
||||
decrementButton: 'p-link',
|
||||
secondPicker: 'p-second-picker',
|
||||
ampmPicker: 'p-ampm-picker',
|
||||
buttonbar: 'p-datepicker-buttonbar',
|
||||
todayButton: 'p-button-text',
|
||||
clearButton: 'p-button-text'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'calendar',
|
||||
css,
|
||||
classes,
|
||||
inlineStyles
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./calendarstyle.cjs.js",
|
||||
"module": "./calendarstyle.esm.js",
|
||||
"unpkg": "./calendarstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,21 +1,10 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
const classes = {
|
||||
root: 'p-card p-component',
|
||||
header: 'p-card-header',
|
||||
body: 'p-card-body',
|
||||
title: 'p-card-title',
|
||||
subtitle: 'p-card-subtitle',
|
||||
content: 'p-card-content',
|
||||
footer: 'p-card-footer'
|
||||
};
|
||||
import CardStyle from 'primevue/card/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseCard',
|
||||
extends: BaseComponent,
|
||||
css: {
|
||||
classes
|
||||
}
|
||||
style: CardStyle
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./card.cjs.js",
|
||||
"module": "./card.esm.js",
|
||||
"unpkg": "./card.min.js",
|
||||
"types": "./Card.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Card.vue"
|
||||
}
|
||||
}
|
||||
"main": "./card.cjs.js",
|
||||
"module": "./card.esm.js",
|
||||
"unpkg": "./card.min.js",
|
||||
"types": "./Card.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Card.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const classes = {
|
||||
root: 'p-card p-component',
|
||||
header: 'p-card-header',
|
||||
body: 'p-card-body',
|
||||
title: 'p-card-title',
|
||||
subtitle: 'p-card-subtitle',
|
||||
content: 'p-card-content',
|
||||
footer: 'p-card-footer'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'card',
|
||||
classes,
|
||||
loadStyle: () => {}
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./cardstyle.cjs.js",
|
||||
"module": "./cardstyle.esm.js",
|
||||
"unpkg": "./cardstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,136 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-carousel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
align-self: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-carousel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-items-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-carousel-items-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-carousel-indicator > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
.p-carousel-vertical .p-carousel-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-items-container {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-carousel-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-carousel-item.p-carousel-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance }) => [
|
||||
'p-carousel p-component',
|
||||
{
|
||||
'p-carousel-vertical': instance.isVertical(),
|
||||
'p-carousel-horizontal': !instance.isVertical()
|
||||
}
|
||||
],
|
||||
header: 'p-carousel-header',
|
||||
content: 'p-carousel-content',
|
||||
container: 'p-carousel-container',
|
||||
previousButton: ({ instance }) => [
|
||||
'p-carousel-prev p-link',
|
||||
{
|
||||
'p-disabled': instance.backwardIsDisabled
|
||||
}
|
||||
],
|
||||
previousButtonIcon: 'p-carousel-next-icon',
|
||||
itemsContent: 'p-carousel-items-content',
|
||||
itemsContainer: 'p-carousel-items-container',
|
||||
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
|
||||
'p-carousel-item p-carousel-item-cloned',
|
||||
{
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
'p-carousel-item-start': index === 0,
|
||||
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
|
||||
}
|
||||
],
|
||||
item: ({ instance, index }) => [
|
||||
'p-carousel-item',
|
||||
{
|
||||
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
|
||||
'p-carousel-item-start': instance.firstIndex() === index,
|
||||
'p-carousel-item-end': instance.lastIndex() === index
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => [
|
||||
'p-carousel-next p-link',
|
||||
{
|
||||
'p-disabled': instance.forwardIsDisabled
|
||||
}
|
||||
],
|
||||
nextButtonIcon: 'p-carousel-prev-icon',
|
||||
indicators: 'p-carousel-indicators p-reset',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-carousel-indicator',
|
||||
{
|
||||
'p-highlight': instance.d_page === index
|
||||
}
|
||||
],
|
||||
indicatorButton: 'p-link',
|
||||
footer: 'p-carousel-footer'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
|
||||
import CarouselStyle from 'primevue/carousel/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseCarousel',
|
||||
|
|
@ -186,10 +56,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: CarouselStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./carousel.cjs.js",
|
||||
"module": "./carousel.esm.js",
|
||||
"unpkg": "./carousel.min.js",
|
||||
"types": "./Carousel.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Carousel.vue"
|
||||
}
|
||||
}
|
||||
"main": "./carousel.cjs.js",
|
||||
"module": "./carousel.esm.js",
|
||||
"unpkg": "./carousel.min.js",
|
||||
"types": "./Carousel.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Carousel.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,135 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-carousel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
align-self: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-carousel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-items-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-carousel-items-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-carousel-indicator > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
.p-carousel-vertical .p-carousel-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-items-container {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-carousel-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-carousel-item.p-carousel-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance }) => [
|
||||
'p-carousel p-component',
|
||||
{
|
||||
'p-carousel-vertical': instance.isVertical(),
|
||||
'p-carousel-horizontal': !instance.isVertical()
|
||||
}
|
||||
],
|
||||
header: 'p-carousel-header',
|
||||
content: 'p-carousel-content',
|
||||
container: 'p-carousel-container',
|
||||
previousButton: ({ instance }) => [
|
||||
'p-carousel-prev p-link',
|
||||
{
|
||||
'p-disabled': instance.backwardIsDisabled
|
||||
}
|
||||
],
|
||||
previousButtonIcon: 'p-carousel-next-icon',
|
||||
itemsContent: 'p-carousel-items-content',
|
||||
itemsContainer: 'p-carousel-items-container',
|
||||
itemCloned: ({ index, value, totalShiftedItems, d_numVisible }) => [
|
||||
'p-carousel-item p-carousel-item-cloned',
|
||||
{
|
||||
'p-carousel-item-active': totalShiftedItems * -1 === value.length + d_numVisible,
|
||||
'p-carousel-item-start': index === 0,
|
||||
'p-carousel-item-end': value.slice(-1 * d_numVisible).length - 1 === index
|
||||
}
|
||||
],
|
||||
item: ({ instance, index }) => [
|
||||
'p-carousel-item',
|
||||
{
|
||||
'p-carousel-item-active': instance.firstIndex() <= index && instance.lastIndex() >= index,
|
||||
'p-carousel-item-start': instance.firstIndex() === index,
|
||||
'p-carousel-item-end': instance.lastIndex() === index
|
||||
}
|
||||
],
|
||||
nextButton: ({ instance }) => [
|
||||
'p-carousel-next p-link',
|
||||
{
|
||||
'p-disabled': instance.forwardIsDisabled
|
||||
}
|
||||
],
|
||||
nextButtonIcon: 'p-carousel-prev-icon',
|
||||
indicators: 'p-carousel-indicators p-reset',
|
||||
indicator: ({ instance, index }) => [
|
||||
'p-carousel-indicator',
|
||||
{
|
||||
'p-highlight': instance.d_page === index
|
||||
}
|
||||
],
|
||||
indicatorButton: 'p-link',
|
||||
footer: 'p-carousel-footer'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'carousel',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./carouselstyle.cjs.js",
|
||||
"module": "./carouselstyle.esm.js",
|
||||
"unpkg": "./carouselstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,142 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-cascadeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-cascadeselect .p-cascadeselect-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-cascadeselect-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect .p-cascadeselect-label {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-sublist {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-cascadeselect p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': props.modelValue,
|
||||
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
|
||||
'p-overlay-open': instance.overlayVisible
|
||||
}
|
||||
],
|
||||
label: ({ instance, props }) => [
|
||||
'p-cascadeselect-label p-inputtext',
|
||||
{
|
||||
'p-placeholder': instance.label === props.placeholder,
|
||||
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
|
||||
}
|
||||
],
|
||||
dropdownButton: 'p-cascadeselect-trigger',
|
||||
loadingIcon: 'p-cascadeselect-trigger-icon',
|
||||
dropdownIcon: 'p-cascadeselect-trigger-icon',
|
||||
panel: ({ instance }) => [
|
||||
'p-cascadeselect-panel p-component',
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
wrapper: 'p-cascadeselect-items-wrapper',
|
||||
list: 'p-cascadeselect-panel p-cascadeselect-items',
|
||||
item: ({ instance, processedOption }) => [
|
||||
'p-cascadeselect-item',
|
||||
{
|
||||
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
|
||||
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
|
||||
'p-focus': instance.isOptionFocused(processedOption),
|
||||
'p-disabled': instance.isOptionDisabled(processedOption)
|
||||
}
|
||||
],
|
||||
content: 'p-cascadeselect-item-content',
|
||||
text: 'p-cascadeselect-item-text',
|
||||
groupIcon: 'p-cascadeselect-group-icon',
|
||||
sublist: 'p-cascadeselect-sublist'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
|
||||
import CascadeSelectStyle from 'primevue/cascadeselect/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseCascadeSelect',
|
||||
|
|
@ -245,11 +109,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
inlineStyles,
|
||||
loadStyle
|
||||
},
|
||||
style: CascadeSelectStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./cascadeselect.cjs.js",
|
||||
"module": "./cascadeselect.esm.js",
|
||||
"unpkg": "./cascadeselect.min.js",
|
||||
"types": "./CascadeSelect.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./CascadeSelect.vue"
|
||||
}
|
||||
}
|
||||
"main": "./cascadeselect.cjs.js",
|
||||
"module": "./cascadeselect.esm.js",
|
||||
"unpkg": "./cascadeselect.min.js",
|
||||
"types": "./CascadeSelect.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./CascadeSelect.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-cascadeselect {
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-cascadeselect-label-empty {
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-cascadeselect .p-cascadeselect-panel {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item {
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-cascadeselect-group-icon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-cascadeselect-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-fluid .p-cascadeselect .p-cascadeselect-label {
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-cascadeselect-sublist {
|
||||
position: absolute;
|
||||
min-width: 100%;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
|
||||
display: block;
|
||||
left: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const inlineStyles = {
|
||||
root: ({ props }) => ({ position: props.appendTo === 'self' ? 'relative' : undefined })
|
||||
};
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-cascadeselect p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': props.modelValue,
|
||||
'p-inputwrapper-focus': instance.focused || instance.overlayVisible,
|
||||
'p-overlay-open': instance.overlayVisible
|
||||
}
|
||||
],
|
||||
label: ({ instance, props }) => [
|
||||
'p-cascadeselect-label p-inputtext',
|
||||
{
|
||||
'p-placeholder': instance.label === props.placeholder,
|
||||
'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
|
||||
}
|
||||
],
|
||||
dropdownButton: 'p-cascadeselect-trigger',
|
||||
loadingIcon: 'p-cascadeselect-trigger-icon',
|
||||
dropdownIcon: 'p-cascadeselect-trigger-icon',
|
||||
panel: ({ instance }) => [
|
||||
'p-cascadeselect-panel p-component',
|
||||
{
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
wrapper: 'p-cascadeselect-items-wrapper',
|
||||
list: 'p-cascadeselect-panel p-cascadeselect-items',
|
||||
item: ({ instance, processedOption }) => [
|
||||
'p-cascadeselect-item',
|
||||
{
|
||||
'p-cascadeselect-item-group': instance.isOptionGroup(processedOption),
|
||||
'p-cascadeselect-item-active p-highlight': instance.isOptionActive(processedOption),
|
||||
'p-focus': instance.isOptionFocused(processedOption),
|
||||
'p-disabled': instance.isOptionDisabled(processedOption)
|
||||
}
|
||||
],
|
||||
content: 'p-cascadeselect-item-content',
|
||||
text: 'p-cascadeselect-item-text',
|
||||
groupIcon: 'p-cascadeselect-group-icon',
|
||||
sublist: 'p-cascadeselect-sublist'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'cascadeselect',
|
||||
css,
|
||||
classes,
|
||||
inlineStyles
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./cascadeselectstyle.cjs.js",
|
||||
"module": "./cascadeselectstyle.esm.js",
|
||||
"unpkg": "./cascadeselectstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,20 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-chart {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-chart'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
|
||||
import ChartStyle from 'primevue/chart/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseChart',
|
||||
|
|
@ -37,10 +23,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: ChartStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./chart.cjs.js",
|
||||
"module": "./chart.esm.js",
|
||||
"unpkg": "./chart.min.js",
|
||||
"types": "./Chart.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chart.vue"
|
||||
}
|
||||
}
|
||||
"main": "./chart.cjs.js",
|
||||
"module": "./chart.esm.js",
|
||||
"unpkg": "./chart.min.js",
|
||||
"types": "./Chart.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chart.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-chart {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: 'p-chart'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'chart',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./chartstyle.cjs.js",
|
||||
"module": "./chartstyle.esm.js",
|
||||
"unpkg": "./chartstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,25 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-checked': instance.checked,
|
||||
'p-checkbox-disabled': props.disabled,
|
||||
'p-checkbox-focused': instance.focused
|
||||
}
|
||||
],
|
||||
input: ({ instance, props }) => [
|
||||
'p-checkbox-box',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
icon: 'p-checkbox-icon'
|
||||
};
|
||||
import CheckboxStyle from 'primevue/checkbox/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseCheckbox',
|
||||
|
|
@ -81,9 +62,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes
|
||||
},
|
||||
style: CheckboxStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./checkbox.cjs.js",
|
||||
"module": "./checkbox.esm.js",
|
||||
"unpkg": "./checkbox.min.js",
|
||||
"types": "./Checkbox.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Checkbox.vue"
|
||||
}
|
||||
}
|
||||
"main": "./checkbox.cjs.js",
|
||||
"module": "./checkbox.esm.js",
|
||||
"unpkg": "./checkbox.min.js",
|
||||
"types": "./Checkbox.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Checkbox.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-checkbox p-component',
|
||||
{
|
||||
'p-checkbox-checked': instance.checked,
|
||||
'p-checkbox-disabled': props.disabled,
|
||||
'p-checkbox-focused': instance.focused
|
||||
}
|
||||
],
|
||||
input: ({ instance, props }) => [
|
||||
'p-checkbox-box',
|
||||
{
|
||||
'p-highlight': instance.checked,
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused
|
||||
}
|
||||
],
|
||||
icon: 'p-checkbox-icon'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'checkbox',
|
||||
classes,
|
||||
loadStyle: () => {}
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./checkboxstyle.cjs.js",
|
||||
"module": "./checkboxstyle.esm.js",
|
||||
"unpkg": "./checkboxstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,46 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-chip-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.p-chip-icon.pi {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.p-chip-remove-icon {
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chip img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-chip p-component',
|
||||
{
|
||||
'p-chip-image': props.image != null
|
||||
}
|
||||
],
|
||||
icon: 'p-chip-icon',
|
||||
label: 'p-chip-text',
|
||||
removeIcon: 'p-chip-remove-icon'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
|
||||
import ChipStyle from 'primevue/chip/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseChip',
|
||||
|
|
@ -67,10 +27,7 @@ export default {
|
|||
default: undefined
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: ChipStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./chip.cjs.js",
|
||||
"module": "./chip.esm.js",
|
||||
"unpkg": "./chip.min.js",
|
||||
"types": "./Chip.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chip.vue"
|
||||
}
|
||||
}
|
||||
"main": "./chip.cjs.js",
|
||||
"module": "./chip.esm.js",
|
||||
"unpkg": "./chip.min.js",
|
||||
"types": "./Chip.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chip.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-chip-text {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.p-chip-icon.pi {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.p-chip-remove-icon {
|
||||
line-height: 1.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chip img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => [
|
||||
'p-chip p-component',
|
||||
{
|
||||
'p-chip-image': props.image != null
|
||||
}
|
||||
],
|
||||
icon: 'p-chip-icon',
|
||||
label: 'p-chip-text',
|
||||
removeIcon: 'p-chip-remove-icon'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'chip',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./chipstyle.cjs.js",
|
||||
"module": "./chipstyle.esm.js",
|
||||
"unpkg": "./chipstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,75 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-chips {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chips-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-chips {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-chips p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
|
||||
'p-inputwrapper-focus': instance.focused
|
||||
}
|
||||
],
|
||||
container: 'p-inputtext p-chips-multiple-container',
|
||||
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
|
||||
label: 'p-chips-token-label',
|
||||
removeTokenIcon: 'p-chips-token-icon',
|
||||
inputToken: 'p-chips-input-token'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
|
||||
import ChipsStyle from 'primevue/chips/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseChips',
|
||||
|
|
@ -132,10 +63,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: ChipsStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./chips.cjs.js",
|
||||
"module": "./chips.esm.js",
|
||||
"unpkg": "./chips.min.js",
|
||||
"types": "./Chips.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chips.vue"
|
||||
}
|
||||
}
|
||||
"main": "./chips.cjs.js",
|
||||
"module": "./chips.esm.js",
|
||||
"unpkg": "./chips.min.js",
|
||||
"types": "./Chips.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Chips.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-chips {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-multiple-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-chips-token {
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.p-chips-input-token {
|
||||
flex: 1 1 auto;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.p-chips-token-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-chips-input-token input {
|
||||
border: 0 none;
|
||||
outline: 0 none;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-fluid .p-chips {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ instance, props }) => [
|
||||
'p-chips p-component p-inputwrapper',
|
||||
{
|
||||
'p-disabled': props.disabled,
|
||||
'p-focus': instance.focused,
|
||||
'p-inputwrapper-filled': (props.modelValue && props.modelValue.length) || (instance.inputValue && instance.inputValue.length),
|
||||
'p-inputwrapper-focus': instance.focused
|
||||
}
|
||||
],
|
||||
container: 'p-inputtext p-chips-multiple-container',
|
||||
token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
|
||||
label: 'p-chips-token-label',
|
||||
removeTokenIcon: 'p-chips-token-icon',
|
||||
inputToken: 'p-chips-input-token'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'chips',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./chipsstyle.cjs.js",
|
||||
"module": "./chipsstyle.esm.js",
|
||||
"unpkg": "./chipsstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,40 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import { useStyle } from 'primevue/usestyle';
|
||||
|
||||
const styles = `
|
||||
@layer primevue {
|
||||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue {
|
||||
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
|
||||
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
|
||||
panel: ({ instance, props }) => [
|
||||
'p-colorpicker-panel',
|
||||
{
|
||||
'p-colorpicker-overlay-panel': !props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
content: 'p-colorpicker-content',
|
||||
selector: 'p-colorpicker-color-selector',
|
||||
color: 'p-colorpicker-color',
|
||||
colorHandle: 'p-colorpicker-color-handle',
|
||||
hue: 'p-colorpicker-hue',
|
||||
hueHandle: 'p-colorpicker-hue-handle'
|
||||
};
|
||||
|
||||
const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
|
||||
import ColorPickerStyle from 'primevue/colorpicker/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseColorPicker',
|
||||
|
|
@ -78,10 +44,7 @@ export default {
|
|||
},
|
||||
panelClass: null
|
||||
},
|
||||
css: {
|
||||
classes,
|
||||
loadStyle
|
||||
},
|
||||
style: ColorPickerStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./colorpicker.cjs.js",
|
||||
"module": "./colorpicker.esm.js",
|
||||
"unpkg": "./colorpicker.min.js",
|
||||
"types": "./ColorPicker.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./ColorPicker.vue"
|
||||
}
|
||||
}
|
||||
"main": "./colorpicker.cjs.js",
|
||||
"module": "./colorpicker.esm.js",
|
||||
"unpkg": "./colorpicker.min.js",
|
||||
"types": "./ColorPicker.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./ColorPicker.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import BaseStyle from 'primevue/base/style';
|
||||
|
||||
const css = `
|
||||
@layer primevue {
|
||||
.p-colorpicker-panel .p-colorpicker-color {
|
||||
background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
|
||||
}
|
||||
|
||||
.p-colorpicker-panel .p-colorpicker-hue {
|
||||
background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const classes = {
|
||||
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }],
|
||||
input: ({ props }) => ['p-colorpicker-preview p-inputtext', { 'p-disabled': props.disabled }],
|
||||
panel: ({ instance, props }) => [
|
||||
'p-colorpicker-panel',
|
||||
{
|
||||
'p-colorpicker-overlay-panel': !props.inline,
|
||||
'p-disabled': props.disabled,
|
||||
'p-input-filled': instance.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': instance.$primevue.config.ripple === false
|
||||
}
|
||||
],
|
||||
content: 'p-colorpicker-content',
|
||||
selector: 'p-colorpicker-color-selector',
|
||||
color: 'p-colorpicker-color',
|
||||
colorHandle: 'p-colorpicker-color-handle',
|
||||
hue: 'p-colorpicker-hue',
|
||||
hueHandle: 'p-colorpicker-hue-handle'
|
||||
};
|
||||
|
||||
export default BaseStyle.extend({
|
||||
name: 'colorpicker',
|
||||
css,
|
||||
classes
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./colorpickerstyle.cjs.js",
|
||||
"module": "./colorpickerstyle.esm.js",
|
||||
"unpkg": "./colorpickerstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import ColumnStyle from 'primevue/column/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseColumn',
|
||||
|
|
@ -182,6 +183,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
style: ColumnStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./column.cjs.js",
|
||||
"module": "./column.esm.js",
|
||||
"unpkg": "./column.min.js",
|
||||
"types": "./Column.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Column.vue"
|
||||
}
|
||||
}
|
||||
"main": "./column.cjs.js",
|
||||
"module": "./column.esm.js",
|
||||
"unpkg": "./column.min.js",
|
||||
"types": "./Column.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./Column.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export default {};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./columnstyle.cjs.js",
|
||||
"module": "./columnstyle.esm.js",
|
||||
"unpkg": "./columnstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import ColumnGroupStyle from 'primevue/columngroup/style';
|
||||
|
||||
export default {
|
||||
name: 'BaseColumnGroup',
|
||||
|
|
@ -10,6 +11,7 @@ export default {
|
|||
default: null
|
||||
}
|
||||
},
|
||||
style: ColumnGroupStyle,
|
||||
provide() {
|
||||
return {
|
||||
$parentInstance: this
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"main": "./columngroup.cjs.js",
|
||||
"module": "./columngroup.esm.js",
|
||||
"unpkg": "./columngroup.min.js",
|
||||
"types": "./ColumnGroup.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./ColumnGroup.vue"
|
||||
}
|
||||
}
|
||||
"main": "./columngroup.cjs.js",
|
||||
"module": "./columngroup.esm.js",
|
||||
"unpkg": "./columngroup.min.js",
|
||||
"types": "./ColumnGroup.d.ts",
|
||||
"browser": {
|
||||
"./sfc": "./ColumnGroup.vue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
export default {};
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"main": "./columngroupstyle.cjs.js",
|
||||
"module": "./columngroupstyle.esm.js",
|
||||
"unpkg": "./columngroupstyle.min.js"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"main": "./config.cjs.js",
|
||||
"module": "./config.esm.js",
|
||||
"unpkg": "./config.min.js",
|
||||
"types": "./PrimeVue.d.ts"
|
||||
}
|
||||
"main": "./config.cjs.js",
|
||||
"module": "./config.esm.js",
|
||||
"unpkg": "./config.min.js",
|
||||
"types": "./PrimeVue.d.ts"
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue