@daybrush/utils - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

declaration/color.d.ts

@@ -1,6 +0,5 @@
-export declare const COLOR_MODELS: string[];
 export declare function cutHex(hex: string): string;
 export declare function hexToRGBA(hex: string): number[];
-export declare function hex3to6(h: string): string;
+export declare function toFullHex(h: string): string;
 export declare function hslToRGBA(hsl: number[]): number[];
 export declare function stringToRGBA(color: string): number[];

declaration/consts.d.ts

@@ -8,2 +8,11 @@ export interface ObjectInterface<T> {
 export declare const HSLA = "hsla";
+export declare const COLOR_MODELS: string[];
+export declare const FUNCTION = "function";
+export declare const PROPERTY = "property";
+export declare const ARRAY = "array";
+export declare const OBJECT = "object";
+export declare const STRING = "string";
+export declare const NUMBER = "number";
+export declare const UNDEFINED = "undefined";
+export declare const getCrossBrowserProperty: (property: string) => string;
 export declare const TRANSFORM: string;
@@ -10,0 +19,0 @@ export declare const FILTER: string;

declaration/index.d.ts

@@ -0,4 +1,4 @@
+export * from "./consts";
 export * from "./color";
-export * from "./consts";
 export * from "./utils";
 export * from "./css";

declaration/utils.d.ts

@@ -23,4 +23,4 @@ import { ObjectInterface } from "./consts";
 export declare function camelize(str: string): string;
-export declare function decamelize(str: string): string;
+export declare function decamelize(str: string, separator?: string): string;
 export declare function now(): number;
 export declare const requestAnimationFrame: (callback: FrameRequestCallback) => number;

dist/utils.esm.js

@@ -0,7 +1,154 @@
+/*
+Copyright (c) 2018 Daybrush
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/utils
+@version 0.2.0
+*/
+/**
+* @namespace
+* @name Consts
+*/
+
+/**
+* get string "rgb"
+* @memberof Color
+* @example
+import {RGB} from "@daybrush/utils";
+
+console.log(RGB); // "rgb"
+*/
+var RGB = "rgb";
+/**
+* get string "rgba"
+* @memberof Color
+* @example
+import {RGBA} from "@daybrush/utils";
+
+console.log(RGBA); // "rgba"
+*/
+
+var RGBA = "rgba";
+/**
+* get string "hsl"
+* @memberof Color
+* @example
+import {HSL} from "@daybrush/utils";
+
+console.log(HSL); // "hsl"
+*/
+
+var HSL = "hsl";
+/**
+* get string "hsla"
+* @memberof Color
+* @example
+import {HSLA} from "@daybrush/utils";
+
+console.log(HSLA); // "hsla"
+*/
+
+var HSLA = "hsla";
+/**
+* gets an array of color models.
+* @memberof Color
+* @example
+import {COLOR_MODELS} from "@daybrush/utils";
+
+console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
+*/
+
+var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
+/**
+* get string "function"
+* @memberof Consts
+* @example
+import {FUNCTION} from "@daybrush/utils";
+
+console.log(FUNCTION); // "function"
+*/
+
+var FUNCTION = "function";
+/**
+* get string "property"
+* @memberof Consts
+* @example
+import {PROPERTY} from "@daybrush/utils";
+
+console.log(PROPERTY); // "property"
+*/
+
+var PROPERTY = "property";
+/**
+* get string "array"
+* @memberof Consts
+* @example
+import {ARRAY} from "@daybrush/utils";
+
+console.log(ARRAY); // "array"
+*/
+
+var ARRAY = "array";
+/**
+* get string "object"
+* @memberof Consts
+* @example
+import {OBJECT} from "@daybrush/utils";
+
+console.log(OBJECT); // "object"
+*/
+
+var OBJECT = "object";
+/**
+* get string "string"
+* @memberof Consts
+* @example
+import {STRING} from "@daybrush/utils";
+
+console.log(STRING); // "string"
+*/
+
+var STRING = "string";
+/**
+* get string "number"
+* @memberof Consts
+* @example
+import {NUMBER} from "@daybrush/utils";
+
+console.log(NUMBER); // "number"
+*/
+
+var NUMBER = "number";
+/**
+* get string "undefined"
+* @memberof Consts
+* @example
+import {UNDEFINED} from "@daybrush/utils";
+
+console.log(UNDEFINED); // "undefined"
+*/
+
+var UNDEFINED = "undefined";
 var prefixes = ["webkit", "ms", "moz", "o"];
+/**
+ * @namespace CrossBrowser
+ */
 
-var checkProperties =
+/**
+* Get a CSS property with a vendor prefix that supports cross browser.
+* @function
+* @param {string} property - A CSS property
+* @return {string} CSS property with cross-browser vendor prefix
+* @memberof CrossBrowser
+* @example
+import {getCrossBrowserProperty} from "@daybrush/utils";
+
+console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
+console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
+*/
+
+var getCrossBrowserProperty =
 /*#__PURE__*/
 function (property) {
-  if (typeof document === "undefined") {
+  if (typeof document === UNDEFINED) {
     return "";
@@ -13,3 +160,3 @@ }
 
-  if (typeof styles[property] !== "undefined") {
+  if (typeof styles[property] !== UNDEFINED) {
     return property;
@@ -21,3 +168,3 @@ }
 
-    if (typeof styles[name] !== "undefined") {
+    if (typeof styles[name] !== UNDEFINED) {
       return name;
@@ -29,16 +176,47 @@ }
 };
+/**
+* get string "transfrom" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {TRANSFORM} from "@daybrush/utils";
 
-var RGB = "rgb";
-var RGBA = "rgba";
-var HSL = "hsl";
-var HSLA = "hsla";
+console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
+*/
+
 var TRANSFORM =
 /*#__PURE__*/
-checkProperties("transform");
+getCrossBrowserProperty("transform");
+/**
+* get string "filter" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {FILTER} from "@daybrush/utils";
+
+console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
+*/
+
 var FILTER =
 /*#__PURE__*/
-checkProperties("filter");
+getCrossBrowserProperty("filter");
+/**
+* get string "animation" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {ANIMATION} from "@daybrush/utils";
+
+console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
+*/
+
 var ANIMATION =
 /*#__PURE__*/
-checkProperties("animation");
+getCrossBrowserProperty("animation");
+/**
+* get string "keyframes" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {KEYFRAMES} from "@daybrush/utils";
+
+console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
+*/
+
 var KEYFRAMES =
@@ -48,21 +226,83 @@ /*#__PURE__*/
 
+/**
+* @namespace
+* @name Utils
+*/
+
+/**
+* Check the type that the value is undefined.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isUndefined} from "@daybrush/utils";
+
+console.log(isUndefined(undefined)); // true
+console.log(isUndefined("")); // false
+console.log(isUndefined(1)); // false
+console.log(isUndefined(null)); // false
+*/
+
 function isUndefined(value) {
-  return typeof value === "undefined";
+  return typeof value === UNDEFINED;
 }
+/**
+* Check the type that the value is object.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isObject} from "@daybrush/utils";
+
+console.log(isObject({})); // true
+console.log(isObject(undefined)); // false
+console.log(isObject("")); // false
+console.log(isObject(null)); // false
+*/
+
 function isObject(value) {
-  return value && typeof value === "object";
+  return value && typeof value === OBJECT;
 }
+/**
+* Check the type that the value is isArray.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isArray} from "@daybrush/utils";
+
+console.log(isArray([])); // true
+console.log(isArray({})); // false
+console.log(isArray(undefined)); // false
+console.log(isArray(null)); // false
+*/
+
 function isArray(value) {
   return Array.isArray(value);
 }
+/**
+* Check the type that the value is string.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isString} from "@daybrush/utils";
+
+console.log(isString("1234")); // true
+console.log(isString(undefined)); // false
+console.log(isString(1)); // false
+console.log(isString(null)); // false
+*/
+
 function isString(value) {
-  return typeof value === "string";
+  return typeof value === STRING;
 }
 /**
 * divide text by space.
-* @memberof Property
-* @function splitSpace
-* @param {String} text - text to divide
+* @memberof Utils
+* @param {string} text - text to divide
 * @return {Array} divided texts
 * @example
+import {spliceSpace} from "@daybrush/utils";
+
 console.log(splitSpace("a b c d e f g"));
@@ -81,7 +321,8 @@ // ["a", "b", "c", "d", "e", "f", "g"]
 * divide text by comma.
-* @memberof Property
-* @function splitComma
-* @param {String} text - text to divide
+* @memberof Utils
+* @param {string} text - text to divide
 * @return {Array} divided texts
 * @example
+import {splitComma} from "@daybrush/utils";
+
 console.log(splitComma("a,b,c,d,e,f,g"));
@@ -101,2 +342,16 @@ // ["a", "b", "c", "d", "e", "f", "g"]
 }
+/**
+* divide text by bracket "(", ")".
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {object} divided texts
+* @example
+import {splitBracket} from "@daybrush/utils";
+
+console.log(splitBracket("a(1, 2)"));
+// {prefix: "a", value: "1, 2", suffix: ""}
+console.log(splitBracket("a(1, 2)b"));
+// {prefix: "a", value: "1, 2", suffix: "b"}
+*/
+
 function splitBracket(text) {
@@ -115,2 +370,18 @@ var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
 }
+/**
+* divide text by number and unit.
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {object} divided texts
+* @example
+import {splitUnit} from "@daybrush/utils";
+
+console.log(splitUnit("10px"));
+// {prefix: "", value: 10, unit: "px"}
+console.log(splitUnit("-10px"));
+// {prefix: "", value: -10, unit: "px"}
+console.log(splitUnit("a10%"));
+// {prefix: "a", value: 10, unit: "%"}
+*/
+
 function splitUnit(text) {
@@ -136,2 +407,15 @@ var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
 }
+/**
+* transform strings to camel-case
+* @memberof Utils
+* @param {String} text - string
+* @return {String} camel-case string
+* @example
+import {camelize} from "@daybrush/utils";
+
+console.log(camelize("transform-origin")); // transformOrigin
+console.log(camelize("abcd_efg")); // abcdEfg
+console.log(camelize("abcd efg")); // abcdEfg
+*/
+
 function camelize(str) {
@@ -142,10 +426,51 @@ return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
 }
-function decamelize(str) {
+/**
+* transform a camelized string into a lowercased string.
+* @memberof Utils
+* @param {string} text - a camel-cased string
+* @param {string} [separator="-"] - a separator
+* @return {string}  a lowercased string
+* @example
+import {decamelize} from "@daybrush/utils";
+
+console.log(decamelize("transformOrigin")); // transform-origin
+console.log(decamelize("abcdEfg", "_")); // abcd_efg
+*/
+
+function decamelize(str, separator) {
+  if (separator === void 0) {
+    separator = "-";
+  }
+
   return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
-    return letter + "-" + letter2.toLowerCase();
+    return "" + letter + separator + letter2.toLowerCase();
   });
 }
+/**
+* Date.now() method
+* @memberof CrossBrowser
+* @return {number} milliseconds
+* @example
+import {now} from "@daybrush/utils";
+
+console.log(now()); // 12121324241(milliseconds)
+*/
+
 function now() {
   return Date.now ? Date.now() : new Date().getTime();
 }
+/**
+* window.requestAnimationFrame() method with cross browser.
+* @function
+* @memberof CrossBrowser
+* @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
+* @return {number} id
+* @example
+import {requestAnimationFrame} from "@daybrush/utils";
+
+requestAnimationFrame((timestamp) => {
+  console.log(timestamp);
+});
+*/
+
 var requestAnimationFrame =
@@ -155,3 +480,3 @@ /*#__PURE__*/
   var firstTime = now();
-  var raf = typeof window !== "undefined" && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
+  var raf = typeof window !== UNDEFINED && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
   return raf ? raf.bind(window) : function (callback) {
@@ -171,15 +496,15 @@ var currTime = now();
 
-var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
 /**
 * Remove the # from the hex color.
 * @memberof Color
-* @param {String} hex - hex color
-* @return {String} hex color
+* @param {string} hex - hex color
+* @return {string} hex color
 * @example
-console.log(cutHex("#000000"))
-// "000000"
+import {cutHex} from "@daybrush/utils";
+
+console.log(cutHex("#000000")) // "000000"
 */
 
 function cutHex(hex) {
-  return hex.charAt(0) === "#" ? hex.substring(1) : hex;
+  return hex.replace("#", "");
 }
@@ -192,6 +517,8 @@ /**
 * @example
-console.log(hexToRGB("#000000"));
-// [0, 0, 0]
-console.log(hexToRGB("#201045"));
-// [32, 16, 69]
+import {hexToRGBA} from "@daybrush/utils";
+
+console.log(hexToRGBA("#00000005"));
+// [0, 0, 0, 1]
+console.log(hexToRGBA("#201045"));
+// [32, 16, 69, 1]
 */
@@ -213,26 +540,31 @@
 /**
-* convert 3-digit hex color to 6-digit hex color.
+* convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
 * @memberof Color
-* @param {String} hex - 3-digit hex color
-* @return {String} 6-digit hex color
+* @param {String} hex - 3(or 4)-digit hex color
+* @return {String} 6(or 8)-digit hex color
 * @example
-console.log(hex3to6("#123"));
-// "#112233"
+import {toFullHex} from "@daybrush/utils";
+
+console.log(toFullHex("#123")); // "#112233"
+console.log(toFullHex("#123a")); // "#112233aa"
 */
 
-function hex3to6(h) {
+function toFullHex(h) {
   var r = h.charAt(1);
   var g = h.charAt(2);
   var b = h.charAt(3);
-  var arr = ["#", r, r, g, g, b, b];
+  var a = h.charAt(4);
+  var arr = ["#", r, r, g, g, b, b, a, a];
   return arr.join("");
 }
 /**
-* convert hsl color to rgb color.
+* convert hsl color to rgba color.
 * @memberof Color
 * @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
-* @return {Array} rgb color
+* @return {Array} rgba color
 * @example
-console.log(hslToRGB([150, 0.5, 0.4]));
-// [51, 153, 102]
+import {hslToRGBA} from "@daybrush/utils";
+
+console.log(hslToRGBA([150, 0.5, 0.4]));
+// [51, 153, 102, 1]
 */
@@ -275,4 +607,10 @@
 * @memberof Color
-* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
+* @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
 * @return {Array} rgba color
+* @example
+import {stringToRGBA} from "@daybrush/utils";
+
+console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
+console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
+console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
 */
@@ -282,4 +620,4 @@
   if (color.charAt(0) === "#") {
-    if (color.length === 4) {
-      return hexToRGBA(hex3to6(color));
+    if (color.length === 4 || color.length === 5) {
+      return hexToRGBA(toFullHex(color));
     } else {
@@ -329,2 +667,17 @@ return hexToRGBA(color);
 
+/**
+ * @namespace DOM
+ */
+
+/**
+* Checks if the specified class value exists in the element's class attribute.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to search
+* @return {boolean} return false if the class is not found.
+* @example
+import {hasClass} from "@daybrush/utils";
+
+console.log(hasClass(element, "start")); // true or false
+*/
 function hasClass(element, className) {
@@ -337,2 +690,13 @@ if (element.classList) {
 }
+/**
+* Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to add
+* @example
+import {addClass} from "@daybrush/utils";
+
+addClass(element, "start");
+*/
+
 function addClass(element, className) {
@@ -345,2 +709,13 @@ if (element.classList) {
 }
+/**
+* Removes the specified class value.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to remove
+* @example
+import {removeClass} from "@daybrush/utils";
+
+removeClass(element, "start");
+*/
+
 function removeClass(element, className) {
@@ -354,2 +729,14 @@ if (element.classList) {
 }
+/**
+* Gets the CSS properties from the element.
+* @memberof DOM
+* @param {HTMLElement | HTMLElement[]} elements - elements
+* @param {string[]} properites - the CSS properties
+* @return {object} returns CSS properties and values.
+* @example
+import {fromCSS} from "@daybrush/utils";
+
+console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
+*/
+
 function fromCSS(elements, properties) {
@@ -381,3 +768,3 @@ if (!elements || !properties || !properties.length) {
 
-export { COLOR_MODELS, cutHex, hexToRGBA, hex3to6, hslToRGBA, stringToRGBA, RGB, RGBA, HSL, HSLA, TRANSFORM, FILTER, ANIMATION, KEYFRAMES, isUndefined, isObject, isArray, isString, splitSpace, splitComma, splitBracket, splitUnit, camelize, decamelize, now, requestAnimationFrame, hasClass, addClass, removeClass, fromCSS };
+export { RGB, RGBA, HSL, HSLA, COLOR_MODELS, FUNCTION, PROPERTY, ARRAY, OBJECT, STRING, NUMBER, UNDEFINED, getCrossBrowserProperty, TRANSFORM, FILTER, ANIMATION, KEYFRAMES, cutHex, hexToRGBA, toFullHex, hslToRGBA, stringToRGBA, isUndefined, isObject, isArray, isString, splitSpace, splitComma, splitBracket, splitUnit, camelize, decamelize, now, requestAnimationFrame, hasClass, addClass, removeClass, fromCSS };
 //# sourceMappingURL=utils.esm.js.map

dist/utils.js

@@ -1,396 +0,795 @@
-'use strict';
+/*
+Copyright (c) 2018 Daybrush
+license: MIT
+author: Daybrush
+repository: https://github.com/daybrush/utils
+@version 0.2.0
+*/
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (factory((global.utils = {})));
+}(this, (function (exports) { 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+  /**
+  * @namespace
+  * @name Consts
+  */
 
-var prefixes = ["webkit", "ms", "moz", "o"];
+  /**
+  * get string "rgb"
+  * @memberof Color
+  * @example
+  import {RGB} from "@daybrush/utils";
 
-var checkProperties =
-/*#__PURE__*/
-function (property) {
-  if (typeof document === "undefined") {
+  console.log(RGB); // "rgb"
+  */
+  var RGB = "rgb";
+  /**
+  * get string "rgba"
+  * @memberof Color
+  * @example
+  import {RGBA} from "@daybrush/utils";
+
+  console.log(RGBA); // "rgba"
+  */
+
+  var RGBA = "rgba";
+  /**
+  * get string "hsl"
+  * @memberof Color
+  * @example
+  import {HSL} from "@daybrush/utils";
+
+  console.log(HSL); // "hsl"
+  */
+
+  var HSL = "hsl";
+  /**
+  * get string "hsla"
+  * @memberof Color
+  * @example
+  import {HSLA} from "@daybrush/utils";
+
+  console.log(HSLA); // "hsla"
+  */
+
+  var HSLA = "hsla";
+  /**
+  * gets an array of color models.
+  * @memberof Color
+  * @example
+  import {COLOR_MODELS} from "@daybrush/utils";
+
+  console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
+  */
+
+  var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
+  /**
+  * get string "function"
+  * @memberof Consts
+  * @example
+  import {FUNCTION} from "@daybrush/utils";
+
+  console.log(FUNCTION); // "function"
+  */
+
+  var FUNCTION = "function";
+  /**
+  * get string "property"
+  * @memberof Consts
+  * @example
+  import {PROPERTY} from "@daybrush/utils";
+
+  console.log(PROPERTY); // "property"
+  */
+
+  var PROPERTY = "property";
+  /**
+  * get string "array"
+  * @memberof Consts
+  * @example
+  import {ARRAY} from "@daybrush/utils";
+
+  console.log(ARRAY); // "array"
+  */
+
+  var ARRAY = "array";
+  /**
+  * get string "object"
+  * @memberof Consts
+  * @example
+  import {OBJECT} from "@daybrush/utils";
+
+  console.log(OBJECT); // "object"
+  */
+
+  var OBJECT = "object";
+  /**
+  * get string "string"
+  * @memberof Consts
+  * @example
+  import {STRING} from "@daybrush/utils";
+
+  console.log(STRING); // "string"
+  */
+
+  var STRING = "string";
+  /**
+  * get string "number"
+  * @memberof Consts
+  * @example
+  import {NUMBER} from "@daybrush/utils";
+
+  console.log(NUMBER); // "number"
+  */
+
+  var NUMBER = "number";
+  /**
+  * get string "undefined"
+  * @memberof Consts
+  * @example
+  import {UNDEFINED} from "@daybrush/utils";
+
+  console.log(UNDEFINED); // "undefined"
+  */
+
+  var UNDEFINED = "undefined";
+  var prefixes = ["webkit", "ms", "moz", "o"];
+  /**
+   * @namespace CrossBrowser
+   */
+
+  /**
+  * Get a CSS property with a vendor prefix that supports cross browser.
+  * @function
+  * @param {string} property - A CSS property
+  * @return {string} CSS property with cross-browser vendor prefix
+  * @memberof CrossBrowser
+  * @example
+  import {getCrossBrowserProperty} from "@daybrush/utils";
+
+  console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
+  console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
+  */
+
+  var getCrossBrowserProperty =
+  /*#__PURE__*/
+  function (property) {
+    if (typeof document === UNDEFINED) {
+      return "";
+    }
+
+    var styles = (document.body || document.documentElement).style;
+    var length = prefixes.length;
+
+    if (typeof styles[property] !== UNDEFINED) {
+      return property;
+    }
+
+    for (var i = 0; i < length; ++i) {
+      var name = "-" + prefixes[i] + "-" + property;
+
+      if (typeof styles[name] !== UNDEFINED) {
+        return name;
+      }
+    }
+
     return "";
+  };
+  /**
+  * get string "transfrom" with the vendor prefix.
+  * @memberof CrossBrowser
+  * @example
+  import {TRANSFORM} from "@daybrush/utils";
+
+  console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
+  */
+
+  var TRANSFORM =
+  /*#__PURE__*/
+  getCrossBrowserProperty("transform");
+  /**
+  * get string "filter" with the vendor prefix.
+  * @memberof CrossBrowser
+  * @example
+  import {FILTER} from "@daybrush/utils";
+
+  console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
+  */
+
+  var FILTER =
+  /*#__PURE__*/
+  getCrossBrowserProperty("filter");
+  /**
+  * get string "animation" with the vendor prefix.
+  * @memberof CrossBrowser
+  * @example
+  import {ANIMATION} from "@daybrush/utils";
+
+  console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
+  */
+
+  var ANIMATION =
+  /*#__PURE__*/
+  getCrossBrowserProperty("animation");
+  /**
+  * get string "keyframes" with the vendor prefix.
+  * @memberof CrossBrowser
+  * @example
+  import {KEYFRAMES} from "@daybrush/utils";
+
+  console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
+  */
+
+  var KEYFRAMES =
+  /*#__PURE__*/
+  ANIMATION.replace("animation", "keyframes");
+
+  /**
+  * @namespace
+  * @name Utils
+  */
+
+  /**
+  * Check the type that the value is undefined.
+  * @memberof Utils
+  * @param {string} value - Value to check the type
+  * @return {boolean} true if the type is correct, false otherwise
+  * @example
+  import {isUndefined} from "@daybrush/utils";
+
+  console.log(isUndefined(undefined)); // true
+  console.log(isUndefined("")); // false
+  console.log(isUndefined(1)); // false
+  console.log(isUndefined(null)); // false
+  */
+
+  function isUndefined(value) {
+    return typeof value === UNDEFINED;
   }
+  /**
+  * Check the type that the value is object.
+  * @memberof Utils
+  * @param {string} value - Value to check the type
+  * @return {boolean} true if the type is correct, false otherwise
+  * @example
+  import {isObject} from "@daybrush/utils";
 
-  var styles = (document.body || document.documentElement).style;
-  var length = prefixes.length;
+  console.log(isObject({})); // true
+  console.log(isObject(undefined)); // false
+  console.log(isObject("")); // false
+  console.log(isObject(null)); // false
+  */
 
-  if (typeof styles[property] !== "undefined") {
-    return property;
+  function isObject(value) {
+    return value && typeof value === OBJECT;
   }
+  /**
+  * Check the type that the value is isArray.
+  * @memberof Utils
+  * @param {string} value - Value to check the type
+  * @return {boolean} true if the type is correct, false otherwise
+  * @example
+  import {isArray} from "@daybrush/utils";
 
-  for (var i = 0; i < length; ++i) {
-    var name = "-" + prefixes[i] + "-" + property;
+  console.log(isArray([])); // true
+  console.log(isArray({})); // false
+  console.log(isArray(undefined)); // false
+  console.log(isArray(null)); // false
+  */
 
-    if (typeof styles[name] !== "undefined") {
-      return name;
-    }
+  function isArray(value) {
+    return Array.isArray(value);
   }
+  /**
+  * Check the type that the value is string.
+  * @memberof Utils
+  * @param {string} value - Value to check the type
+  * @return {boolean} true if the type is correct, false otherwise
+  * @example
+  import {isString} from "@daybrush/utils";
 
-  return "";
-};
+  console.log(isString("1234")); // true
+  console.log(isString(undefined)); // false
+  console.log(isString(1)); // false
+  console.log(isString(null)); // false
+  */
 
-var RGB = "rgb";
-var RGBA = "rgba";
-var HSL = "hsl";
-var HSLA = "hsla";
-var TRANSFORM =
-/*#__PURE__*/
-checkProperties("transform");
-var FILTER =
-/*#__PURE__*/
-checkProperties("filter");
-var ANIMATION =
-/*#__PURE__*/
-checkProperties("animation");
-var KEYFRAMES =
-/*#__PURE__*/
-ANIMATION.replace("animation", "keyframes");
+  function isString(value) {
+    return typeof value === STRING;
+  }
+  /**
+  * divide text by space.
+  * @memberof Utils
+  * @param {string} text - text to divide
+  * @return {Array} divided texts
+  * @example
+  import {spliceSpace} from "@daybrush/utils";
 
-function isUndefined(value) {
-  return typeof value === "undefined";
-}
-function isObject(value) {
-  return value && typeof value === "object";
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function isString(value) {
-  return typeof value === "string";
-}
-/**
-* divide text by space.
-* @memberof Property
-* @function splitSpace
-* @param {String} text - text to divide
-* @return {Array} divided texts
-* @example
-console.log(splitSpace("a b c d e f g"));
-// ["a", "b", "c", "d", "e", "f", "g"]
-console.log(splitSpace("'a,b' c 'd,e' f g"));
-// ["'a,b'", "c", "'d,e'", "f", "g"]
-*/
+  console.log(splitSpace("a b c d e f g"));
+  // ["a", "b", "c", "d", "e", "f", "g"]
+  console.log(splitSpace("'a,b' c 'd,e' f g"));
+  // ["'a,b'", "c", "'d,e'", "f", "g"]
+  */
 
-function splitSpace(text) {
-  // divide comma(,)
-  var matches = text.match(/("[^"]*")|('[^']*')|([^\s()]*(?:\((?:[^()]*|\([^()]*\))*\))[^\s()]*)|\S+/g);
-  return matches || [];
-}
-/**
-* divide text by comma.
-* @memberof Property
-* @function splitComma
-* @param {String} text - text to divide
-* @return {Array} divided texts
-* @example
-console.log(splitComma("a,b,c,d,e,f,g"));
-// ["a", "b", "c", "d", "e", "f", "g"]
-console.log(splitComma("'a,b',c,'d,e',f,g"));
-// ["'a,b'", "c", "'d,e'", "f", "g"]
-*/
+  function splitSpace(text) {
+    // divide comma(,)
+    var matches = text.match(/("[^"]*")|('[^']*')|([^\s()]*(?:\((?:[^()]*|\([^()]*\))*\))[^\s()]*)|\S+/g);
+    return matches || [];
+  }
+  /**
+  * divide text by comma.
+  * @memberof Utils
+  * @param {string} text - text to divide
+  * @return {Array} divided texts
+  * @example
+  import {splitComma} from "@daybrush/utils";
 
-function splitComma(text) {
-  // divide comma(,)
-  // "[^"]*"|'[^']*'
-  var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
-  return matches ? matches.map(function (str) {
-    return str.trim();
-  }) : [];
-}
-function splitBracket(text) {
-  var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
+  console.log(splitComma("a,b,c,d,e,f,g"));
+  // ["a", "b", "c", "d", "e", "f", "g"]
+  console.log(splitComma("'a,b',c,'d,e',f,g"));
+  // ["'a,b'", "c", "'d,e'", "f", "g"]
+  */
 
-  if (!matches || matches.length < 4) {
-    return {};
-  } else {
-    return {
-      prefix: matches[1],
-      value: matches[2],
-      suffix: matches[3]
-    };
+  function splitComma(text) {
+    // divide comma(,)
+    // "[^"]*"|'[^']*'
+    var matches = text.match(/("[^"]*"|'[^']*'|[^,\s()]*\((?:[^()]*|\([^()]*\))*\)[^,\s()]*|[^,])+/g);
+    return matches ? matches.map(function (str) {
+      return str.trim();
+    }) : [];
   }
-}
-function splitUnit(text) {
-  var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
+  /**
+  * divide text by bracket "(", ")".
+  * @memberof Utils
+  * @param {string} text - text to divide
+  * @return {object} divided texts
+  * @example
+  import {splitBracket} from "@daybrush/utils";
 
-  if (!matches) {
+  console.log(splitBracket("a(1, 2)"));
+  // {prefix: "a", value: "1, 2", suffix: ""}
+  console.log(splitBracket("a(1, 2)b"));
+  // {prefix: "a", value: "1, 2", suffix: "b"}
+  */
+
+  function splitBracket(text) {
+    var matches = /([^(]*)\(([\s\S]*)\)([\s\S]*)/g.exec(text);
+
+    if (!matches || matches.length < 4) {
+      return {};
+    } else {
+      return {
+        prefix: matches[1],
+        value: matches[2],
+        suffix: matches[3]
+      };
+    }
+  }
+  /**
+  * divide text by number and unit.
+  * @memberof Utils
+  * @param {string} text - text to divide
+  * @return {object} divided texts
+  * @example
+  import {splitUnit} from "@daybrush/utils";
+
+  console.log(splitUnit("10px"));
+  // {prefix: "", value: 10, unit: "px"}
+  console.log(splitUnit("-10px"));
+  // {prefix: "", value: -10, unit: "px"}
+  console.log(splitUnit("a10%"));
+  // {prefix: "a", value: 10, unit: "%"}
+  */
+
+  function splitUnit(text) {
+    var matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
+
+    if (!matches) {
+      return {
+        prefix: "",
+        unit: "",
+        value: NaN
+      };
+    }
+
+    var prefix = matches[1];
+    var value = matches[2];
+    var unit = matches[3];
     return {
-      prefix: "",
-      unit: "",
-      value: NaN
+      prefix: prefix,
+      unit: unit,
+      value: parseFloat(value)
     };
   }
+  /**
+  * transform strings to camel-case
+  * @memberof Utils
+  * @param {String} text - string
+  * @return {String} camel-case string
+  * @example
+  import {camelize} from "@daybrush/utils";
 
-  var prefix = matches[1];
-  var value = matches[2];
-  var unit = matches[3];
-  return {
-    prefix: prefix,
-    unit: unit,
-    value: parseFloat(value)
-  };
-}
-function camelize(str) {
-  return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
-    return letter.toUpperCase();
+  console.log(camelize("transform-origin")); // transformOrigin
+  console.log(camelize("abcd_efg")); // abcdEfg
+  console.log(camelize("abcd efg")); // abcdEfg
+  */
+
+  function camelize(str) {
+    return str.replace(/[\s-_]([a-z])/g, function (all, letter) {
+      return letter.toUpperCase();
+    });
+  }
+  /**
+  * transform a camelized string into a lowercased string.
+  * @memberof Utils
+  * @param {string} text - a camel-cased string
+  * @param {string} [separator="-"] - a separator
+  * @return {string}  a lowercased string
+  * @example
+  import {decamelize} from "@daybrush/utils";
+
+  console.log(decamelize("transformOrigin")); // transform-origin
+  console.log(decamelize("abcdEfg", "_")); // abcd_efg
+  */
+
+  function decamelize(str, separator) {
+    if (separator === void 0) {
+      separator = "-";
+    }
+
+    return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
+      return "" + letter + separator + letter2.toLowerCase();
+    });
+  }
+  /**
+  * Date.now() method
+  * @memberof CrossBrowser
+  * @return {number} milliseconds
+  * @example
+  import {now} from "@daybrush/utils";
+
+  console.log(now()); // 12121324241(milliseconds)
+  */
+
+  function now() {
+    return Date.now ? Date.now() : new Date().getTime();
+  }
+  /**
+  * window.requestAnimationFrame() method with cross browser.
+  * @function
+  * @memberof CrossBrowser
+  * @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
+  * @return {number} id
+  * @example
+  import {requestAnimationFrame} from "@daybrush/utils";
+
+  requestAnimationFrame((timestamp) => {
+    console.log(timestamp);
   });
-}
-function decamelize(str) {
-  return str.replace(/([a-z])([A-Z])/g, function (all, letter, letter2) {
-    return letter + "-" + letter2.toLowerCase();
-  });
-}
-function now() {
-  return Date.now ? Date.now() : new Date().getTime();
-}
-var requestAnimationFrame =
-/*#__PURE__*/
-function () {
-  var firstTime = now();
-  var raf = typeof window !== "undefined" && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
-  return raf ? raf.bind(window) : function (callback) {
-    var currTime = now();
-    var id = window.setTimeout(function () {
-      callback(currTime - firstTime);
-    }, 1000 / 60);
-    return id;
-  };
-}();
+  */
 
-/**
-* @namespace
-* @name Color
-*/
+  var requestAnimationFrame =
+  /*#__PURE__*/
+  function () {
+    var firstTime = now();
+    var raf = typeof window !== UNDEFINED && (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame);
+    return raf ? raf.bind(window) : function (callback) {
+      var currTime = now();
+      var id = window.setTimeout(function () {
+        callback(currTime - firstTime);
+      }, 1000 / 60);
+      return id;
+    };
+  }();
 
-var COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
-/**
-* Remove the # from the hex color.
-* @memberof Color
-* @param {String} hex - hex color
-* @return {String} hex color
-* @example
-console.log(cutHex("#000000"))
-// "000000"
-*/
+  /**
+  * @namespace
+  * @name Color
+  */
 
-function cutHex(hex) {
-  return hex.charAt(0) === "#" ? hex.substring(1) : hex;
-}
-/**
-* convert hex color to rgb color.
-* @memberof Color
-* @param {String} hex - hex color
-* @return {Array} rgb color
-* @example
-console.log(hexToRGB("#000000"));
-// [0, 0, 0]
-console.log(hexToRGB("#201045"));
-// [32, 16, 69]
-*/
+  /**
+  * Remove the # from the hex color.
+  * @memberof Color
+  * @param {string} hex - hex color
+  * @return {string} hex color
+  * @example
+  import {cutHex} from "@daybrush/utils";
 
-function hexToRGBA(hex) {
-  var h = cutHex(hex);
-  var r = parseInt(h.substring(0, 2), 16);
-  var g = parseInt(h.substring(2, 4), 16);
-  var b = parseInt(h.substring(4, 6), 16);
-  var a = parseInt(h.substring(6, 8), 16) / 255;
+  console.log(cutHex("#000000")) // "000000"
+  */
 
-  if (isNaN(a)) {
-    a = 1;
+  function cutHex(hex) {
+    return hex.replace("#", "");
   }
+  /**
+  * convert hex color to rgb color.
+  * @memberof Color
+  * @param {String} hex - hex color
+  * @return {Array} rgb color
+  * @example
+  import {hexToRGBA} from "@daybrush/utils";
 
-  return [r, g, b, a];
-}
-/**
-* convert 3-digit hex color to 6-digit hex color.
-* @memberof Color
-* @param {String} hex - 3-digit hex color
-* @return {String} 6-digit hex color
-* @example
-console.log(hex3to6("#123"));
-// "#112233"
-*/
+  console.log(hexToRGBA("#00000005"));
+  // [0, 0, 0, 1]
+  console.log(hexToRGBA("#201045"));
+  // [32, 16, 69, 1]
+  */
 
-function hex3to6(h) {
-  var r = h.charAt(1);
-  var g = h.charAt(2);
-  var b = h.charAt(3);
-  var arr = ["#", r, r, g, g, b, b];
-  return arr.join("");
-}
-/**
-* convert hsl color to rgb color.
-* @memberof Color
-* @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
-* @return {Array} rgb color
-* @example
-console.log(hslToRGB([150, 0.5, 0.4]));
-// [51, 153, 102]
-*/
+  function hexToRGBA(hex) {
+    var h = cutHex(hex);
+    var r = parseInt(h.substring(0, 2), 16);
+    var g = parseInt(h.substring(2, 4), 16);
+    var b = parseInt(h.substring(4, 6), 16);
+    var a = parseInt(h.substring(6, 8), 16) / 255;
 
-function hslToRGBA(hsl) {
-  var h = hsl[0];
-  var s = hsl[1];
-  var l = hsl[2];
+    if (isNaN(a)) {
+      a = 1;
+    }
 
-  if (h < 0) {
-    h += Math.floor((Math.abs(h) + 360) / 360) * 360;
+    return [r, g, b, a];
   }
+  /**
+  * convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
+  * @memberof Color
+  * @param {String} hex - 3(or 4)-digit hex color
+  * @return {String} 6(or 8)-digit hex color
+  * @example
+  import {toFullHex} from "@daybrush/utils";
 
-  h %= 360;
-  var c = (1 - Math.abs(2 * l - 1)) * s;
-  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  var m = l - c / 2;
-  var rgb;
+  console.log(toFullHex("#123")); // "#112233"
+  console.log(toFullHex("#123a")); // "#112233aa"
+  */
 
-  if (h < 60) {
-    rgb = [c, x, 0];
-  } else if (h < 120) {
-    rgb = [x, c, 0];
-  } else if (h < 180) {
-    rgb = [0, c, x];
-  } else if (h < 240) {
-    rgb = [0, x, c];
-  } else if (h < 300) {
-    rgb = [x, 0, c];
-  } else if (h < 360) {
-    rgb = [c, 0, x];
+  function toFullHex(h) {
+    var r = h.charAt(1);
+    var g = h.charAt(2);
+    var b = h.charAt(3);
+    var a = h.charAt(4);
+    var arr = ["#", r, r, g, g, b, b, a, a];
+    return arr.join("");
   }
+  /**
+  * convert hsl color to rgba color.
+  * @memberof Color
+  * @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
+  * @return {Array} rgba color
+  * @example
+  import {hslToRGBA} from "@daybrush/utils";
 
-  var result = [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255), hsl.length > 3 ? hsl[3] : 1];
-  return result;
-}
-/**
-* convert string to rgba color.
-* @memberof Color
-* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
-* @return {Array} rgba color
-*/
+  console.log(hslToRGBA([150, 0.5, 0.4]));
+  // [51, 153, 102, 1]
+  */
 
-function stringToRGBA(color) {
-  if (color.charAt(0) === "#") {
-    if (color.length === 4) {
-      return hexToRGBA(hex3to6(color));
-    } else {
-      return hexToRGBA(color);
+  function hslToRGBA(hsl) {
+    var h = hsl[0];
+    var s = hsl[1];
+    var l = hsl[2];
+
+    if (h < 0) {
+      h += Math.floor((Math.abs(h) + 360) / 360) * 360;
     }
-  } else if (color.indexOf("(") !== -1) {
-    // in bracket.
-    var _a = splitBracket(color),
-        prefix = _a.prefix,
-        value = _a.value;
 
-    if (!prefix || !value) {
-      return;
+    h %= 360;
+    var c = (1 - Math.abs(2 * l - 1)) * s;
+    var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+    var m = l - c / 2;
+    var rgb;
+
+    if (h < 60) {
+      rgb = [c, x, 0];
+    } else if (h < 120) {
+      rgb = [x, c, 0];
+    } else if (h < 180) {
+      rgb = [0, c, x];
+    } else if (h < 240) {
+      rgb = [0, x, c];
+    } else if (h < 300) {
+      rgb = [x, 0, c];
+    } else if (h < 360) {
+      rgb = [c, 0, x];
     }
 
-    var arr = splitComma(value);
-    var colorArr = [];
-    var length = arr.length;
+    var result = [Math.round((rgb[0] + m) * 255), Math.round((rgb[1] + m) * 255), Math.round((rgb[2] + m) * 255), hsl.length > 3 ? hsl[3] : 1];
+    return result;
+  }
+  /**
+  * convert string to rgba color.
+  * @memberof Color
+  * @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
+  * @return {Array} rgba color
+  * @example
+  import {stringToRGBA} from "@daybrush/utils";
 
-    switch (prefix) {
-      case RGB:
-      case RGBA:
-        for (var i = 0; i < length; ++i) {
-          colorArr[i] = parseFloat(arr[i]);
-        }
+  console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
+  console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
+  console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
+  */
 
-        return colorArr;
+  function stringToRGBA(color) {
+    if (color.charAt(0) === "#") {
+      if (color.length === 4 || color.length === 5) {
+        return hexToRGBA(toFullHex(color));
+      } else {
+        return hexToRGBA(color);
+      }
+    } else if (color.indexOf("(") !== -1) {
+      // in bracket.
+      var _a = splitBracket(color),
+          prefix = _a.prefix,
+          value = _a.value;
 
-      case HSL:
-      case HSLA:
-        for (var i = 0; i < length; ++i) {
-          if (arr[i].indexOf("%") !== -1) {
-            colorArr[i] = parseFloat(arr[i]) / 100;
-          } else {
+      if (!prefix || !value) {
+        return;
+      }
+
+      var arr = splitComma(value);
+      var colorArr = [];
+      var length = arr.length;
+
+      switch (prefix) {
+        case RGB:
+        case RGBA:
+          for (var i = 0; i < length; ++i) {
             colorArr[i] = parseFloat(arr[i]);
           }
-        } // hsl, hsla to rgba
 
+          return colorArr;
 
-        return hslToRGBA(colorArr);
+        case HSL:
+        case HSLA:
+          for (var i = 0; i < length; ++i) {
+            if (arr[i].indexOf("%") !== -1) {
+              colorArr[i] = parseFloat(arr[i]) / 100;
+            } else {
+              colorArr[i] = parseFloat(arr[i]);
+            }
+          } // hsl, hsla to rgba
+
+
+          return hslToRGBA(colorArr);
+      }
     }
+
+    return;
   }
 
-  return;
-}
+  /**
+   * @namespace DOM
+   */
 
-function hasClass(element, className) {
-  if (element.classList) {
-    return element.classList.contains(className);
+  /**
+  * Checks if the specified class value exists in the element's class attribute.
+  * @memberof DOM
+  * @param {HTMLElement} element - target
+  * @param {string} className - the class name to search
+  * @return {boolean} return false if the class is not found.
+  * @example
+  import {hasClass} from "@daybrush/utils";
+
+  console.log(hasClass(element, "start")); // true or false
+  */
+  function hasClass(element, className) {
+    if (element.classList) {
+      return element.classList.contains(className);
+    }
+
+    return !!element.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
   }
+  /**
+  * Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
+  * @memberof DOM
+  * @param {HTMLElement} element - target
+  * @param {string} className - the class name to add
+  * @example
+  import {addClass} from "@daybrush/utils";
 
-  return !!element.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
-}
-function addClass(element, className) {
-  if (element.classList) {
-    element.classList.add(className);
-  } else {
-    element.className += " " + className;
+  addClass(element, "start");
+  */
+
+  function addClass(element, className) {
+    if (element.classList) {
+      element.classList.add(className);
+    } else {
+      element.className += " " + className;
+    }
   }
-}
-function removeClass(element, className) {
-  if (element.classList) {
-    element.classList.remove(className);
-  } else {
-    var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
-    element.className = element.className.replace(reg, " ");
-  }
-}
-function fromCSS(elements, properties) {
-  if (!elements || !properties || !properties.length) {
-    return {};
-  }
+  /**
+  * Removes the specified class value.
+  * @memberof DOM
+  * @param {HTMLElement} element - target
+  * @param {string} className - the class name to remove
+  * @example
+  import {removeClass} from "@daybrush/utils";
 
-  var element;
+  removeClass(element, "start");
+  */
 
-  if (elements instanceof Element) {
-    element = elements;
-  } else if (elements.length) {
-    element = elements[0];
-  } else {
-    return {};
+  function removeClass(element, className) {
+    if (element.classList) {
+      element.classList.remove(className);
+    } else {
+      var reg = new RegExp("(\\s|^)" + className + "(\\s|$)");
+      element.className = element.className.replace(reg, " ");
+    }
   }
+  /**
+  * Gets the CSS properties from the element.
+  * @memberof DOM
+  * @param {HTMLElement | HTMLElement[]} elements - elements
+  * @param {string[]} properites - the CSS properties
+  * @return {object} returns CSS properties and values.
+  * @example
+  import {fromCSS} from "@daybrush/utils";
 
-  var cssObject = {};
-  var styles = window.getComputedStyle(element);
-  var length = properties.length;
+  console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
+  */
 
-  for (var i = 0; i < length; ++i) {
-    cssObject[properties[i]] = styles[properties[i]];
+  function fromCSS(elements, properties) {
+    if (!elements || !properties || !properties.length) {
+      return {};
+    }
+
+    var element;
+
+    if (elements instanceof Element) {
+      element = elements;
+    } else if (elements.length) {
+      element = elements[0];
+    } else {
+      return {};
+    }
+
+    var cssObject = {};
+    var styles = window.getComputedStyle(element);
+    var length = properties.length;
+
+    for (var i = 0; i < length; ++i) {
+      cssObject[properties[i]] = styles[properties[i]];
+    }
+
+    return cssObject;
   }
 
-  return cssObject;
-}
+  exports.RGB = RGB;
+  exports.RGBA = RGBA;
+  exports.HSL = HSL;
+  exports.HSLA = HSLA;
+  exports.COLOR_MODELS = COLOR_MODELS;
+  exports.FUNCTION = FUNCTION;
+  exports.PROPERTY = PROPERTY;
+  exports.ARRAY = ARRAY;
+  exports.OBJECT = OBJECT;
+  exports.STRING = STRING;
+  exports.NUMBER = NUMBER;
+  exports.UNDEFINED = UNDEFINED;
+  exports.getCrossBrowserProperty = getCrossBrowserProperty;
+  exports.TRANSFORM = TRANSFORM;
+  exports.FILTER = FILTER;
+  exports.ANIMATION = ANIMATION;
+  exports.KEYFRAMES = KEYFRAMES;
+  exports.cutHex = cutHex;
+  exports.hexToRGBA = hexToRGBA;
+  exports.toFullHex = toFullHex;
+  exports.hslToRGBA = hslToRGBA;
+  exports.stringToRGBA = stringToRGBA;
+  exports.isUndefined = isUndefined;
+  exports.isObject = isObject;
+  exports.isArray = isArray;
+  exports.isString = isString;
+  exports.splitSpace = splitSpace;
+  exports.splitComma = splitComma;
+  exports.splitBracket = splitBracket;
+  exports.splitUnit = splitUnit;
+  exports.camelize = camelize;
+  exports.decamelize = decamelize;
+  exports.now = now;
+  exports.requestAnimationFrame = requestAnimationFrame;
+  exports.hasClass = hasClass;
+  exports.addClass = addClass;
+  exports.removeClass = removeClass;
+  exports.fromCSS = fromCSS;
 
-exports.COLOR_MODELS = COLOR_MODELS;
-exports.cutHex = cutHex;
-exports.hexToRGBA = hexToRGBA;
-exports.hex3to6 = hex3to6;
-exports.hslToRGBA = hslToRGBA;
-exports.stringToRGBA = stringToRGBA;
-exports.RGB = RGB;
-exports.RGBA = RGBA;
-exports.HSL = HSL;
-exports.HSLA = HSLA;
-exports.TRANSFORM = TRANSFORM;
-exports.FILTER = FILTER;
-exports.ANIMATION = ANIMATION;
-exports.KEYFRAMES = KEYFRAMES;
-exports.isUndefined = isUndefined;
-exports.isObject = isObject;
-exports.isArray = isArray;
-exports.isString = isString;
-exports.splitSpace = splitSpace;
-exports.splitComma = splitComma;
-exports.splitBracket = splitBracket;
-exports.splitUnit = splitUnit;
-exports.camelize = camelize;
-exports.decamelize = decamelize;
-exports.now = now;
-exports.requestAnimationFrame = requestAnimationFrame;
-exports.hasClass = hasClass;
-exports.addClass = addClass;
-exports.removeClass = removeClass;
-exports.fromCSS = fromCSS;
+})));
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "@daybrush/utils",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "utils for daybrush",
@@ -19,3 +19,13 @@ "main": "dist/utils.js",
     "splitComma",
-    "splitBracket"
+    "splitBracket",
+    "camelize",
+    "decamelize",
+    "now",
+    "requestAnimationFrame",
+    "transform",
+    "filter",
+    "animation",
+    "crossbrowser",
+    "rgb",
+    "hsl"
   ],
@@ -25,3 +35,10 @@ "scripts": {
     "declaration": "rm -rf declaration && tsc -p tsconfig.declaration.json",
-    "build:rollup": "rollup -c"
+    "build:rollup": "rollup -c",
+    "doc": "rm -rf ./doc && jsdoc -c jsdoc.json",
+    "deploy": "gh-pages -d ./demo --dest=./ --add",
+    "release": "npm run build && npm run release:current && npm run release:latest && npm run release:doc  && npm run deploy",
+    "release:mkdir": "mkdir -p ./demo/release",
+    "release:current": "npm run release:mkdir && rm -rf ./demo/release/$npm_package_version && cp -a ./dist/. ./demo/release/$npm_package_version",
+    "release:latest": "npm run release:mkdir && rm -rf ./demo/release/latest && cp -a ./dist/. ./demo/release/latest",
+    "release:doc": "npm run doc && cp -a ./doc/. ./demo/release/latest/doc && cp -a ./doc/. ./demo/release/$npm_package_version/doc"
   },
@@ -39,11 +56,16 @@ "repository": {
   "devDependencies": {
+    "@daybrush/jsdoc": "^0.2.1",
+    "daybrush-jsdoc-template": "^1.3.2",
+    "gh-pages": "^2.0.1",
+    "rollup": "^0.66.6",
+    "rollup-plugin-es3": "^1.1.0",
     "rollup-plugin-prototype-minify": "^1.0.4",
     "rollup-plugin-replace": "^2.1.0",
-    "string-replace": "^0.2.0",
-    "rollup": "^0.66.6",
     "rollup-plugin-typescript": "^1.0.0",
     "rollup-plugin-uglify": "^6.0.0",
+    "string-replace": "^0.2.0",
     "tslint": "^5.11.0",
     "typescript": "^3.1.3"
-  }
+  },
+  "dependencies": {}
 }

README.md

 # @daybrush/utils  [![npm version](https://badge.fury.io/js/%40daybrush%2Futils.svg)](https://badge.fury.io/js/%40daybrush%2Futils)
 
+utils for Daybush
 
-utils for daybrush
+[**API Documentation**](http://daybrush.com/utils/release/latest/doc/index.html)
 
-### consts
-* RGB
-* RGBA
-* HSL
-* HSLA
+```
+$ npm i @daybrush/utils
+```
+
+```js
+import {TRANSFORM, requestAnimationFrame, splitComma} from "@daybrush/utils";
+```
+
+### [Consts](http://daybrush.com/utils/release/latest/doc/Consts.html)
+* OBJECT
+* PROPERTY
+* STRING
+* UNDEFINED
+* FUNCTION
+* ARRAY
+
+### [Cross Browser](http://daybrush.com/utils/release/latest/doc/CrossBrowser.html)
 * TRANSFORM
@@ -15,10 +28,29 @@ * FILTER
 * KEYFRAMES
+* getCrossBrowserProperty
+* now
+* requestAnimationFrame
 
-### functions
+### [Color](http://daybrush.com/utils/release/latest/doc/Color.html)
+* RGB
+* RGBA
+* HSL
+* HSLA
+* COLOR_MODELS
+* cutHex
+* hexToRGBA
+* hslToRGBA
+* stringToRGBA
+* toFullHex
+
+### [DOM](http://daybrush.com/utils/release/latest/doc/DOM.html)
+* hasClass
+* removeClass
+* addClass
+* fromCSS
+
+### [Utils](http://daybrush.com/utils/release/latest/doc/Utils.html)
 * splitUnit
 * splitComma
 * splitSpace
-* hexToRGBA
-* hex3to6
-* hslToRGBA
+* splitBracket
 * isUndefined
@@ -28,8 +60,4 @@ * isObject
 * isString
-* camelize,
-* decamelize,
-* hasClass
-* removeClass,
-* addClass,
-* fromCSS,
-* requestAnimationFrame
+* camelize
+* decamelize
+

rollup.config.js

 import typescript from 'rollup-plugin-typescript';
 import PrototypeMinify from "rollup-plugin-prototype-minify";
+import es3 from "rollup-plugin-es3";
 
+
 const merge = require("./config/merge");
@@ -15,5 +17,6 @@ const banner = require("./config/banner");
   plugins: [
-    plugin, PrototypeMinify({sourcemap: true})
+    plugin, PrototypeMinify({sourcemap: true}),
   ],
   output: {
+    banner,
     format: "es",
@@ -33,6 +36,9 @@ freeze: false,
     },
-  }, {
+  },
+  {
     input: 'src/index.ts',
+    plugins: [es3({sourcemap: true})],
     output: {
-      format: "cjs",
+      format: "umd",
+      name: "utils",
       file: `./dist/utils.js`,
@@ -39,0 +45,0 @@ },

src/color.ts

@@ -8,3 +8,2 @@ import { RGB, RGBA, HSL, HSLA } from "./consts";
 */
-export const COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
 
@@ -14,10 +13,11 @@ /**
 * @memberof Color
-* @param {String} hex - hex color
-* @return {String} hex color
+* @param {string} hex - hex color
+* @return {string} hex color
 * @example
-console.log(cutHex("#000000"))
-// "000000"
+import {cutHex} from "@daybrush/utils";
+
+console.log(cutHex("#000000")) // "000000"
 */
 export function cutHex(hex: string) {
-  return (hex.charAt(0) === "#") ? hex.substring(1) : hex;
+  return hex.replace("#", "");
 }
@@ -30,6 +30,8 @@ /**
 * @example
-console.log(hexToRGB("#000000"));
-// [0, 0, 0]
-console.log(hexToRGB("#201045"));
-// [32, 16, 69]
+import {hexToRGBA} from "@daybrush/utils";
+
+console.log(hexToRGBA("#00000005"));
+// [0, 0, 0, 1]
+console.log(hexToRGBA("#201045"));
+// [32, 16, 69, 1]
 */
@@ -50,15 +52,18 @@ export function hexToRGBA(hex: string) {
 /**
-* convert 3-digit hex color to 6-digit hex color.
+* convert 3(or 4)-digit hex color to 6(or 8)-digit hex color.
 * @memberof Color
-* @param {String} hex - 3-digit hex color
-* @return {String} 6-digit hex color
+* @param {String} hex - 3(or 4)-digit hex color
+* @return {String} 6(or 8)-digit hex color
 * @example
-console.log(hex3to6("#123"));
-// "#112233"
+import {toFullHex} from "@daybrush/utils";
+
+console.log(toFullHex("#123")); // "#112233"
+console.log(toFullHex("#123a")); // "#112233aa"
 */
-export function hex3to6(h: string) {
+export function toFullHex(h: string) {
   const r = h.charAt(1);
   const g = h.charAt(2);
   const b = h.charAt(3);
-  const arr = ["#", r, r, g, g, b, b];
+  const a = h.charAt(4);
+  const arr = ["#", r, r, g, g, b, b, a, a];
 
@@ -68,9 +73,11 @@ return arr.join("");
 /**
-* convert hsl color to rgb color.
+* convert hsl color to rgba color.
 * @memberof Color
 * @param {Array} hsl(a) - hsl color(hue: 0 ~ 360, saturation: 0 ~ 1, lightness: 0 ~ 1, alpha: 0 ~ 1)
-* @return {Array} rgb color
+* @return {Array} rgba color
 * @example
-console.log(hslToRGB([150, 0.5, 0.4]));
-// [51, 153, 102]
+import {hslToRGBA} from "@daybrush/utils";
+
+console.log(hslToRGBA([150, 0.5, 0.4]));
+// [51, 153, 102, 1]
 */
@@ -117,9 +124,15 @@ export function hslToRGBA(hsl: number[]) {
 * @memberof Color
-* @param {String} - Hex(rgb, rgba) or RGB(A), or HSL(A)
+* @param {String} - 3-hex(#000), 4-hex(#0000) 6-hex(#000000), 8-hex(#00000000) or RGB(A), or HSL(A)
 * @return {Array} rgba color
+* @example
+import {stringToRGBA} from "@daybrush/utils";
+
+console.log(stringToRGBA("#000000")); // [0, 0, 0, 1]
+console.log(stringToRGBA("rgb(100, 100, 100)")); // [100, 100, 100, 1]
+console.log(stringToRGBA("hsl(150, 0.5, 0.4)")); // [51, 153, 102, 1]
 */
 export function stringToRGBA(color: string) {
   if (color.charAt(0) === "#") {
-    if (color.length === 4) {
-      return hexToRGBA(hex3to6(color));
+    if (color.length === 4 || color.length === 5) {
+      return hexToRGBA(toFullHex(color));
     } else {
@@ -126,0 +139,0 @@ return hexToRGBA(color);

src/consts.ts

@@ -0,1 +1,6 @@
+/**
+* @namespace
+* @name Consts
+*/
+
 export interface ObjectInterface<T> {
@@ -5,5 +10,132 @@ [name: string]: T;
 
+/**
+* get string "rgb"
+* @memberof Color
+* @example
+import {RGB} from "@daybrush/utils";
+
+console.log(RGB); // "rgb"
+*/
+export const RGB = "rgb";
+/**
+* get string "rgba"
+* @memberof Color
+* @example
+import {RGBA} from "@daybrush/utils";
+
+console.log(RGBA); // "rgba"
+*/
+export const RGBA = "rgba";
+/**
+* get string "hsl"
+* @memberof Color
+* @example
+import {HSL} from "@daybrush/utils";
+
+console.log(HSL); // "hsl"
+*/
+export const HSL = "hsl";
+/**
+* get string "hsla"
+* @memberof Color
+* @example
+import {HSLA} from "@daybrush/utils";
+
+console.log(HSLA); // "hsla"
+*/
+export const HSLA = "hsla";
+/**
+* gets an array of color models.
+* @memberof Color
+* @example
+import {COLOR_MODELS} from "@daybrush/utils";
+
+console.log(COLOR_MODELS); // ["rgb", "rgba", "hsl", "hsla"];
+*/
+export const COLOR_MODELS = [RGB, RGBA, HSL, HSLA];
+
+/**
+* get string "function"
+* @memberof Consts
+* @example
+import {FUNCTION} from "@daybrush/utils";
+
+console.log(FUNCTION); // "function"
+*/
+export const FUNCTION = "function";
+/**
+* get string "property"
+* @memberof Consts
+* @example
+import {PROPERTY} from "@daybrush/utils";
+
+console.log(PROPERTY); // "property"
+*/
+export const PROPERTY = "property";
+/**
+* get string "array"
+* @memberof Consts
+* @example
+import {ARRAY} from "@daybrush/utils";
+
+console.log(ARRAY); // "array"
+*/
+export const ARRAY = "array";
+/**
+* get string "object"
+* @memberof Consts
+* @example
+import {OBJECT} from "@daybrush/utils";
+
+console.log(OBJECT); // "object"
+*/
+export const OBJECT = "object";
+/**
+* get string "string"
+* @memberof Consts
+* @example
+import {STRING} from "@daybrush/utils";
+
+console.log(STRING); // "string"
+*/
+export const STRING = "string";
+/**
+* get string "number"
+* @memberof Consts
+* @example
+import {NUMBER} from "@daybrush/utils";
+
+console.log(NUMBER); // "number"
+*/
+export const NUMBER = "number";
+/**
+* get string "undefined"
+* @memberof Consts
+* @example
+import {UNDEFINED} from "@daybrush/utils";
+
+console.log(UNDEFINED); // "undefined"
+*/
+export const UNDEFINED = "undefined";
+
 const prefixes: string[] = ["webkit", "ms", "moz", "o"];
-const checkProperties =  /*#__PURE__*/(property: string) => {
-  if (typeof document === "undefined") {
+
+/**
+ * @namespace CrossBrowser
+ */
+
+/**
+* Get a CSS property with a vendor prefix that supports cross browser.
+* @function
+* @param {string} property - A CSS property
+* @return {string} CSS property with cross-browser vendor prefix
+* @memberof CrossBrowser
+* @example
+import {getCrossBrowserProperty} from "@daybrush/utils";
+
+console.log(getCrossBrowserProperty("transform")); // "transform", "-ms-transform", "-webkit-transform"
+console.log(getCrossBrowserProperty("filter")); // "filter", "-webkit-filter"
+*/
+export const getCrossBrowserProperty =  /*#__PURE__*/(property: string) => {
+  if (typeof document === UNDEFINED) {
     return "";
@@ -14,3 +146,3 @@ }
 
-  if (typeof styles[property] !== "undefined") {
+  if (typeof styles[property] !== UNDEFINED) {
     return property;
@@ -21,3 +153,3 @@ }
 
-    if (typeof styles[name] !== "undefined") {
+    if (typeof styles[name] !== UNDEFINED) {
       return name;
@@ -29,9 +161,37 @@ }
 
-export const RGB = "rgb";
-export const RGBA = "rgba";
-export const HSL = "hsl";
-export const HSLA = "hsla";
-export const TRANSFORM = /*#__PURE__*/checkProperties("transform");
-export const FILTER = /*#__PURE__*/checkProperties("filter");
-export const ANIMATION = /*#__PURE__*/checkProperties("animation");
+/**
+* get string "transfrom" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {TRANSFORM} from "@daybrush/utils";
+
+console.log(TRANSFORM); // "transform", "-ms-transform", "-webkit-transform"
+*/
+export const TRANSFORM = /*#__PURE__*/getCrossBrowserProperty("transform");
+/**
+* get string "filter" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {FILTER} from "@daybrush/utils";
+
+console.log(FILTER); // "filter", "-ms-filter", "-webkit-filter"
+*/
+export const FILTER = /*#__PURE__*/getCrossBrowserProperty("filter");
+/**
+* get string "animation" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {ANIMATION} from "@daybrush/utils";
+
+console.log(ANIMATION); // "animation", "-ms-animation", "-webkit-animation"
+*/
+export const ANIMATION = /*#__PURE__*/getCrossBrowserProperty("animation");
+/**
+* get string "keyframes" with the vendor prefix.
+* @memberof CrossBrowser
+* @example
+import {KEYFRAMES} from "@daybrush/utils";
+
+console.log(KEYFRAMES); // "keyframes", "-ms-keyframes", "-webkit-keyframes"
+*/
 export const KEYFRAMES = /*#__PURE__*/ANIMATION.replace("animation", "keyframes");

src/css.ts

 import { ObjectInterface } from "./consts";
 
+/**
+ * @namespace DOM
+ */
+
+/**
+* Checks if the specified class value exists in the element's class attribute.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to search
+* @return {boolean} return false if the class is not found.
+* @example
+import {hasClass} from "@daybrush/utils";
+
+console.log(hasClass(element, "start")); // true or false
+*/
 export function hasClass(element: HTMLElement, className: string) {
@@ -10,2 +25,12 @@ if (element.classList) {
 
+/**
+* Add the specified class value. If these classe already exist in the element's class attribute they are ignored.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to add
+* @example
+import {addClass} from "@daybrush/utils";
+
+addClass(element, "start");
+*/
 export function addClass(element: HTMLElement, className: string) {
@@ -19,2 +44,12 @@ if (element.classList) {
 
+/**
+* Removes the specified class value.
+* @memberof DOM
+* @param {HTMLElement} element - target
+* @param {string} className - the class name to remove
+* @example
+import {removeClass} from "@daybrush/utils";
+
+removeClass(element, "start");
+*/
 export function removeClass(element: HTMLElement, className: string) {
@@ -30,2 +65,13 @@ if (element.classList) {
 
+/**
+* Gets the CSS properties from the element.
+* @memberof DOM
+* @param {HTMLElement | HTMLElement[]} elements - elements
+* @param {string[]} properites - the CSS properties
+* @return {object} returns CSS properties and values.
+* @example
+import {fromCSS} from "@daybrush/utils";
+
+console.log(fromCSS(element, ["left", "opacity", "top"])); // {"left": "10px", "opacity": 1, "top": "10px"}
+*/
 export function fromCSS(elements: HTMLElement | HTMLElement[] | NodeListOf<HTMLElement>, properties: string[]) {
@@ -32,0 +78,0 @@ if (!elements || !properties || !properties.length) {

src/index.ts

@@ -0,4 +1,5 @@
+
+export * from "./consts";
 export * from "./color";
-export * from "./consts";
 export * from "./utils";
 export * from "./css";

src/utils.ts

@@ -1,22 +0,79 @@
-import { ObjectInterface } from "./consts";
+import { ObjectInterface, UNDEFINED, STRING, OBJECT } from "./consts";
+/**
+* @namespace
+* @name Utils
+*/
 
+/**
+* Check the type that the value is undefined.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isUndefined} from "@daybrush/utils";
+
+console.log(isUndefined(undefined)); // true
+console.log(isUndefined("")); // false
+console.log(isUndefined(1)); // false
+console.log(isUndefined(null)); // false
+*/
 export function isUndefined(value: any): value is undefined {
-  return (typeof value === "undefined");
+  return (typeof value === UNDEFINED);
 }
+/**
+* Check the type that the value is object.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isObject} from "@daybrush/utils";
+
+console.log(isObject({})); // true
+console.log(isObject(undefined)); // false
+console.log(isObject("")); // false
+console.log(isObject(null)); // false
+*/
 export function isObject(value: any): value is ObjectInterface<any> {
-  return value && (typeof value === "object");
+  return value && (typeof value === OBJECT);
 }
+/**
+* Check the type that the value is isArray.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isArray} from "@daybrush/utils";
+
+console.log(isArray([])); // true
+console.log(isArray({})); // false
+console.log(isArray(undefined)); // false
+console.log(isArray(null)); // false
+*/
 export function isArray(value: any): value is any[] {
   return Array.isArray(value);
 }
+/**
+* Check the type that the value is string.
+* @memberof Utils
+* @param {string} value - Value to check the type
+* @return {boolean} true if the type is correct, false otherwise
+* @example
+import {isString} from "@daybrush/utils";
+
+console.log(isString("1234")); // true
+console.log(isString(undefined)); // false
+console.log(isString(1)); // false
+console.log(isString(null)); // false
+*/
 export function isString(value: any): value is string {
-  return typeof value === "string";
+  return typeof value === STRING;
 }
 /**
 * divide text by space.
-* @memberof Property
-* @function splitSpace
-* @param {String} text - text to divide
+* @memberof Utils
+* @param {string} text - text to divide
 * @return {Array} divided texts
 * @example
+import {spliceSpace} from "@daybrush/utils";
+
 console.log(splitSpace("a b c d e f g"));
@@ -35,7 +92,8 @@ // ["a", "b", "c", "d", "e", "f", "g"]
 * divide text by comma.
-* @memberof Property
-* @function splitComma
-* @param {String} text - text to divide
+* @memberof Utils
+* @param {string} text - text to divide
 * @return {Array} divided texts
 * @example
+import {splitComma} from "@daybrush/utils";
+
 console.log(splitComma("a,b,c,d,e,f,g"));
@@ -53,3 +111,15 @@ // ["a", "b", "c", "d", "e", "f", "g"]
 }
+/**
+* divide text by bracket "(", ")".
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {object} divided texts
+* @example
+import {splitBracket} from "@daybrush/utils";
 
+console.log(splitBracket("a(1, 2)"));
+// {prefix: "a", value: "1, 2", suffix: ""}
+console.log(splitBracket("a(1, 2)b"));
+// {prefix: "a", value: "1, 2", suffix: "b"}
+*/
 export function splitBracket(text: string) {
@@ -64,2 +134,17 @@ const matches = (/([^(]*)\(([\s\S]*)\)([\s\S]*)/g).exec(text);
 }
+/**
+* divide text by number and unit.
+* @memberof Utils
+* @param {string} text - text to divide
+* @return {object} divided texts
+* @example
+import {splitUnit} from "@daybrush/utils";
+
+console.log(splitUnit("10px"));
+// {prefix: "", value: 10, unit: "px"}
+console.log(splitUnit("-10px"));
+// {prefix: "", value: -10, unit: "px"}
+console.log(splitUnit("a10%"));
+// {prefix: "a", value: 10, unit: "%"}
+*/
 export function splitUnit(text: string) {
@@ -77,14 +162,61 @@ const matches = /^([^\d|e|\-|\+]*)((?:\d|\.|-|e-|e\+)+)(\S*)$/g.exec(text);
 }
+
+/**
+* transform strings to camel-case
+* @memberof Utils
+* @param {String} text - string
+* @return {String} camel-case string
+* @example
+import {camelize} from "@daybrush/utils";
+
+console.log(camelize("transform-origin")); // transformOrigin
+console.log(camelize("abcd_efg")); // abcdEfg
+console.log(camelize("abcd efg")); // abcdEfg
+*/
 export function camelize(str: string) {
   return str.replace(/[\s-_]([a-z])/g, (all, letter) => letter.toUpperCase());
 }
-export function decamelize(str: string) {
-  return str.replace(/([a-z])([A-Z])/g, (all, letter, letter2) => `${letter}-${letter2.toLowerCase()}`);
+/**
+* transform a camelized string into a lowercased string.
+* @memberof Utils
+* @param {string} text - a camel-cased string
+* @param {string} [separator="-"] - a separator
+* @return {string}  a lowercased string
+* @example
+import {decamelize} from "@daybrush/utils";
+
+console.log(decamelize("transformOrigin")); // transform-origin
+console.log(decamelize("abcdEfg", "_")); // abcd_efg
+*/
+export function decamelize(str: string, separator: string = "-") {
+  return str.replace(/([a-z])([A-Z])/g, (all, letter, letter2) => `${letter}${separator}${letter2.toLowerCase()}`);
 }
+/**
+* Date.now() method
+* @memberof CrossBrowser
+* @return {number} milliseconds
+* @example
+import {now} from "@daybrush/utils";
+
+console.log(now()); // 12121324241(milliseconds)
+*/
 export function now() {
   return Date.now ? Date.now() : new Date().getTime();
 }
+/**
+* window.requestAnimationFrame() method with cross browser.
+* @function
+* @memberof CrossBrowser
+* @param {FrameRequestCallback} callback - The function to call when it's time to update your animation for the next repaint.
+* @return {number} id
+* @example
+import {requestAnimationFrame} from "@daybrush/utils";
+
+requestAnimationFrame((timestamp) => {
+  console.log(timestamp);
+});
+*/
 export const requestAnimationFrame = /*#__PURE__*/(() => {
   const firstTime = now();
-  const raf = typeof window !== "undefined" &&
+  const raf = typeof window !== UNDEFINED &&
     (window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
@@ -91,0 +223,0 @@ (window as any).mozRequestAnimationFrame);

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

123250

increased by76.8%

Number of package files

23

increased by4.55%

Lines of code

2146

increased by85.16%

Number of lines in readme file

62

increased by87.88%

Worsened metrics

Dev dependency count

12

increased by50%

No dependency changes