Refactor

components/lib/button/BaseButton.vue

@@ -1,77 +1,5 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.p-button {
-    margin: 0;
-    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) {
-    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 {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}
-`;
 
 const classes = {
     root: ({ instance, props }) => [
@@ -106,8 +34,6 @@ const classes = {
     label: 'p-button-label'
 };
 
-const { load: loadStyle } = useStyle(styles, { name: 'button', manual: true });
-
 export default {
     name: 'BaseButton',
     extends: BaseComponent,
@@ -178,8 +104,7 @@ export default {
         }
     },
     css: {
-        classes,
+        classes
-        loadStyle
     },
     provide() {
         return {

components/lib/checkbox/BaseCheckbox.vue

@@ -1,26 +1,5 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.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 classes = {
     root: ({ instance, props }) => [
@@ -42,8 +21,6 @@ const classes = {
     icon: 'p-checkbox-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { name: 'checkbox', manual: true });
-
 export default {
     name: 'BaseCheckbox',
     extends: BaseComponent,
@@ -105,8 +82,7 @@ export default {
         }
     },
     css: {
-        classes,
+        classes
-        loadStyle
     },
     provide() {
         return {

components/lib/inputtext/BaseInputText.vue

@@ -1,123 +1,10 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.p-inputtext {
-    margin: 0;
-}
-
-.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 classes = {
     root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
 };
 
-const { load: loadStyle } = useStyle(styles, { name: 'inputtext', manual: true });
-
 export default {
     name: 'BaseInputText',
     extends: BaseComponent,
@@ -125,8 +12,7 @@ export default {
         modelValue: null
     },
     css: {
-        classes,
+        classes
-        loadStyle
     },
     provide() {
         return {

components/lib/radiobutton/BaseRadioButton.vue

@@ -1,39 +1,5 @@
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { useStyle } from 'primevue/usestyle';
-
-const styles = `
-.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 classes = {
     root: ({ instance, props }) => [
@@ -55,8 +21,6 @@ const classes = {
     icon: 'p-radiobutton-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'radiobutton', manual: true });
-
 export default {
     name: 'BaseRadioButton',
     extends: BaseComponent,
@@ -97,8 +61,7 @@ export default {
         }
     },
     css: {
-        classes,
+        classes
-        loadStyle
     },
     provide() {
         return {