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

Refactor on useStyle api

pull/4186/head
mertsincan 2023-07-12 10:19:35 +01:00
parent 061febf1d4
commit 6f8e16f0ae
2 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/lib/usestyle/UseStyle.d.ts vendored
View File

@ -12,6 +12,7 @@ export declare function useStyle(
options?: StyleOptions options?: StyleOptions
): { ): {
id: string; id: string;
name: string;
css: any; css: any;
unload: () => void; unload: () => void;
load: () => void; load: () => void;

23
components/lib/usestyle/UseStyle.js
View File

@ -15,25 +15,25 @@ let _id = 0;
export function useStyle(css, options = {}) { export function useStyle(css, options = {}) {
const isLoaded = ref(false); const isLoaded = ref(false);
const cssRef = ref(css);
const styleRef = ref(null);
const defaultDocument = DomHandler.isClient() ? window.document : undefined; const defaultDocument = DomHandler.isClient() ? window.document : undefined;
const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined } = options; const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined } = options;
const cssRef = ref(css);
let stop = () => {}; let stop = () => {};
const load = () => { const load = () => {
if (!document) return; if (!document) return;
const el = document.querySelector(`style[data-primevue-style-id="${name}"]`) || document.getElementById(id) || document.createElement('style'); styleRef.value = document.querySelector(`style[data-primevue-style-id="${name}"]`) || document.getElementById(id) || document.createElement('style');
if (!el.isConnected) { if (!styleRef.value.isConnected) {
el.type = 'text/css'; styleRef.value.type = 'text/css';
id && (el.id = id); id && (styleRef.value.id = id);
media && (el.media = media); media && (styleRef.value.media = media);
document.head.appendChild(el); document.head.appendChild(styleRef.value);
name && el.setAttribute('data-primevue-style-id', name); name && styleRef.value.setAttribute('data-primevue-style-id', name);
} }
if (isLoaded.value) return; if (isLoaded.value) return;
@ -41,7 +41,7 @@ export function useStyle(css, options = {}) {
stop = watch( stop = watch(
cssRef, cssRef,
(value) => { (value) => {
el.textContent = value; styleRef.value.textContent = value;
}, },
{ immediate: true } { immediate: true }
); );
@ -52,7 +52,7 @@ export function useStyle(css, options = {}) {
const unload = () => { const unload = () => {
if (!document || !isLoaded.value) return; if (!document || !isLoaded.value) return;
stop(); stop();
document.head.removeChild(document.getElementById(id)); DomHandler.isExist(styleRef.value) && document.head.removeChild(styleRef.value);
isLoaded.value = false; isLoaded.value = false;
}; };
@ -63,6 +63,7 @@ export function useStyle(css, options = {}) {
return { return {
id, id,
name,
css: cssRef, css: cssRef,
unload, unload,
load, load,