@community-release/nx-ui 0.0.4 → 0.0.7

package/dist/runtime/components/select.vue

@@ -0,0 +1,303 @@
+<template>
+	<div class="component-ui-select" :class="classes" :style="styles">
+		<div class="wrapper">
+			<div class="value" @click="toggle">
+				<label v-if="label" v-html="label"></label>
+				<strong v-if="valueName" v-html="valueName"></strong>
+			</div>
+
+			<select 
+				ref="select"
+				@change="onChange"
+				@focus="handleFocus"
+				@blur="handleBlur"
+				:disabled="disabled"
+				autocomplete="off"
+			>
+				<option v-for="option in options" :value="option.value" :key="option.value" :selected="option.value == modelValue">
+					{{ option.name }}
+				</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup>
+// Imports
+import { ref, computed, watch, onMounted } from 'vue';
+
+// Setup
+const props = defineProps({
+	theme: {
+		type: String,
+		default: 'default',
+	},
+	label: {
+		type: String,
+		default: ''
+	},
+	modelValue: {
+		default: '',
+		required: true,
+	},
+	// { name: '', value: '' }
+	options: {
+		type: Array,
+		default: () => []
+	},
+	required: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	},
+	error: {
+		type: Boolean,
+		default: false
+	},
+	width: {
+		type: [String, Number],
+		default: 'none'
+	},
+	block: {
+		type: Boolean,
+		default: false
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+// Data
+const isOpen = ref(false);
+const increaseZIndex = ref(false);
+const focus = ref(false);
+const select = ref(null);
+
+const valueName = computed(() => {
+	let result = '...';
+
+	const value = props.modelValue;
+	const option = props.options.find(option => option.value == value);
+
+	if (typeof option !== 'undefined') { result = option.name; }
+
+	return result;
+});
+
+const classes = computed(() => {
+	const ar = [];
+
+	ar.push( 'tag-theme-' + props.theme );
+
+	if (isOpen.value) 				ar.push('tag-open');
+	if (increaseZIndex.value) 		ar.push('tag-increase-zindex');
+	if (props.modelValue !== null) 	ar.push('tag-not-empty');
+	if (props.error) 				ar.push('tag-error');
+	if (focus.value) 				ar.push('tag-focus');
+	if (props.block) 				ar.push('tag-block');
+	if (props.required) 			ar.push('tag-required');
+	if (props.disabled) 			ar.push('tag-disabled');
+
+	return ar;
+});
+
+const styles = computed(() => {
+	const result = {};
+
+	if (props.width !== 'none') {
+		result['max-width'] = props.width;
+		result['width'] = '100%';
+	}
+
+	return result;
+});
+
+watch(isOpen, (v) =>{
+	if (v)
+		increaseZIndex.value = true;
+	else
+		setTimeout(() => {increaseZIndex.value = false}, 280);
+});
+
+watch(() => props.modelValue, async (v) => {
+	await nextTick();
+	select.value.value = v;
+});
+
+watch(() => props.options, async () => {
+	await nextTick();
+	select.value.value = props.modelValue
+});
+
+// Methods
+function onChange() {
+	isOpen.value = false;
+
+	emit('update:modelValue', select.value.value);
+};
+
+function toggle() {
+	isOpen.value = !isOpen.value;
+};
+
+function handleFocus() { focus.value = true; };
+function handleBlur() { focus.value = false; };
+
+// Hooks
+onMounted(() => {
+	// Fix autocomplete
+	if (select.value.value !== props.modelValue) {
+		select.value.value = props.modelValue;
+	}
+});
+</script>
+
+<style lang="less">
+@com-space-micro: var(--ui-space-micro);
+@com-input-height-default: var(--ui-input-height-default);
+
+@com-font-header: var(--ui-font-header);
+
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+
+@com-color-text: var(--ui-color-text);
+@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-header-text: var(--ui-color-header-text);
+@com-color-primary: var(--ui-color-primary);
+@com-color-surface: var(--ui-color-surface);
+@com-color-red: var(--ui-color-red);
+@com-color-border: var(--ui-color-border-bolder);
+
+@com-border-radius-default: var(--ui-border-radius-default);
+@com-bs-1: var(--ui-bs-1);
+
+.component-ui-select {
+	display: inline-block;
+	position: relative;
+	text-align: left;
+	font-size: @com-text-default;
+	line-height: 1.1;
+
+	.wrapper {
+		position: relative;
+
+		select {
+			opacity: 0;
+			padding-right: 45px;
+			padding-left: 10px;
+			height: @com-input-height-default;
+			width: 100%;
+
+			cursor: pointer;
+		}
+	}
+
+	.value {
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		cursor: pointer;
+
+		padding-right: 45px;
+		padding-left: 10px;
+		height: 100%;
+
+		cursor: pointer;
+
+		border: 1px solid @com-color-border;
+		border-radius: @com-border-radius-default;
+
+		label, strong {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+
+			position: absolute;
+			left: 10px;
+			right: 30px;
+		}
+
+		label {
+			top: 3px;
+			margin: 0;
+			padding: 0;
+			font-size: @com-text-small;
+			
+			color: @com-color-gray-text;
+		}
+
+		strong {
+			top: 20px;
+			bottom: 0;
+
+			font-family: @com-font-header;
+			font-weight: 600;
+			color: @com-color-header-text;
+		}
+
+		&:after {
+			content: '';
+
+			transform: translateY(-50%);
+			position: absolute;
+			top: 50%;
+			right: 10px;
+
+			width: 0;
+			height: 0;
+			border-style: solid;
+			border-width: 6px 5px 0 5px;
+			border-color: @com-color-header-text transparent transparent transparent;
+		}
+	}
+
+	&.tag-block {
+		display: block;
+	}
+
+	&.tag-required {
+		.value:before {
+			content: '*';
+
+			position: absolute;
+			top: 2px;
+			right: 2px;
+
+			color: @com-color-red;
+		}
+	}
+
+	&.tag-disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+
+		.wrapper {
+			pointer-events: none;
+		}
+	}
+
+	&.tag-focus {
+		.value {
+			border-color: @com-color-primary;
+		}
+	}
+}
+
+.component-ui-select.tag-theme-default {
+	.value {
+		background: @com-color-surface;
+		border-color: transparent;
+	}
+}
+</style>

package/dist/runtime/components/static-map.vue

@@ -0,0 +1,345 @@
+<template>
+	<a class="component-static-map"
+		:href="'https://maps.google.com/maps?q=' + encodeURI(address)"
+		target="_blank"
+		ref="refMap"
+		rel="noreferrer"
+		aria-label="Map"
+		:class="classes"
+		@mousemove="mousemove"
+		@mouseover="mouseover"
+		@mouseout="mouseout"
+	>
+		<span class="map-wrapper" :style="mapWrapperStyles">
+			<span class="image" :style="{'background-image': 'url('+ mapImagePath +')'}" v-if="mapImagePath"></span>
+			<i class="marker"></i>
+		</span>
+	</a>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted } from 'vue';
+import isMobileDevice from './helpers/isMobileDevice';
+import isWebKit from './helpers/isWebKit';
+import getEventCoord from './helpers/getEventCoord';
+import isImageExist from './helpers/isImageExist';
+
+// Data
+	const props = defineProps({
+		image: {
+			required: true,
+			type: String,
+		},
+		imageNotFound: {
+			required: false,
+			type: String,
+		},
+		address: {
+			required: true,
+			type: String,
+		},
+		enableZoom: {
+			required: false,
+			type: Boolean,
+			default: true
+		},
+		initialZoom: {
+			required: false,
+			type: [Number, String, Boolean],
+			default: false,
+		},	
+	});
+
+	const enableMapMovement = ref(false);
+	const isMobileDeviceCached = ref(false);
+	const isWebKitCached = ref(false);
+	const noMapImage = ref(true);
+	const initialized = ref(false);
+
+	let mouseUpdateTime = 0;
+	let webKitMouseUpdateRate = 50;
+	let mapImagePath = ref('');
+	const refMap = ref(null);
+
+	const mapOffset = reactive({
+		x: 0,
+		y: 0
+	});
+
+	let timeoutMapMovement = null;
+
+	// Computed
+	const classes = computed(() => {
+		return [
+			initialized.value ? 'tag-initialized' : '',
+			props.enableZoom ? 'tag-enable-zoom' : '',
+			noMapImage.value ? 'tag-no-image' : '',
+			props.initialZoom ? ('tag-initial-zoom-' + props.initialZoom) : '',
+		];
+	});
+
+	const mapWrapperStyles = computed(() => {
+		const result = {};
+
+		if (props.enableZoom && enableMapMovement.value && !isMobileDeviceCached.value) {
+			result['-webkit-transform'] = `translate3d(${mapOffset.x}%, ${mapOffset.y}%, 0)`;
+			result['transform'] = `translate3d(${mapOffset.x}%, ${mapOffset.y}%, 0)`;
+		}
+
+		return result;
+	});
+
+// Methods
+	async function loadImage() {
+		let result = props.imageNotFound ? props.imageNotFound : '';
+		let exist = await isImageExist(props.image);
+
+		if (exist) {
+			result = props.image;
+			noMapImage.value = false;
+		}
+
+		mapImagePath.value = result;
+		initialized.value = true;
+	}
+
+	function mousemove(e) {
+		if (!props.enableZoom || isMobileDeviceCached.value) return;
+
+		let coord = getEventCoord(e, refMap.value);
+
+		let elWidth = refMap.value.offsetWidth;
+		let elHeight = refMap.value.offsetHeight;
+
+		let center = {
+			x: elWidth/2,
+			y: elHeight/2,
+		};
+
+		let computedCoord = {
+			x: coord.x - center.x,
+			y: coord.y - center.y,
+		};
+
+		let offset = {
+			x: computedCoord.x * 100 / elWidth,
+			y: computedCoord.y * 100 / elHeight,
+		};
+
+		// WebKit refuse to update styles when they change to rapidly >.<
+		// This hack is made to fix this issue. Styles update bo faster than webKitMouseUpdateRate (ms)
+		if (isWebKitCached.value) {
+			let dateNow = Date.now();
+
+			if (dateNow - mouseUpdateTime > webKitMouseUpdateRate) {
+				mapOffset.x = offset.x * -1 *(0.5);
+				mapOffset.y = offset.y * -1 *(0.5);
+				mouseUpdateTime = dateNow;
+			} else {
+				((x, y) => {
+					setTimeout(() => {
+						mapOffset.x = x * -1 *(0.5);
+						mapOffset.y = y * -1 *(0.5);
+						mouseUpdateTime = Date.now();
+					}, webKitMouseUpdateRate - dateNow - mouseUpdateTime);
+				})(offset.x, offset.y);
+			}
+		} else {
+			mapOffset.x = offset.x * -1 *(0.5);
+			mapOffset.y = offset.y * -1 *(0.5);
+		}
+	}
+
+	function mouseover() {
+		if (!props.enableZoom || isMobileDeviceCached.value) return;
+
+		clearTimeout( timeoutMapMovement );
+		timeoutMapMovement = setTimeout(() => {
+			enableMapMovement.value = true;
+		}, 350);
+	}
+
+	function mouseout() {
+		if (!props.enableZoom || isMobileDeviceCached.value) return;
+
+		clearTimeout( timeoutMapMovement );
+		timeoutMapMovement = setTimeout(() => {
+			enableMapMovement.value = false;
+		}, 5);
+	}
+
+// Hooks
+	onMounted(() => {
+		isMobileDeviceCached.value = isMobileDevice();
+		isWebKitCached.value = isWebKit();
+
+		loadImage();
+	});
+</script>
+
+<style lang="less">
+@com-surface: var(--ui-color-surface);
+
+@keyframes ui-static-map-jump {
+    0% {
+		transform: translate3d(0, -30px, 0);
+		opacity: 0;
+	}
+	40% {
+		opacity: 1;
+	}
+	50% {
+		transform: translate3d(0, 0, 0) scale(1.1, 0.9);
+	}
+	65% {
+		transform: translate3d(0, -5px, 0) scale(0.95, 1.05);
+	}
+	80% {
+		transform: translate3d(0, 0, 0) scale(1.05, 0.95);
+	}
+	100% {
+		transform: translate3d(0, 0, 0) scale(1, 1);
+		opacity: 1;
+	}
+}
+
+.component-static-map {
+	overflow: hidden;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+
+	background-color: @com-surface;
+
+	.map-wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.image {
+		transition: opacity 0.35s ease-in;
+		opacity: 0;
+
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
+	}
+
+	.marker {
+		transition: opacity 0.25s;
+		opacity: 0;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin: -35px 0 0 -35px;
+
+		width: 70px;
+		height: 70px;
+
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: cover;
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAOVBMVEVHcEwAAgQAAAAgv1Egv1EfvVEAAAABBQofvFEgv1EgvlEAAAAfvlAgv1Eamk4fulAfvVAUZFsgv1GrD9dAAAAAEnRSTlMAMxA+lBIeKVDwsAfff5bEZmY1hHYFAAABW0lEQVRo3u2W246DIBRFD3coUB3//2OHsVaMoJnEzdtZjzZx5dy2JWIYBoyac86zGmjwr+XLyw8qIi1H0ohy9HJGoxWmdRSLGV0Hvpa+A2tRyxXA6adLScLdR31p0F55HeoD2L0cbvCzT+bwBCXpvLFa0GMP9S5MAI9+7i3svtSzlDI+l+TekPdleAvhnJUwier1sEgKTo6uBGG5n8kmEW7kdv1sEvFw+uHmToJ1m0SiMri9eB2jg0jUTXaVjZMQCU2XKTzRLnl6keZSYnaJxR39iVx+ixbSrVJK/7OVDoVEYBI3H1+LiZXLvxI6SmkFqFlrw9oNS8KJ7UYsYWgbtgeKQHxQTjl5SkZUr3onOX0VFuk4JO9fvnwVlrD4ZiAON43OH6G1Wc4S3lEbFlaFpCGo2iwbIw3ic/jvYVXUpEwj5n1umKfRqKyIYRiGYRiGYRiGYRiGYRjmn/wC1rQyrS6ERXEAAAAASUVORK5CYII=");
+	}
+
+	// No image
+	&.tag-no-image {
+		.image {
+			background-size: contain;
+		}
+
+		.marker {
+			display: none;
+		}	
+	}
+
+	&.tag-initial-zoom-150 {
+		.image {
+			transform: scale(1.5);
+		}
+	}
+	&.tag-initial-zoom-200 {
+		.image {
+			transform: scale(2);
+		}
+	}
+	&.tag-initial-zoom-250 {
+		.image {
+			transform: scale(2.5);
+		}
+	}
+	&.tag-initial-zoom-300 {
+		.image {
+			transform: scale(3);
+		}
+	}
+
+	// Initialized
+	&.tag-initialized {
+		.image {
+			opacity: 1;
+		}
+
+		.marker {
+			animation-name: ui-static-map-jump;
+			animation-delay: 0.35s;
+			animation-duration: 1.25s;
+			animation-iteration-count: 1;
+			animation-fill-mode: forwards;
+			animation-timing-function: ease-in;
+		}
+	}
+}
+
+@media (hover: hover) {
+	.component-static-map.tag-enable-zoom {
+		.map-wrapper {
+			will-change: transform;
+			transition: all 0.15s linear;
+			transform: translate3d(0,0,0);
+		}
+
+		.image {
+			transition: all 0.30s ease-in-out;
+			transform-origin: center;
+		}
+
+		&:hover {
+			.image {
+				transform: scale(1.5);
+			}
+		}
+
+		&.tag-initial-zoom-150:hover {
+			.image {
+				transform: scale(2.5);
+			}
+		}
+		&.tag-initial-zoom-200:hover {
+			.image {
+				transform: scale(3);
+			}
+		}
+		&.tag-initial-zoom-250:hover {
+			.image {
+				transform: scale(3.5);
+			}
+		}
+		&.tag-initial-zoom-300:hover {
+			.image {
+				transform: scale(4);
+			}
+		}
+	}
+}
+</style>

package/dist/runtime/components/styles/components.less

@@ -0,0 +1,3 @@
+@ui-accordion-title-font-size: var(--ui-text-medium);
+@ui-accordion-text-font-size: var(--ui-text-default);
+@ui-button-border-radius: var(--ui-input-height-large);

package/dist/runtime/components/styles/mixins.less

@@ -0,0 +1,6 @@
+.mix-miltiline-text-overflow(@line-numbers: 2) {
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-line-clamp: @line-numbers;
+	-webkit-box-orient: vertical;
+}