kempo-ui 0.0.2 → 0.0.4

package/src/kempo-hljs.css

@@ -0,0 +1,146 @@
+:root,
+[theme="light"] {
+  --c_text: #000000;
+  --c_keyword: #0000ff;
+  --c_builtin: #00b0e8;
+  --c_number: #709756;
+  --c_string: #a31515;
+  --c_regex: #914525;
+  --c_function: inherit;
+  --c_comment: #008000;
+  --c_doc: #808080;
+  --c_tag: #7d7d7d;
+  --c_var: #b436bf;
+  --c_attr: #ff0000;
+  --c_section: #a31515;
+  --c_selector: #0000ff;
+  --c_addition: #a31515;
+  --c_deletion: #2b91af;
+  --c_caret: black;
+}
+[auto-theme="dark"]:not([theme="light"]),
+[theme="dark"] {
+  --c_text: #DCDCDC;
+  --c_keyword: #569CD6;
+  --c_builtin: #4EC9B0;
+  --c_number: #B8D7A3;
+  --c_string: #D69D85;
+  --c_regex: #9A5334;
+  --c_function: inehrit;
+  --c_comment: #57A64A;
+  --c_doc: #608B4E;
+  --c_tag: #9B9B9B;
+  --c_var: #BD63C5;
+  --c_attr: #9CDCFE;
+  --c_section: #ffd700;
+  --c_selector: #569CD6;
+  --c_addition: #144212;
+  --c_deletion: #600;
+  --c_caret: white;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: var(--c_text);
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name,
+.hljs-link {
+  color: var(--c_keyword);
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: var(--c_builtin);
+}
+
+.hljs-number,
+.hljs-class {
+  color: var(--c_number);
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: var(--c_string);
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: var(--c_regex);
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: var(--c_function);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--c_comment);
+  font-style: italic
+}
+
+.hljs-doctag {
+  color: var(--c_doc);
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: var(--c_tag);
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--c_var);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: var(--c_attr);
+}
+
+.hljs-section {
+  color: var(--c_section);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--c_selector);
+}
+
+.hljs-addition {
+  background-color: var(--c_addition);
+  display: inline-block;
+  width: 100%
+}
+
+.hljs-deletion {
+  background-color: var(--c_deletion);
+  display: inline-block;
+  width: 100%
+}

package/src/utils/debounce.js

@@ -0,0 +1,9 @@
+function debounce(func, timeout = 300){
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => { func.apply(this, args); }, timeout);
+  };
+}
+
+export default debounce;

package/src/utils/drag.js

@@ -0,0 +1,80 @@
+/*
+	Drag Utility
+*/
+export default (options = {}) => {
+	let startX, startY, timeoutId;
+
+	const {
+		element,
+		callback = () => {},
+		startCallback = () => {},
+		moveCallback = () => {},
+		endCallback = () => {},
+		preventScroll = false
+	} = options;
+
+	const dragMove = (event) => {
+		if(preventScroll) {
+			event.preventDefault(); // prevent drag scrolling
+		}
+		clearTimeout(timeoutId);
+		const pageX = event.pageX || event.touches[0].pageX;
+		const pageY = event.pageY || event.touches[0].pageY;
+		const diff = {
+			x: pageX - startX,
+			y: pageY - startY,
+			...options
+		};
+		callback(diff);
+		moveCallback(diff);
+	};
+
+	const dragEnd = (event) => {
+		clearTimeout(timeoutId);
+		const pageX = event.pageX || (event.changedTouches && event.changedTouches[0].pageX) || 0;
+		const pageY = event.pageY || (event.changedTouches && event.changedTouches[0].pageY) || 0;
+		const diff = {
+			x: pageX - startX,
+			y: pageY - startY,
+			...options
+		};
+		callback(diff);
+		endCallback(diff);
+		removeListeners();
+	};
+
+	const dragStart = (event) => {
+		if(event.button && event.button !== 0) return; // Only left click for mouse
+		
+		clearTimeout(timeoutId);
+		startX = event.pageX || event.touches[0].pageX;
+		startY = event.pageY || event.touches[0].pageY;
+		const diff = {
+			x: 0,
+			y: 0,
+			...options
+		};
+		startCallback(diff);
+		window.addEventListener('mousemove', dragMove, { passive: !preventScroll });
+		window.addEventListener('mouseup', dragEnd, { passive: !preventScroll });
+		window.addEventListener('touchmove', dragMove, { passive: !preventScroll });
+		window.addEventListener('touchend', dragEnd, { passive: !preventScroll });
+	};
+
+	const removeListeners = () => {
+		window.removeEventListener('mousemove', dragMove);
+		window.removeEventListener('mouseup', dragEnd);
+		window.removeEventListener('touchmove', dragMove);
+		window.removeEventListener('touchend', dragEnd);
+	};
+
+	element.addEventListener('mousedown', dragStart, { passive: !preventScroll });
+	element.addEventListener('touchstart', dragStart, { passive: !preventScroll });
+
+	// Return cleanup function
+	return () => {
+		element.removeEventListener('mousedown', dragStart);
+		element.removeEventListener('touchstart', dragStart);
+		removeListeners();
+	};
+};

package/src/utils/formatTimestamp.js

@@ -0,0 +1,27 @@
+export default (timestamp, format, forceLocale) => {
+  const date = new Date(parseInt(timestamp));
+  if (format) {
+    const pad = (num, size) => ('000' + num).slice(size * -1);
+    const tokens = {
+      YYYY: date.getFullYear(),
+      YY: String(date.getFullYear()).slice(-2),
+      MM: pad(date.getMonth() + 1, 2),
+      M: date.getMonth() + 1,
+      DD: pad(date.getDate(), 2),
+      D: date.getDate(),
+      hh: pad(date.getHours(), 2),
+      h: date.getHours(),
+      mm: pad(date.getMinutes(), 2),
+      m: date.getMinutes(),
+      ss: pad(date.getSeconds(), 2),
+      s: date.getSeconds(),
+      iiii: pad(date.getMilliseconds(), 3),
+      iii: pad(date.getMilliseconds(), 3),
+      ii: pad(date.getMilliseconds(), 2),
+      i: date.getMilliseconds()
+    };
+    return format.replace(/YYYY|YY|MM|M|DD|D|hh|h|mm|m|ss|s|iiii|iii|ii|i/g, (matched) => tokens[matched]);
+  } else {
+    return date.toLocaleString(forceLocale || navigator.language);
+  }
+}

package/src/utils/propConverters.js

@@ -0,0 +1,11 @@
+// Boolean converter that uses explicit "true"/"false" string values
+export const boolTrueFalse = {
+	fromAttribute: v => v === null ? undefined : v.toLowerCase() === 'true',
+	toAttribute: v => v ? 'true' : 'false'
+};
+
+// Boolean converter that uses attribute presence/absence
+export const boolExists = {
+	fromAttribute: v => v !== null,
+	toAttribute: v => v ? '' : null
+};

package/src/utils/toTitleCase.js

@@ -0,0 +1,9 @@
+const toTitleCase = str =>
+  str
+    .replace(/([A-Z])/g, ' $1')
+    .split(/[\s_-]+/)
+    .filter(word => word.length > 0)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+
+export default toTitleCase;

package/src/utils/watchWindowSize.js

@@ -0,0 +1,16 @@
+import debounce from './debounce.js';
+
+const handlers = new Set();
+window.addEventListener('resize', debounce(() => {
+	const width = window.innerWidth;
+	handlers.forEach((handler) => handler(width));
+}));
+
+export const watchWindowSize = (handler) => {
+	handlers.add(handler);
+	return window.innerWidth;
+};
+
+export const unwatchWindowSize = (handler) => {
+	handlers.delete(handler);
+};