@vue-composable/web - npm Package Compare versions

Comparing version 1.0.0-dev.13 to 1.0.0-dev.14

dist/web.cjs.js

@@ -592,2 +592,138 @@ 'use strict';
 
+/**
+ * Gets the current value of the given CSS variable name for the given element.
+ *
+ * @param element The element to get the variable for.
+ * @param name The CSS variable name.
+ */
+function getCssVariableFor(element, name) {
+    const result = getComputedStyle(element).getPropertyValue(name);
+    return result ? result.trim() : null;
+}
+/**
+ * Sets the value of the given CSS variable for the given element.
+ *
+ * @param element The element to set the variable for.
+ * @param name The CSS variable name without dashes.
+ * @param value The CSS variable value.
+ */
+function setCssVariableFor(element, name, value) {
+    element.style.setProperty(name, value);
+}
+const defaultOptions = {
+    attributes: true,
+    childList: true,
+    attributeFilter: ["style"]
+};
+const sanitizeCssVarName = (name) => {
+    if (name.length <= 2 || name[0] !== "-" || name[1] !== "-") {
+        return `--${name}`;
+    }
+    return name;
+};
+function useCssVariables(variables, elementOrOptions, optionsConfig) {
+    const supported = core.isClient && "MutationObserver" in self;
+    const [element, options] = compositionApi.isRef(elementOrOptions) || core.isElement(elementOrOptions)
+        ? [elementOrOptions, optionsConfig || defaultOptions]
+        : [
+            (supported && document.documentElement) || {},
+            elementOrOptions || defaultOptions
+        ];
+    // Reactive property to tell if the observer is listening
+    const observing = compositionApi.ref(true);
+    // Stores the results by reference.
+    const result = {};
+    // If the element is ref, we should only update the variable on mount
+    const updateValues = [];
+    // extract name
+    const defEntries = Object.entries(variables).map((x) => {
+        const [name, value] = core.isString(x[1]) ? [x[1]] : [x[1].name, x[1].value];
+        if (value) {
+            updateValues.push(() => setCssVariableFor(core.unwrap(element), name, core.unwrap(value)));
+            // if is ref, use provided ref instead
+            result[x[0]] = core.wrap(value);
+        }
+        return [x[0], sanitizeCssVarName(name)];
+    });
+    for (let i = 0; i < defEntries.length; i++) {
+        const [key, name] = defEntries[i];
+        if (!result[key]) {
+            // if is ref set null, onMount we will update
+            result[key] = compositionApi.ref((compositionApi.isRef(element) && !element.value) || !supported
+                ? null
+                : getCssVariableFor(core.unwrap(element), name));
+        }
+        if (supported) {
+            // keep track of changes
+            compositionApi.watch([result[key], core.wrap(element)], (val) => {
+                if (!observing)
+                    return;
+                if (val) {
+                    setCssVariableFor(val[1], name, val[0]);
+                }
+            }, { lazy: compositionApi.isRef(element) });
+        }
+    }
+    if (!supported) {
+        return {
+            ...result,
+            stop: core.NO_OP,
+            resume: core.NO_OP,
+            supported,
+            observing
+        };
+    }
+    const update = () => {
+        // Each time an observation has been made,
+        // we look up for each CSS variable and update their values.
+        for (let i = 0; i < defEntries.length; i++) {
+            const [key, value] = defEntries[i];
+            result[key].value = getCssVariableFor(core.unwrap(element), value);
+        }
+    };
+    // Sets up the observer.
+    const observer = new MutationObserver(update);
+    // Sets the `stop` method.
+    const stop = () => {
+        observer.disconnect();
+        observing.value = false;
+    };
+    // Sets the `start` method.
+    const resume = () => {
+        // if it was stopped we will update the variables to the current value
+        if (!observing.value) {
+            update();
+        }
+        observer.observe(core.unwrap(element), options);
+        observing.value = true;
+    };
+    // Stops on destroy
+    compositionApi.onUnmounted(stop);
+    if (compositionApi.isRef(element)) {
+        compositionApi.onMounted(() => {
+            updateValues.forEach(x => x());
+            compositionApi.watch(element, (n, o) => {
+                if (o) {
+                    stop();
+                }
+                if (n) {
+                    resume();
+                }
+            });
+        });
+    }
+    else if (core.isClient || element) {
+        updateValues.forEach(x => x());
+        // Starts observe
+        resume();
+    }
+    return {
+        ...result,
+        supported,
+        resume,
+        stop,
+        observing
+    };
+}
+
 function useMatchMedia(query) {
@@ -1206,4 +1342,6 @@ const supported = core.isClient ? "matchMedia" in window : false;
 
+exports.getCssVariableFor = getCssVariableFor;
 exports.refShared = refShared;
 exports.setBreakpointTailwindCSS = setBreakpointTailwindCSS;
+exports.setCssVariableFor = setCssVariableFor;
 exports.storageAvailable = storageAvailable;
@@ -1214,2 +1352,3 @@ exports.useBreakpoint = useBreakpoint;
 exports.useBroadcastChannel = useBroadcastChannel;
+exports.useCssVariables = useCssVariables;
 exports.useEvent = useEvent;
@@ -1216,0 +1355,0 @@ exports.useFetch = useFetch;

dist/web.cjs.prod.js

@@ -569,2 +569,138 @@ 'use strict';
 
+/**
+ * Gets the current value of the given CSS variable name for the given element.
+ *
+ * @param element The element to get the variable for.
+ * @param name The CSS variable name.
+ */
+function getCssVariableFor(element, name) {
+    const result = getComputedStyle(element).getPropertyValue(name);
+    return result ? result.trim() : null;
+}
+/**
+ * Sets the value of the given CSS variable for the given element.
+ *
+ * @param element The element to set the variable for.
+ * @param name The CSS variable name without dashes.
+ * @param value The CSS variable value.
+ */
+function setCssVariableFor(element, name, value) {
+    element.style.setProperty(name, value);
+}
+const defaultOptions = {
+    attributes: true,
+    childList: true,
+    attributeFilter: ["style"]
+};
+const sanitizeCssVarName = (name) => {
+    if (name.length <= 2 || name[0] !== "-" || name[1] !== "-") {
+        return `--${name}`;
+    }
+    return name;
+};
+function useCssVariables(variables, elementOrOptions, optionsConfig) {
+    const supported = core.isClient && "MutationObserver" in self;
+    const [element, options] = compositionApi.isRef(elementOrOptions) || core.isElement(elementOrOptions)
+        ? [elementOrOptions, optionsConfig || defaultOptions]
+        : [
+            (supported && document.documentElement) || {},
+            elementOrOptions || defaultOptions
+        ];
+    // Reactive property to tell if the observer is listening
+    const observing = compositionApi.ref(true);
+    // Stores the results by reference.
+    const result = {};
+    // If the element is ref, we should only update the variable on mount
+    const updateValues = [];
+    // extract name
+    const defEntries = Object.entries(variables).map((x) => {
+        const [name, value] = core.isString(x[1]) ? [x[1]] : [x[1].name, x[1].value];
+        if (value) {
+            updateValues.push(() => setCssVariableFor(core.unwrap(element), name, core.unwrap(value)));
+            // if is ref, use provided ref instead
+            result[x[0]] = core.wrap(value);
+        }
+        return [x[0], sanitizeCssVarName(name)];
+    });
+    for (let i = 0; i < defEntries.length; i++) {
+        const [key, name] = defEntries[i];
+        if (!result[key]) {
+            // if is ref set null, onMount we will update
+            result[key] = compositionApi.ref((compositionApi.isRef(element) && !element.value) || !supported
+                ? null
+                : getCssVariableFor(core.unwrap(element), name));
+        }
+        if (supported) {
+            // keep track of changes
+            compositionApi.watch([result[key], core.wrap(element)], (val) => {
+                if (!observing)
+                    return;
+                if (val) {
+                    setCssVariableFor(val[1], name, val[0]);
+                }
+            }, { lazy: compositionApi.isRef(element) });
+        }
+    }
+    if (!supported) {
+        return {
+            ...result,
+            stop: core.NO_OP,
+            resume: core.NO_OP,
+            supported,
+            observing
+        };
+    }
+    const update = () => {
+        // Each time an observation has been made,
+        // we look up for each CSS variable and update their values.
+        for (let i = 0; i < defEntries.length; i++) {
+            const [key, value] = defEntries[i];
+            result[key].value = getCssVariableFor(core.unwrap(element), value);
+        }
+    };
+    // Sets up the observer.
+    const observer = new MutationObserver(update);
+    // Sets the `stop` method.
+    const stop = () => {
+        observer.disconnect();
+        observing.value = false;
+    };
+    // Sets the `start` method.
+    const resume = () => {
+        // if it was stopped we will update the variables to the current value
+        if (!observing.value) {
+            update();
+        }
+        observer.observe(core.unwrap(element), options);
+        observing.value = true;
+    };
+    // Stops on destroy
+    compositionApi.onUnmounted(stop);
+    if (compositionApi.isRef(element)) {
+        compositionApi.onMounted(() => {
+            updateValues.forEach(x => x());
+            compositionApi.watch(element, (n, o) => {
+                if (o) {
+                    stop();
+                }
+                if (n) {
+                    resume();
+                }
+            });
+        });
+    }
+    else if (core.isClient || element) {
+        updateValues.forEach(x => x());
+        // Starts observe
+        resume();
+    }
+    return {
+        ...result,
+        supported,
+        resume,
+        stop,
+        observing
+    };
+}
+
 function useMatchMedia(query) {
@@ -1147,4 +1283,6 @@ const supported = core.isClient ? "matchMedia" in window : false;
 
+exports.getCssVariableFor = getCssVariableFor;
 exports.refShared = refShared;
 exports.setBreakpointTailwindCSS = setBreakpointTailwindCSS;
+exports.setCssVariableFor = setCssVariableFor;
 exports.storageAvailable = storageAvailable;
@@ -1155,2 +1293,3 @@ exports.useBreakpoint = useBreakpoint;
 exports.useBroadcastChannel = useBroadcastChannel;
+exports.useCssVariables = useCssVariables;
 exports.useEvent = useEvent;
@@ -1157,0 +1296,0 @@ exports.useFetch = useFetch;

dist/web.d.ts

@@ -28,2 +28,49 @@ import { Ref } from '@vue/composition-api';
 
+/**
+ * Possible configuration
+ */
+export declare type CssVarDef = CssVarDefinition | string;
+
+/**
+ * API to assign a value to the css variable
+ */
+export declare interface CssVarDefinition {
+    name: string;
+    value: RefTyped<string>;
+}
+
+/**
+ * The values a CSS variable can contain.
+ */
+export declare type CssVariable = string | null;
+
+/**
+ * A CSS Variable configuration object. Each value must be a CSS variable without the leading dashes.
+ */
+export declare type CssVariableConfigurationObject = Record<string, CssVarDef>;
+
+/**
+ * The CSS variable return object. Each value is a `Ref` of a CSS variable's contents.
+ */
+export declare type CssVariableObject<T> = Record<keyof T, Ref<CssVariable>>;
+
+/**
+ * Additional methods.
+ */
+export declare interface CssVariablesMethods {
+    /**
+     * Stops the observation.
+     */
+    stop: () => void;
+    /**
+     * Resumes the observation.
+     */
+    resume: () => void;
+    /**
+     * current observing state
+     */
+    observing: Ref<boolean>;
+    supported: boolean;
+}
+
 export declare interface DefaultTailwindBreakpoints {
@@ -46,2 +93,10 @@ sm: 640;
 
+/**
+ * Gets the current value of the given CSS variable name for the given element.
+ *
+ * @param element The element to get the variable for.
+ * @param name The CSS variable name.
+ */
+export declare function getCssVariableFor(element: HTMLElement, name: string): CssVariable;
+
 export declare interface IntersectionObserverOptions {
@@ -211,2 +266,11 @@ root?: RefTyped<Element> | null;
 
+/**
+ * Sets the value of the given CSS variable for the given element.
+ *
+ * @param element The element to set the variable for.
+ * @param name The CSS variable name without dashes.
+ * @param value The CSS variable value.
+ */
+export declare function setCssVariableFor(element: HTMLElement, name: string, value: CssVariable): void;
+
 export declare const enum SharedRefMind {
@@ -265,2 +329,18 @@ HIVE = 0,
 
+/**
+ * Returns object. Consists of multiple pairs of key/CSS variable value references and the additional methods.
+ */
+export declare type UseCssVariables<T> = CssVariableObject<T> & CssVariablesMethods;
+
+/**
+ *
+ * @param variables
+ * @param element
+ */
+export declare function useCssVariables<T extends CssVariableConfigurationObject>(variables: T): UseCssVariables<T>;
+
+export declare function useCssVariables<T extends CssVariableConfigurationObject>(variables: T, options?: MutationObserverInit): UseCssVariables<T>;
+
+export declare function useCssVariables<T extends CssVariableConfigurationObject>(variables: T, element: RefTyped<HTMLElement>, options?: MutationObserverInit): UseCssVariables<T>;
+
 export declare function useEvent<T extends {
@@ -267,0 +347,0 @@ addEventListener: (name: string, listener: EventListenerOrEventListenerObject) => any;

dist/web.esm-bundler.js

@@ -591,2 +591,138 @@ import { onUnmounted, onMounted, watch, ref, isRef, computed, getCurrentInstance, provide, inject } from '@vue/composition-api';
 
+/**
+ * Gets the current value of the given CSS variable name for the given element.
+ *
+ * @param element The element to get the variable for.
+ * @param name The CSS variable name.
+ */
+function getCssVariableFor(element, name) {
+    const result = getComputedStyle(element).getPropertyValue(name);
+    return result ? result.trim() : null;
+}
+/**
+ * Sets the value of the given CSS variable for the given element.
+ *
+ * @param element The element to set the variable for.
+ * @param name The CSS variable name without dashes.
+ * @param value The CSS variable value.
+ */
+function setCssVariableFor(element, name, value) {
+    element.style.setProperty(name, value);
+}
+const defaultOptions = {
+    attributes: true,
+    childList: true,
+    attributeFilter: ["style"]
+};
+const sanitizeCssVarName = (name) => {
+    if (name.length <= 2 || name[0] !== "-" || name[1] !== "-") {
+        return `--${name}`;
+    }
+    return name;
+};
+function useCssVariables(variables, elementOrOptions, optionsConfig) {
+    const supported = isClient && "MutationObserver" in self;
+    const [element, options] = isRef(elementOrOptions) || isElement(elementOrOptions)
+        ? [elementOrOptions, optionsConfig || defaultOptions]
+        : [
+            (supported && document.documentElement) || {},
+            elementOrOptions || defaultOptions
+        ];
+    // Reactive property to tell if the observer is listening
+    const observing = ref(true);
+    // Stores the results by reference.
+    const result = {};
+    // If the element is ref, we should only update the variable on mount
+    const updateValues = [];
+    // extract name
+    const defEntries = Object.entries(variables).map((x) => {
+        const [name, value] = isString(x[1]) ? [x[1]] : [x[1].name, x[1].value];
+        if (value) {
+            updateValues.push(() => setCssVariableFor(unwrap(element), name, unwrap(value)));
+            // if is ref, use provided ref instead
+            result[x[0]] = wrap(value);
+        }
+        return [x[0], sanitizeCssVarName(name)];
+    });
+    for (let i = 0; i < defEntries.length; i++) {
+        const [key, name] = defEntries[i];
+        if (!result[key]) {
+            // if is ref set null, onMount we will update
+            result[key] = ref((isRef(element) && !element.value) || !supported
+                ? null
+                : getCssVariableFor(unwrap(element), name));
+        }
+        if (supported) {
+            // keep track of changes
+            watch([result[key], wrap(element)], (val) => {
+                if (!observing)
+                    return;
+                if (val) {
+                    setCssVariableFor(val[1], name, val[0]);
+                }
+            }, { lazy: isRef(element) });
+        }
+    }
+    if (!supported) {
+        return {
+            ...result,
+            stop: NO_OP,
+            resume: NO_OP,
+            supported,
+            observing
+        };
+    }
+    const update = () => {
+        // Each time an observation has been made,
+        // we look up for each CSS variable and update their values.
+        for (let i = 0; i < defEntries.length; i++) {
+            const [key, value] = defEntries[i];
+            result[key].value = getCssVariableFor(unwrap(element), value);
+        }
+    };
+    // Sets up the observer.
+    const observer = new MutationObserver(update);
+    // Sets the `stop` method.
+    const stop = () => {
+        observer.disconnect();
+        observing.value = false;
+    };
+    // Sets the `start` method.
+    const resume = () => {
+        // if it was stopped we will update the variables to the current value
+        if (!observing.value) {
+            update();
+        }
+        observer.observe(unwrap(element), options);
+        observing.value = true;
+    };
+    // Stops on destroy
+    onUnmounted(stop);
+    if (isRef(element)) {
+        onMounted(() => {
+            updateValues.forEach(x => x());
+            watch(element, (n, o) => {
+                if (o) {
+                    stop();
+                }
+                if (n) {
+                    resume();
+                }
+            });
+        });
+    }
+    else if (isClient || element) {
+        updateValues.forEach(x => x());
+        // Starts observe
+        resume();
+    }
+    return {
+        ...result,
+        supported,
+        resume,
+        stop,
+        observing
+    };
+}
+
 function useMatchMedia(query) {
@@ -1205,2 +1341,2 @@ const supported = isClient ? "matchMedia" in window : false;
 
-export { refShared, setBreakpointTailwindCSS, storageAvailable, useBreakpoint, useBreakpointChrome, useBreakpointTailwindCSS, useBroadcastChannel, useEvent, useFetch, useGeolocation, useIntersectionObserver, useLanguage, useLocalStorage, useMatchMedia, useNetworkInformation, useOnMouseMove, useOnResize, useOnScroll, useOnline, usePageVisibility, useSessionStorage, useSharedRef, useStorage, useWebSocket, useWebStorage };
+export { getCssVariableFor, refShared, setBreakpointTailwindCSS, setCssVariableFor, storageAvailable, useBreakpoint, useBreakpointChrome, useBreakpointTailwindCSS, useBroadcastChannel, useCssVariables, useEvent, useFetch, useGeolocation, useIntersectionObserver, useLanguage, useLocalStorage, useMatchMedia, useNetworkInformation, useOnMouseMove, useOnResize, useOnScroll, useOnline, usePageVisibility, useSessionStorage, useSharedRef, useStorage, useWebSocket, useWebStorage };

package.json

 {
   "name": "@vue-composable/web",
-  "version": "1.0.0-dev.13",
+  "version": "1.0.0-dev.14",
   "description": "@vue-composable/web",
@@ -42,3 +42,3 @@ "main": "index.js",
   "dependencies": {
-    "@vue-composable/core": "1.0.0-dev.13"
+    "@vue-composable/core": "1.0.0-dev.14"
   },
@@ -45,0 +45,0 @@ "devDependencies": {

README.md

@@ -64,2 +64,3 @@ # @vue-composable/web
 - [Geolocation API](https://pikax.me/vue-composable/composable/web/geolocation)
+- [CSS variables](https://pikax.me/vue-composable/composable/web/cssVariables) - reactive `CSS variables`
 
@@ -66,0 +67,0 @@ ## Contributing

No alert changes

Improved metrics

Total package byte prevSize

158045

increased by11.82%

Lines of code

4386

increased by12.26%

Number of lines in readme file

77

increased by1.32%

Dependency changes

• + Added@vue-composable/core@1.0.0-dev.14(transitive)

• - Removed@vue-composable/core@1.0.0-dev.13(transitive)

• Updated@vue-composable/core@1.0.0-dev.14