@community-release/nx-ui 0.0.4 → 0.0.7

package/dist/runtime/components/helpers/Countdown.mjs

@@ -0,0 +1,143 @@
+/*
+var c = new Countdown( secondsLeft );
+
+c.onTick = function( time ) {
+	
+};
+
+c.onFinish = function() {
+	
+};
+
+c.start();
+*/
+var Countdown = function( secondsLeft, totalSeconds ){
+		
+	this.timer			= null;
+	this.time			= null;
+	this.progress		= 100;
+	this.secondsLeft	= secondsLeft;
+
+	this.secToTime = function( sec ){
+		var secondsInAMinute = 60;
+		var secondsInAnHour  = 60 * secondsInAMinute;
+		var secondsInADay    = 24 * secondsInAnHour;
+
+		// get days
+		var days = Math.floor(sec / secondsInADay);
+
+		// get hours
+		var hourSeconds = sec % secondsInADay;
+		var hours = Math.floor(hourSeconds / secondsInAnHour);
+
+		// get minutes
+		var minuteSeconds = hourSeconds % secondsInAnHour;
+		var minutes = Math.floor(minuteSeconds / secondsInAMinute);
+
+		// get remaining seconds
+		var remainingSeconds = minuteSeconds % secondsInAMinute;
+		var seconds = Math.floor(remainingSeconds);
+
+
+		if (hours < 10) hours = '0' + hours;
+		if (minutes < 10) minutes = '0' + minutes;
+		if (seconds < 10) seconds = '0' + seconds;
+	
+		return {
+			d: days, h: hours, m: minutes, s: seconds, 
+			full: days +' days, '+ hours +' hours, '+ minutes +' minutes, '+ seconds +' seconds.',
+			progress: this.progress
+		};
+	}
+	
+	this.setTime = function( secondsLeft, totalSeconds ){
+		this.secondsLeft = secondsLeft;
+
+		if ((totalSeconds === undefined) || (totalSeconds === null)) {
+			this.totalSeconds = secondsLeft;
+			this.totalDays = 365;
+			this.totalHours = 24;
+		} else {
+			this.totalSeconds = totalSeconds;
+			this.totalDays = this.secToTime( this.totalSeconds ).d;
+			this.totalHours = this.secToTime( this.totalSeconds ).h;
+		}
+	}
+	this.setTime( secondsLeft, totalSeconds );
+	
+	this._update = function(){
+		if ((this.secondsLeft-1) >= 0) {
+			this.secondsLeft--;
+			
+			this.time = this.secToTime( this.secondsLeft );
+			this.progress = 100 - (this.secondsLeft * 100 / this.totalSeconds);
+
+			if (this.hasOwnProperty( 'onTick' )) {
+				this.onTick( this.time );
+			}
+			
+		} else {
+			this.stop();
+		}
+	}
+	
+	this.start = function(){
+		if (this.timer == null) {
+			this.timer = setInterval(this._update.bind(this), 1000);
+			this._update();
+		}
+	}
+	
+	this.pause = function(){
+		clearInterval( this.timer );
+		this.timer = null;
+	}
+	
+	this.stop = function(){
+		clearInterval( this.timer );
+		this.timer = null;
+		this.secondsLeft = 0;
+		this.time = this.secToTime( this.secondsLeft );
+		if (this.hasOwnProperty( 'onTick' )) {
+			this.onTick( this.time );
+		}
+		if (this.hasOwnProperty( 'onFinish' )) { 
+			this.onFinish(); 
+		}
+	}
+	
+	this.getSeconds = function(){
+		return this.secondsLeft;
+	}
+
+	this.destroy = function() {
+		this.stop();
+	}
+};
+
+function calcSecondsLeft( date ) {
+	var left = 0, total = 0;
+
+	// Seconds left
+	var endDate = new Date(Date.UTC(
+			date.end.year, date.end.month-1, date.end.day, date.end.hour, date.end.minute, date.end.second
+		)),
+		now = new Date(),
+		offset = date.timezone * 60 * 60;
+		
+	left = (endDate.getTime()/1000 - now.getTime()/1000) - offset;
+
+	// Total seconds
+	if (date.start != null) {
+		var startDate = new Date(Date.UTC(
+			date.start.year, date.start.month-1, date.start.day, date.start.hour, date.start.minute, date.start.second
+		));
+		total = endDate.getTime()/1000 - startDate.getTime()/1000;
+	} else {
+		total = null;
+	}
+
+	return { total: total, left: left };
+}
+
+export default Countdown;

package/dist/runtime/components/helpers/getEventCoord.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Return event coordinates relative to element
+ * @param {Event} e - event
+ * @param {null|HTMLElement} target - you can use specific target element instead of e.target
+ * @returns {boolean}
+ */
+export default function _default(e: Event, target?: null | HTMLElement): boolean;

package/dist/runtime/components/helpers/getEventCoord.mjs

@@ -0,0 +1,16 @@
+/**
+ * Return event coordinates relative to element
+ * @param {Event} e - event
+ * @param {null|HTMLElement} target - you can use specific target element instead of e.target
+ * @returns {boolean}
+ */
+export default function(e, target = null) {
+	if (target === null) target = e.target;
+
+	const box = target.getBoundingClientRect();
+
+	return {
+		x: e.clientX - box.left,
+		y: e.clientY - box.top
+	};
+}

package/dist/runtime/components/helpers/isImageExist.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Check if image exist
+ * @param {string} url - image url (local or remote)
+ * @returns {boolean}
+ */
+export default function _default(url: string): boolean;

package/dist/runtime/components/helpers/isImageExist.mjs

@@ -0,0 +1,20 @@
+/**
+ * Check if image exist
+ * @param {string} url - image url (local or remote)
+ * @returns {boolean}
+ */
+export default function(url) {
+	return new Promise((resolve) => {
+		const image = new Image;
+
+		image.onload = function() {
+			resolve(this.width > 1 && this.height > 1);
+		};
+
+		image.onerror = () => {
+			resolve(false);
+		}
+
+		image.src = url;
+	});
+}

package/dist/runtime/components/helpers/isMobileDevice.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the device is mobile (phone, tablet)
+ * @returns {boolean}
+ */
+export default function _default(): boolean;

package/dist/runtime/components/helpers/isMobileDevice.mjs

@@ -0,0 +1,12 @@
+let result = null;
+
+/**
+ * Check if the device is mobile (phone, tablet)
+ * @returns {boolean}
+ */
+export default function() {
+	if (result === null)
+		result = /Mobi|Android/i.test(navigator.userAgent);
+
+	return result;
+};

package/dist/runtime/components/helpers/isWebKit.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Check if the browser is WebKit
+ * @returns {boolean}
+ */
+export default function _default(): boolean;

package/dist/runtime/components/helpers/isWebKit.mjs

@@ -0,0 +1,12 @@
+let result = null;
+
+/**
+ * Check if the browser is WebKit
+ * @returns {boolean}
+ */
+export default function() {
+	if (result === null)
+		result = /webkit/.test( navigator.userAgent.toLowerCase() );
+
+	return result;
+}

package/dist/runtime/components/helpers/uniq.d.ts

@@ -0,0 +1,2 @@
+declare function _default(): string;
+export default _default;

package/dist/runtime/components/helpers/uniq.mjs

@@ -0,0 +1 @@
+export default () => 'i' + Math.random().toString(36).slice(2, 9);

package/dist/runtime/components/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><path d="M1002.57 167.77c28.573 28.572 28.573 74.746 0 103.32L417.395 856.264c-28.573 28.573-74.747 28.573-103.32 0L21.423 563.677c-28.564-28.573-28.564-74.747 0-103.32 28.568-28.573 74.88-28.573 103.453 0l238.801 240.7L899.25 167.768c28.573-28.618 74.747-28.618 103.32 0z"/></svg>

package/dist/runtime/components/icons/check.white.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024"><path fill="#fff" d="M1002.57 167.77c28.573 28.572 28.573 74.746 0 103.32L417.395 856.264c-28.573 28.573-74.747 28.573-103.32 0L21.423 563.677c-28.564-28.573-28.564-74.747 0-103.32 28.568-28.573 74.88-28.573 103.453 0l238.801 240.7L899.25 167.768c28.573-28.618 74.747-28.618 103.32 0z"/></svg>

package/dist/runtime/components/impulse-indicator.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="component-ui component-ui-impulse-indicator">
+		<transition-group name="impulse" tag="span">
+			<span 
+				v-for="item in impulseArray" 
+				:key="item.id" 
+				class="impulse"
+				:style="{top: item.top, left: item.left, background: item.background}"
+			></span>
+		</transition-group>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'impulse-indicator',
+	
+	// Data
+	props: {
+		impulse: {
+			type: [Object, Boolean],
+			default: false
+		}
+	},
+	data() {
+		return {
+			impulseArray: []
+		};
+	},
+	watch: {
+		impulse(options) {
+			if (options) {
+				this.$emit('update:impulse', false);
+				this.addImpulse(options);
+			}
+		}
+	},
+	
+	// Methods
+	methods: {
+		addImpulse(options) {
+			let id = Math.random().toString(36).substr(2, 9);
+
+			options = Object.assign({
+				background: '#000'
+			}, options);
+
+			options.id = id;
+
+			if ('event' in options) {
+				let target = ('target' in options) ? options.target : event.target;
+
+				let rect = target.getBoundingClientRect();
+
+				options.left = options.event.clientX - rect.left;
+				options.top = options.event.clientY - rect.top;
+			}
+
+			const sLeft = options.left.toString();
+			const sTop = options.top.toString();
+
+			if (sLeft.indexOf('px') == -1 && sLeft.indexOf('%') == -1) {
+				options.left = options.left + 'px';
+			}
+
+			if (sTop.indexOf('px') == -1 && sTop.indexOf('%') == -1) {
+				options.top = options.top + 'px';
+			}
+
+			this.impulseArray.push(options);
+
+			setTimeout(() => {
+				for (let i=0, item; i < this.impulseArray.length; i++) {
+					item = this.impulseArray[i];
+
+					if (item.id === id) this.impulseArray.splice(i--, 1);
+				}
+			}, 2000);
+		}
+	},
+	
+	// Hooks
+	mounted() {
+		
+	},
+}
+</script>
+
+<style lang="less">
+.component-ui-impulse-indicator {
+	@keyframes impulse {
+		0% {
+			opacity: 0;
+			transform: translate3d(-50%, -50%, 0) scale(0.01);
+		}
+		10% {
+			opacity: 0.06;
+		}
+		30% {
+			opacity: 0.12;
+		}
+		90% {
+			opacity: 0.05;
+			transform: translate3d(-50%, -50%, 0) scale(1);
+		}
+		100% {
+			opacity: 0;
+		}
+	}
+
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+
+	.impulse {
+		transform-origin: 50% 50%;
+		transform: translate3d(-50%, -50%, 0);
+		opacity: 1;
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+
+		padding-bottom: 200%;
+		width: 200%;
+
+		border-radius: 50%;
+		background: #000811;
+
+		pointer-events: none;
+
+		animation: 0.8s ease-in-out 1 both impulse;
+	}
+}
+</style>

package/dist/runtime/components/impulse-indicator.vue.d.ts

@@ -0,0 +1,21 @@
+declare namespace _default {
+    let name: string;
+    namespace props {
+        namespace impulse {
+            export let type: (ObjectConstructor | BooleanConstructor)[];
+            let _default: boolean;
+            export { _default as default };
+        }
+    }
+    function data(): {
+        impulseArray: never[];
+    };
+    namespace watch {
+        function impulse(options: any): void;
+    }
+    namespace methods {
+        function addImpulse(options: any): void;
+    }
+    function mounted(): void;
+}
+export default _default;

package/dist/runtime/components/input/index.vue

@@ -0,0 +1,241 @@
+<template>
+	<section class="component-ui-input" :class="classes" @click="refInput.focus()">
+		<ui-impulse-indicator :impulse="impulse" @update:impulse="$emit('update:impulse', false)" />
+
+		<div class="com-content">
+			<div class="slot-prepend" v-if="hasSlot('prepend')"><slot name="prepend"></slot></div>
+			<div class="slot-default">
+				<input
+					ref="refInput"
+					:value="modelValue"
+					:type="type" 
+					:placeholder="placeholder" 
+					:disabled="disabled" 
+
+					@change="updateValue($event.target.value)"
+					@input="updateValue($event.target.value)"
+					@blur="handleBlur($event.target.value)"
+					@keyup.enter="updateValue($event.target.value, true, true)"
+
+					@focus="haveFocus = true"
+
+					formnovalidate
+					spellcheck="false"
+				/>
+			</div>
+			<div class="slot-append" v-if="hasSlot('append')"><slot name="append"></slot></div>
+		</div>
+	</section>
+</template>
+
+<script setup>
+// Import
+	import { ref, computed, useSlots } from 'vue';
+	import UiImpulseIndicator from '../impulse-indicator.vue';
+	import comProps from '#build/ui.input.mjs';
+
+// Misc
+	const emit = defineEmits(['input', 'enter', 'blur', 'update:modelValue']);
+	const slots = useSlots();
+
+// Data
+	const props = defineProps({
+		modelValue: {
+			required: true
+		},
+		placeholder: {
+			default: comProps.placeholder,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		type: {
+			type: String,
+			default: 'text'
+		},
+		impulse: {
+			default: false
+		},
+		shape: {
+			type: String,
+			default: comProps.shape,
+		},
+		size: {
+			type: String,
+			default: comProps.size,
+		},
+	});
+
+	const refInput = ref(null);
+	const haveFocus = ref(false);
+
+	const classes = computed(() => {
+		const ar = [];
+
+		if (props.modelValue !== '') ar.push('tag-not-empty');
+		if (haveFocus.value) ar.push('tag-focus');
+		if (props.disabled) ar.push('tag-disabled');
+		if (props.size) ar.push(`tag-size-${props.size}`);
+		if (props.shape) ar.push(`tag-shape-${props.shape}`);
+
+		return ar;
+	});
+
+// Methods
+	function updateValue(value, doTrim = false, submit = false) {
+		const validValue = doTrim ? value.trim() : value;
+
+		if (value !== validValue)
+			refInput.value.value = validValue;
+
+		emit('update:modelValue', validValue);
+
+		if (submit) emit('enter', validValue);
+	}
+
+	function handleBlur(v) {
+		haveFocus.value = false;
+
+		emit('blur', v);
+		updateValue(v);
+	}
+
+	const hasSlot = (name) => {
+		return !!slots[name];
+	};
+// Hooks
+
+</script>
+
+<style lang="less">
+// Misc
+@com-ani-ease: var(--ui-ani-ease);
+
+// Input height
+@com-input-height-large: var(--ui-input-height-large);
+@com-input-height-big: var(--ui-input-height-big);
+@com-input-height-medium: var(--ui-input-height-medium);
+@com-input-height-default: var(--ui-input-height-default);
+@com-input-height-small: var(--ui-input-height-small);
+@com-input-height-mini: var(--ui-input-height-mini);
+
+// Border radius
+@com-border-radius-default: var(--ui-border-radius-default);
+@com-border-radius-small: var(--ui-border-radius-small);
+@com-border-radius-round: var(--ui-input-height-large);
+
+// Color
+@com-color-border-bolder: var(--ui-color-border-bolder);
+@com-color-bg: var(--ui-color-bg);
+@com-color-header-text: var(--ui-color-header-text);
+@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-primary: var(--color-primary);
+
+// Space
+@com-space-small: var(--ui-space-small);
+@com-space-mini: var(--ui-space-mini;);
+
+// Font
+@com-font-text: var(--ui-font-text);
+
+// Text size
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+@com-text-mini: var(--ui-text-mini);
+
+.component-ui-input {
+	overflow: hidden;
+	position: relative;
+	height: @com-input-height-default;
+	border: 1px solid @com-color-border-bolder;
+	border-radius: @com-border-radius-default;
+	background: @com-color-bg;
+	cursor: text;
+
+	.com-content {
+		display: flex;
+		height: 100%;
+
+		> div {
+			position: relative;
+			height: 100%;
+		}
+
+		.slot-prepend,
+		.slot-append {
+			flex: 0 0 40px;
+			display: grid;
+			place-items: center;
+		}
+	}
+
+	.slot-default {
+		width: 100%;
+	}
+
+	input {
+		box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
+		
+		display: block;
+		padding: 0 @com-space-mini;
+		width: 100%;
+		height: 100%;
+		
+		font-family: @com-font-text;
+		font-size: @com-text-default;
+		color: @com-color-header-text;
+
+		background: transparent;
+		border: none;
+	}
+
+	// Shape
+	&.tag-shape-round {
+		border-radius: @com-border-radius-round;
+	}
+	&.tag-shape-round-square {
+		border-radius: @com-border-radius-small;
+	}
+	&.tag-shape-square {
+		border-radius: 0;
+	}
+
+	// Size
+	&.tag-size-large { height: @com-input-height-large; }
+	&.tag-size-big { height: @com-input-height-big; }
+	&.tag-size-medium { height: @com-input-height-medium; }
+	&.tag-size-small {
+		//padding: 0 @com-space-small;
+		height: @com-input-height-small;
+		font-size: @com-text-small;
+	}
+
+	&.tag-size-mini {
+		//padding: 0 10px;
+		height: @com-input-height-mini;
+
+		font-size: @com-text-mini;
+
+		.loading-indicator {
+			transform: translate3d(-50%, -50%, 0) scale(0.6);
+		}
+	}
+
+	// Focus
+	&.tag-focus {
+		border-color: @com-color-primary;
+		outline: 1px solid @com-color-primary;
+	}
+
+	// Disabled
+	&.tag-disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+
+		input {
+			cursor: not-allowed;
+		}
+	}
+}
+</style>

package/dist/runtime/components/input/props.json

@@ -0,0 +1,5 @@
+{
+	"placeholder": "",
+	"shape": "",
+	"size": ""
+}

package/dist/runtime/components/label.vue

@@ -0,0 +1,33 @@
+<template>
+	<label class="component-ui-label">
+		<span class="component-ui-label--text">{{ text }}</span>
+		<slot></slot>
+	</label>
+</template>
+
+<script setup>
+const props = defineProps({
+	text: {
+		default: ''
+	}
+});
+</script>
+
+<style lang="less">
+@com-space-micro: var(--ui-space-micro);
+@com-font-weight-medium: var(--ui-font-weight-medium);
+@com-text-medium: var(--ui-text-medium);
+@com-color-header-text: var(--ui-color-header-text);
+
+.component-ui-label {
+	display: block;
+
+	.component-ui-label--text {
+		display: block;
+		padding-bottom: @com-space-micro;
+		font-weight: @com-font-weight-medium;
+		font-size: @com-text-medium;
+		color: @com-color-header-text;
+	}
+}
+</style>