Refactor #3965 - Add useStyle hook for dynamic styling

components/lib/usestyle/UseStyle.js

@@ -0,0 +1,70 @@
+/*
+ * Ported from useStyleTag in @vueuse/core
+ * https://github.com/vueuse
+ */
+import { DomHandler } from 'primevue/utils';
+import { getCurrentInstance, nextTick, onMounted, readonly, ref, watch } from 'vue';
+
+function tryOnMounted(fn, sync = true) {
+    if (getCurrentInstance()) onMounted(fn);
+    else if (sync) fn();
+    else nextTick(fn);
+}
+
+let _id = 0;
+
+export function useStyle(css, options = {}) {
+    const isLoaded = ref(false);
+
+    const defaultDocument = DomHandler.isClient() ? window.document : undefined;
+    const { document = defaultDocument, immediate = true, manual = false, id = `primevue_style_${++_id}` } = options;
+
+    const cssRef = ref(css);
+
+    let stop = () => {};
+
+    const load = () => {
+        if (!document) return;
+
+        const el = document.getElementById(id) || document.createElement('style');
+
+        if (!el.isConnected) {
+            el.type = 'text/css';
+            el.id = id;
+            if (options.media) el.media = options.media;
+            document.head.appendChild(el);
+        }
+
+        if (isLoaded.value) return;
+
+        stop = watch(
+            cssRef,
+            (value) => {
+                el.textContent = value;
+            },
+            { immediate: true }
+        );
+
+        isLoaded.value = true;
+    };
+
+    const unload = () => {
+        if (!document || !isLoaded.value) return;
+        stop();
+        document.head.removeChild(document.getElementById(id));
+        isLoaded.value = false;
+    };
+
+    if (immediate && !manual) tryOnMounted(load);
+
+    /*if (!manual)
+      tryOnScopeDispose(unload)*/
+
+    return {
+        id,
+        css: cssRef,
+        unload,
+        load,
+        isLoaded: readonly(isLoaded)
+    };
+}

components/lib/usestyle/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./usestyle.cjs.js",
+    "module": "./usestyle.esm.js",
+    "unpkg": "./usestyle.min.js",
+    "types": "./UseStyle.d.ts"
+}

rollup.config.js

@@ -77,6 +77,7 @@ let coreDependencies = {
     'primevue/useconfirm': 'primevue.useconfirm',
     'primevue/usetoast': 'primevue.usetoast',
     'primevue/usedialog': 'primevue.usedialog',
+    'primevue/usestyle': 'primevue.usestyle',
     'primevue/button': 'primevue.button',
     'primevue/inputtext': 'primevue.inputtext',
     'primevue/inputnumber': 'primevue.inputnumber',

vite.config.js

@@ -10,6 +10,7 @@ export default {
             'primevue/usetoast': path.resolve(__dirname, './components/lib/usetoast/UseToast.js'),
             'primevue/usedialog': path.resolve(__dirname, './components/lib/usedialog/UseDialog.js'),
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
+            'primevue/usestyle': path.resolve(__dirname, './components/lib/usestyle/UseStyle.js'),
             'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
             'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
             'primevue/basecomponent': path.resolve(__dirname, './components/lib/basecomponent/BaseComponent.vue'),