@chakra-ui/c-color-mode - npm Package Compare versions

Comparing version 0.1.0-alpha.1 to 0.1.0-alpha.2

CHANGELOG.md

 # @chakra-ui/c-color-mode
 
+## 0.1.0-alpha.2
+
+### Minor Changes
+
+- [#61](https://github.com/chakra-ui/chakra-ui-vue-next/pull/61) [`520550f`](https://github.com/chakra-ui/chakra-ui-vue-next/commit/520550f0a233af45d83a5dd49907646422b39eb9) Thanks [@koca](https://github.com/koca)! - Created layout components and updated theminnng types for packages.
+
+### Patch Changes
+
+- [#59](https://github.com/chakra-ui/chakra-ui-vue-next/pull/59) [`a79204f`](https://github.com/chakra-ui/chakra-ui-vue-next/commit/a79204f8a6786fdb6456632350480a14e17ad345) Thanks [@devivekw](https://github.com/devivekw)! - Created code component
+
 ## 0.1.0-alpha.1
@@ -4,0 +14,0 @@

dist/cjs/color-mode-provider.js

 "use strict";
 
 exports.__esModule = true;
+exports.useColorModeValue = useColorModeValue;
 exports.useColorMode = void 0;
@@ -27,4 +28,28 @@
 };
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
 
+
 exports.useColorMode = useColorMode;
+
+function useColorModeValue(light, dark) {
+  var _useColorMode = useColorMode(),
+      colorMode = _useColorMode.colorMode;
+
+  var modeValue = (0, _vue.ref)();
+  (0, _vue.watchEffect)(function () {
+    modeValue.value = colorMode.value === 'dark' ? dark : light;
+  });
+  return modeValue;
+}
 //# sourceMappingURL=color-mode-provider.js.map

dist/esm/color-mode-provider.js

@@ -1,2 +0,2 @@
-import { inject, isRef, ref } from 'vue';
+import { inject, isRef, ref, watchEffect } from 'vue';
 
@@ -22,2 +22,25 @@ /** Injects color mode into component instance */
 };
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+
+export function useColorModeValue(light, dark) {
+  var {
+    colorMode
+  } = useColorMode();
+  var modeValue = ref();
+  watchEffect(() => {
+    modeValue.value = colorMode.value === 'dark' ? dark : light;
+  });
+  return modeValue;
+}
 //# sourceMappingURL=color-mode-provider.js.map

dist/types/color-mode-provider.d.ts

@@ -13,1 +13,14 @@ import { ColorMode } from './color-mode.utils';
 export declare const useColorMode: () => ColorModeContext;
+/**
+ * Change value based on color mode.
+ *
+ * @param light the light mode value
+ * @param dark the dark mode value
+ *
+ * @example
+ *
+ * ```js
+ * const Icon = useColorModeValue(MoonIcon, SunIcon)
+ * ```
+ */
+export declare function useColorModeValue<TLight = unknown, TDark = unknown>(light: TLight, dark: TDark): import("vue").Ref<any>;

package.json

 {
   "name": "@chakra-ui/c-color-mode",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "main": "dist/cjs/index.js",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37248

increased by10.47%

Lines of code

430

increased by15.28%

No dependency changes