@community-release/nx-ui 0.0.4 → 0.0.7

package/dist/runtime/components/checkbox.vue

@@ -0,0 +1,227 @@
+<template>
+	<span class="component-ui component-ui-checkbox" :class="classes">
+		<label>
+			<input
+				ref="input"
+				type="checkbox" 
+				:name="name"
+				:checked="isChecked"
+				:disabled="disabled"
+				@change="updateValue($event.target.checked)"
+				autocomplete="off"
+			/>
+
+			<i></i>
+
+			<span>
+				<slot></slot>
+			</span>
+		</label>
+	</span>
+</template>
+
+<script setup>
+// Imports
+	import { computed } from 'vue';
+
+//
+	const props = defineProps({
+		name: {
+			required: false,
+			default: 'cb'
+		},
+		modelValue: {
+			required: true,
+		},
+		haveError: {
+			type: Boolean,
+			default: false
+		},
+		useBinaries: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	});
+
+	const emit = defineEmits(['change', 'onchange', 'update:modelValue']);
+
+	const classes = computed(() => {
+		const ar = [];
+
+		if (props.haveError) 	ar.push('tag-error');
+		if (props.disabled) 	ar.push('tag-disabled');
+		if (props.required) 	ar.push('tag-required');
+
+		return ar;
+	});
+
+	const isChecked = computed(() => {
+		let result = props.modelValue;
+
+		if (props.useBinaries) result = (result === 1 || result === '1') ? true : false;
+
+		return result;
+	});
+
+	// Methods
+	function updateValue(checked) {
+		let value = checked;
+
+		if (props.useBinaries) value = value ? 1 : 0;
+
+		emit('change', value);
+		emit('update:modelValue', value);
+		emit('onchange', value);
+	};
+</script>
+
+<style lang="less">
+.component-ui-checkbox {
+	@com-color-primary: var(--ui-color-primary);
+	@com-color-text-on-primary: var(--ui-color-text-on-primary);
+	@com-color-border: var(--ui-color-border);
+	@com-color-red: var(--ui-color-red);
+
+	@com-color-text: var(--ui-color-text);
+	@com-color-header-text: var(--ui-color-header-text);
+	@com-color-gray-text: var(--ui-color-gray-text);
+	@com-color-error-text: var(--ui-color-error);
+
+	@com-text-medium: var(--ui-text-medium);
+	@com-text-small: var(--ui-text-small);
+
+	@com-input-height: var(--ui-input-height-default);
+
+	@com-space-micro: var(--ui-space-micro);
+
+	position: relative;
+	display: inline-block;
+	text-align: left;
+
+	.error-wrap {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		padding: 0;
+		
+		font-size: 11px;
+		
+		color: @com-color-error-text;
+		background: transparent;
+
+		&:before, &:after { display: none; }
+	}
+	
+	> label {
+		position: relative;
+		display: flex;
+		align-items: center;
+  		justify-content: left;
+		margin: 0;
+		padding: 0 0 0 30px;
+
+		height: @com-input-height;
+		line-height: @com-input-height;
+		font-size: @com-text-small;
+		font-weight: 500;
+
+		color: @com-color-text;
+		cursor: pointer;
+
+		> input {
+			position: absolute;
+			top: 0;
+			left: 0;
+			margin: 0;
+			padding: 0;
+			width: 100%;
+			height: 100%;
+			opacity: 0;
+			cursor: pointer;
+		}
+
+		> i {
+			transition: background 0.25s, border-color 0.25s;
+
+			position: absolute;
+			top: 50%;
+			left: 0;
+			margin-top: -9px;
+			width: 18px;
+			height: 18px;
+			border-radius: 3px;
+			border: 1px solid @com-color-gray-text;
+
+			color: @com-color-text-on-primary;
+
+			&:before {
+				content: '';
+
+				transition: opacity 0.25s;
+
+				opacity: 0;
+
+				position: absolute;
+				inset: 0;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: 10px;
+				background-image: url(./icons/check.white.svg);
+			}
+		}
+
+		> input:checked + i {
+			border-color: @com-color-primary;
+			background: @com-color-primary;
+
+			&:before {
+				opacity: 1;
+			}
+		}
+
+		> a {
+			pointer-events: none;
+			position: relative;
+		}
+
+		span {
+			//font-weight: 600;
+			color: @com-color-header-text;
+		}
+	}
+
+	// Required
+	&.tag-required {
+		span:after {
+			content: '*';
+			padding-left: @com-space-micro;
+			color: @com-color-red;
+			font-weight: bold;
+			font-size: @com-text-medium;
+		}
+	}
+
+	// Disabled
+	&.tag-disabled {
+		opacity: 0.6;
+
+		label,
+		input {
+			cursor: default;
+		}
+	}
+
+	// Error
+	&.tag-error {
+		> label { color: @com-color-error-text; }
+	}
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+	<span class="component-ui-countdown">
+		{{ time }}
+	</span>
+</template>
+
+<script setup>
+import { ref, watchEffect, onMounted, onBeforeUnmount } from 'vue';
+import Countdown from '../helpers/Countdown';
+import comProps from '#build/ui.countdown.mjs';
+
+// Data
+	//const { t } = useI18n();
+	const props = defineProps({
+		ms: {
+			type: Number,
+			default: comProps.ms,
+			//default: 0
+		},
+		h: {
+			default: comProps.h,
+		},
+		m: {
+			default: comProps.m,
+		},
+		s: {
+			default: comProps.s,
+		},
+	});
+
+	const initialized = ref(false);
+	
+	const time = ref(0);
+	let countdown = null;
+
+	watchEffect(() => {
+		if (!initialized.value) return;
+		if (countdown) countdown.destroy();
+
+		countdown = new Countdown( props.ms / 1000 );
+		countdown.onTick = onTick;
+		countdown.onFinish = onFinish;
+		countdown.start();
+	});
+
+// Methods
+	function onTick(e) {
+		const h = parseInt(e.h) ? `${e.h}${props.h} ` : '';
+		
+		time.value = `${h}${e.m}${props.m} ${e.s}${props.s}`;
+	}
+
+	function onFinish() {
+		time.value = '00:00:00';
+	}
+
+// Hooks
+	onMounted(() => {
+		initialized.value = true;
+	});
+	onBeforeUnmount(() => {
+		if (countdown) countdown.destroy();
+	});
+</script>

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

@@ -0,0 +1,6 @@
+{
+	"ms": 0,
+	"h": "h",
+	"m": "m",
+	"s": "s"
+}

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

@@ -0,0 +1,140 @@
+<template>
+	<section class="component-ui component-ui-filter">
+		<span 
+			v-for="item of items" 
+			@click="$emit('update:modelValue', genUpdatedValue(item.value))" 
+			:class="{'tag-active': isSelected(item.value)}"
+		>
+			<i v-if="item.icon" :class="item.icon"></i>
+			{{ item.name }}
+		</span>
+	</section>
+</template>
+<script setup>
+// Imports
+import { computed } from 'vue';
+import comProps from '#build/ui.filter.mjs';
+
+//
+const props = defineProps({
+	/*
+	[
+		{
+			name: '..',
+			value: '..',
+			icon?: 'icon-home'
+		}
+	]
+	*/
+	items: {
+		type: Array,
+		default: () => [],
+		required: true
+	},
+	modelValue: {
+		required: true
+	},
+	activeColor: {
+		type: String,
+		required: false,
+		default: comProps.activeColor
+	},
+	activeBg: {
+		type: String,
+		required: false,
+		default: comProps.activeBg
+	},
+});
+
+const computedModel = computed(() => {
+	return props.modelValue;
+});
+
+const isMultiSelect = computed(() => {
+	return Array.isArray(props.modelValue);
+});
+
+// Methods
+function isSelected(id) {
+	if (isMultiSelect.value) {
+		return computedModel.value.includes(id);
+	} else {
+		return computedModel.value === id;
+	}
+}
+
+function genUpdatedValue(id) {
+	// If multi select
+	if (isMultiSelect.value) {
+		// If item already in array then remove it
+		if (isSelected(id)) {
+			let ar = [...computedModel.value];
+
+			for (let i=0; i < ar.length; i++) {
+				if (ar[i] === id) ar.splice(i--, 1);
+			}
+
+			return ar;
+		// If item not in array then add it
+		} else {
+			return [...computedModel.value, id];
+		}
+		
+	// If single select
+	} else {
+		return id;
+	}
+}
+</script>
+
+<style lang="less">
+.component-ui-filter {
+	@com-space-default: var(--ui-space-default);
+	@com-space-small: var(--ui-space-small);
+
+	@com-input-height-small: var(--ui-input-height-small);
+
+	--active-color: v-bind(activeColor);
+	--active-bg: v-bind(activeBg);
+
+	overflow-x: auto;
+	overflow-y: hidden;
+	white-space: nowrap;
+
+	margin-inline: calc(@com-space-default * -1);
+	padding: @com-space-default;
+
+	span {
+		user-select: none;
+
+		display: inline-flex;
+
+		vertical-align: top;
+		margin-right: @com-space-small;
+		padding: 0 @com-space-small;
+
+		height: @com-input-height-small;
+		line-height: @com-input-height-small;
+
+		border-radius: 30px;
+		cursor: pointer;
+	}
+
+	i {
+		margin-right: 8px;
+		width: 18px;
+		height: 18px;
+		font-size: 18px;
+		color: var(--active-bg);
+	}
+
+	.tag-active {
+		color: var(--active-color);
+		background: var(--active-bg);
+
+		i {
+			color: var(--active-color);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,4 @@
+{
+	"activeColor": "var(--ui-color-text-on-secondary)",
+	"activeBg": "var(--ui-color-secondary)"
+}

package/dist/runtime/components/grid.vue

@@ -0,0 +1,169 @@
+<template>
+	<section class="component-ui component-ui-grid" :class="getClasses" :style="getStyle">
+		<slot></slot>
+	</section>
+</template>
+
+<script>
+export default {
+	// Data
+	props: {
+		textAlign: {
+			type: String,
+			default: 'left'
+		},
+		gap: {
+			type: [String, Object],
+			default: 'var(--ui-space-default)'
+		},
+		gridTemplateColumns: {
+			type: [String, Object],
+			default: ''
+		},
+		gapTop: {
+			type: [Boolean, String],
+			default: false
+		},
+		gapBottom: {
+			type: [Boolean, String],
+			default: false
+		},
+	},
+	data: function () {
+		return {
+			timeout: null,
+			windowWidth: 999999
+		};
+	},
+	computed: {
+		getClasses() {
+			let r = [
+				'tag-text-' + this.textAlign
+			];
+
+			return r;
+		},
+		getStyle() {
+			let r = {};
+			let padding = this.computedGap.split(' ');
+			let paddingTop = padding[0];
+			let paddingBottom = padding[0];
+
+			r['grid-gap'] = this.computedGap;
+
+			if (this.computedGridTemplateColumns) {
+				r['grid-template-columns'] = this.computedGridTemplateColumns;
+			}
+
+			if (this.gapTop === true)
+				r['padding-top'] = paddingTop;
+
+			if (this.gapBottom === true)
+				r['padding-bottom'] = paddingBottom;
+
+			return r;
+		},
+		computedItemMaxWidth() {
+			return parseInt(this.itemMaxWidth);
+		},
+		computedGridTemplateColumns() {
+			if (typeof this.gridTemplateColumns == 'object') {
+				let result = 'default';
+				let ar = [];
+
+				for (let key in this.gridTemplateColumns) {
+					if (key !== 'default') {
+						ar.push(key >> 0);
+					}
+				}
+
+				if (ar.length) {
+					ar = ar.sort((a, b) => a - b);
+
+					for (let i = 0; i < ar.length; i++) {
+						if (this.windowWidth < ar[i]) {
+							result = ar[i] + '';
+							break;
+						}
+					}
+				}
+
+				return this.gridTemplateColumns[result];
+			}
+
+			return this.gridTemplateColumns;
+		},
+		computedGap() {
+			if (typeof this.gap == 'object') {
+				let result = 'default';
+				let ar = [];
+
+				for (let key in this.gap) {
+					if (key !== 'default') {
+						ar.push(key >> 0);
+					}
+				}
+
+				if (ar.length) {
+					ar = ar.sort((a, b) => a - b);
+
+					for (let i = 0; i < ar.length; i++) {
+						if (this.windowWidth < ar[i]) {
+							result = ar[i] + '';
+							break;
+						}
+					}
+				}
+
+				return this.gap[result];
+			}
+
+			return this.gap;
+		},
+	},
+
+	// Methods
+	methods: {
+		handleResize() {
+			clearTimeout(this.timeout);
+			this.timeout = setTimeout(this.onResize.bind(this), 250);
+		},
+		onResize() {
+			this.windowWidth = window.innerWidth;
+		},
+	},
+
+	// Hooks
+	mounted() {
+		this.$nextTick(() => {
+			this.handleResize();
+
+			window.addEventListener('resize', this.handleResize);
+			window.addEventListener('orientationchange', this.handleResize);
+		});
+	},
+
+	beforeDestroy() {
+		window.removeEventListener('resize', this.handleResize);
+		window.removeEventListener('orientationchange', this.handleResize);
+	},
+}
+</script>
+
+<style lang="less">
+.component-ui-grid {
+	display: grid;
+
+	&.tag-text-center {
+		text-align: center;
+	}
+
+	&.tag-text-left {
+		text-align: left;
+	}
+
+	&.tag-text-right {
+		text-align: right;
+	}
+}
+</style>

package/dist/runtime/components/grid.vue.d.ts

@@ -0,0 +1,56 @@
+declare namespace _default {
+    namespace props {
+        namespace textAlign {
+            export let type: StringConstructor;
+            let _default: string;
+            export { _default as default };
+        }
+        namespace gap {
+            let type_1: (StringConstructor | ObjectConstructor)[];
+            export { type_1 as type };
+            let _default_1: string;
+            export { _default_1 as default };
+        }
+        namespace gridTemplateColumns {
+            let type_2: (StringConstructor | ObjectConstructor)[];
+            export { type_2 as type };
+            let _default_2: string;
+            export { _default_2 as default };
+        }
+        namespace gapTop {
+            let type_3: (StringConstructor | BooleanConstructor)[];
+            export { type_3 as type };
+            let _default_3: boolean;
+            export { _default_3 as default };
+        }
+        namespace gapBottom {
+            let type_4: (StringConstructor | BooleanConstructor)[];
+            export { type_4 as type };
+            let _default_4: boolean;
+            export { _default_4 as default };
+        }
+    }
+    function data(): {
+        timeout: null;
+        windowWidth: number;
+    };
+    namespace computed {
+        function getClasses(): string[];
+        function getStyle(): {
+            'grid-gap': () => any;
+            'grid-template-columns': () => any;
+            'padding-top': any;
+            'padding-bottom': any;
+        };
+        function computedItemMaxWidth(): number;
+        function computedGridTemplateColumns(): any;
+        function computedGap(): any;
+    }
+    namespace methods {
+        function handleResize(): void;
+        function onResize(): void;
+    }
+    function mounted(): void;
+    function beforeDestroy(): void;
+}
+export default _default;