@community-release/nx-ui 0.0.4 → 0.0.7

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

@@ -0,0 +1,63 @@
+<template>
+	<section class="component-ui-notice">
+		<transition-group name="list">
+			<div v-for="item in items" :key="item.id" class="component-ui-notice-wrapper">
+				<ui-notice-item 
+					:id="item.id" 
+					:duration="item.duration" 
+					@remove="store.remove(item.id)"
+				>
+					<component :is="item.templateComponent" v-bind="item.templateProps"></component>
+				</ui-notice-item>
+			</div>
+		</transition-group>
+	</section>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia';
+import { useUINoticeStore } from './store';
+import UiNoticeItem from './item.vue';
+
+const store = useUINoticeStore();
+const { items } = storeToRefs(store);
+</script>
+
+<style lang="less">
+@com-space-default: var(--ui-space-default);
+
+.list-enter-active,
+.list-leave-active {
+	transition: all 0.5s ease;
+	display: grid;
+	grid-template-rows: 1fr;
+}
+
+.list-enter-from,
+.list-leave-to {
+	grid-template-rows: 0fr;
+
+	.component-ui-notice-item {
+		opacity: 0;
+		margin: 0;
+		padding: 0;
+	}
+}
+
+.component-ui-notice {
+	transform: translateX(-50%);
+	position: fixed;
+	bottom: @com-space-default;
+	left: 50%;
+	padding: 0 @com-space-default;
+
+	width: 500px;
+	max-width: 100%;
+
+	.component-ui-notice-wrapper {
+		.component-ui-notice-item {
+			overflow: hidden;
+		}
+	}
+}
+</style>

package/dist/runtime/components/notice/item.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="component-ui-notice-item">
+		<slot></slot>
+
+		<i class="btn-close" @click="store.remove(id)">
+			<svg class="progress" width="32" height="32">
+				<circle cx="16" cy="16" r="14" />
+			</svg>
+		</i>
+	</div>
+</template>
+
+<script setup>
+// Imports
+	import { useUINoticeStore } from './store';
+
+// Data
+	const props = defineProps([
+		'id', 'duration'
+	]);
+
+	const store = useUINoticeStore();
+
+	const computedDuration = computed(() => {
+		return `${props.duration}ms`;
+	});
+
+// Hooks
+	onMounted(() => {
+		// Remove notice after duration end
+		setTimeout(() => store.remove(props.id), props.duration);
+	});
+</script>
+
+<style lang="less">
+@com-border-radius-default: var(--ui-border-radius-default);
+
+@com-color-secondary: var(--ui-color-secondary);
+@com-color-border: var(--ui-color-border);
+@com-color-surface: var(--ui-color-surface);
+@com-color-header-text: var(--ui-color-header-text);
+@com-color-gray-text: var(--ui-color-gray-text);
+
+@com-space-medium: var(--ui-space-medium);
+@com-space-mini: var(--ui-space-mini);
+
+@com-bs-2: var(--ui-bs-2);
+
+
+@keyframes ui-notice-loading-circle {
+	0% {
+		stroke-dashoffset: 88;
+	}
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+.component-ui-notice-item {
+	--duration: v-bind(computedDuration);
+
+	transform-origin: center;
+	transition: all 0.5s ease;
+
+	position: relative;
+	margin-top: @com-space-mini;
+	padding: @com-space-medium;
+
+	border: 1px solid @com-color-border;
+	border-radius: @com-border-radius-default;
+	background: @com-color-surface;
+	box-shadow: @com-bs-2;
+
+	.btn-close {
+		position: absolute;
+		top: 10px;
+		right: 10px;
+
+		width: 32px;
+		height: 32px;
+		cursor: pointer;
+
+		&:before,
+		&:after {
+			content: '';
+
+			transform-origin: center;
+
+			position: absolute;
+			top: 50%;
+			left: 50%;
+
+			width: 12px;
+			height: 1px;
+
+			background: @com-color-header-text;
+		}
+
+		&:before { transform: translate3d(-50%, -50%, 0) rotate(45deg); }
+		&:after { transform: translate3d(-50%, -50%, 0) rotate(-45deg); }
+
+		circle {
+			transform: rotate(-90deg);
+			transform-origin: 50%;
+			
+			fill: none;
+			stroke: @com-color-gray-text;
+			stroke: @com-color-secondary;
+			stroke-width: 1px;
+
+			stroke-dasharray: 88 88;
+			stroke-dashoffset: 88;
+
+			animation: ui-notice-loading-circle var(--duration) linear;
+		}
+	}
+}
+</style>

package/dist/runtime/components/notice/store.d.ts

@@ -0,0 +1,27 @@
+export const useUINoticeStore: import("pinia").StoreDefinition<"UINoticeStore", {
+    items: never[];
+}, {}, {
+    /**
+     * Add item
+     * @param {NoticeItem} v
+     */
+    add(v: NoticeItem): string | number;
+    /**
+     * Remove item
+     * @param {string|number} id
+     */
+    remove(id: string | number): void;
+}>;
+/**
+ * NoticeItem
+ */
+export type NoticeItem = {
+    /**
+     * - Item id
+     */
+    id?: string | number | undefined;
+    title: string;
+    message: string;
+    templateComponent: any;
+    templateProps: string;
+};

package/dist/runtime/components/notice/store.mjs

@@ -0,0 +1,46 @@
+/**
+ * NoticeItem
+ * @typedef {Object} NoticeItem
+ * @property {string|number} [id] - Item id
+ * @property {string} title
+ * @property {string} message
+ * @property {any} templateComponent
+ * @property {string} templateProps
+ */
+
+import { defineStore } from 'pinia';
+
+export const useUINoticeStore = defineStore('UINoticeStore', {
+    state: () => {
+        return {
+			items: [],
+		}
+    },
+
+	actions: {
+		/**
+		 * Add item
+		 * @param {NoticeItem} v 
+		 */
+		add(v) {
+			if (!v?.id) v.id = Math.random().toString(36).substr(2, 9);
+			if (!v?.duration) v.duration = 10000;
+
+			this.items.unshift(v);
+
+			return v.id;
+		},
+
+		/**
+		 * Remove item
+		 * @param {string|number} id
+		 */
+		remove(id) {
+			for (let i=0; i < this.items.length; i++) {
+				if (this.items[i].id === id) {
+					this.items.splice(i--, 1);
+				}
+			}
+		},
+	},
+});

package/dist/runtime/components/radio.vue

@@ -0,0 +1,215 @@
+<template>
+	<span class="component-ui component-ui-radio" :class="classes">
+		<label>
+			<input
+				ref="input"
+				type="radio" 
+				:checked="isChecked"
+				:value="value"
+				:name="name"
+				:disabled="disabled"
+				autocomplete="off"
+				@change="handleUpdate($event.target.value)"
+			/>
+
+			<i></i>
+
+			<span>
+				<slot></slot>
+			</span>
+		</label>
+	</span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+	name: {
+		required: false,
+		default: 'rd'
+	},
+	value: {
+		required: true,
+	},
+	modelValue: { default: '' },
+	haveError: {
+		type: Boolean,
+		default: false
+	},
+	required: {
+		type: Boolean,
+		default: false
+	},
+	disabled: {
+		type: Boolean,
+		default: false
+	}
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const classes = computed(() => {
+	const ar = [];
+
+	if (props.value !== '') ar.push('tag-not-empty');
+	if (props.haveError) 	ar.push('tag-error');
+	if (props.text) 		ar.push('tag-text');
+	if (props.disabled) 	ar.push('tag-disabled');
+	if (props.required) 	ar.push('tag-required');
+
+	return ar;
+});
+
+const isChecked = computed(() => props.modelValue == props.value);
+
+function handleUpdate(v) {
+	emit('update:modelValue', v);
+}
+</script>
+
+<style lang="less">
+.component-ui-radio {
+	@com-color-primary: var(--ui-color-primary);
+	@com-color-text-on-primar: var(--ui-color-text-on-primary);
+	@com-color-border: var(--ui-color-border);
+	@com-color-error: var(--ui-color-error);
+	@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-input-height: var(--ui-input-height-default);
+
+	@com-text-medium: var(--ui-text-medium);
+	@com-text-small: var(--ui-text-small);
+
+	@com-space-micro: var(--ui-space-micro);
+
+	@com-ani-time: var(--ui-ani-time);
+
+	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;
+		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;
+			line-height: 16px;
+			text-align: center;
+			font-size: 10px;
+
+			border-radius: 50%;
+			border: 1px solid @com-color-gray-text;
+
+			color: @com-color-text-on-primar;
+
+			&:before {
+				content: '';
+
+				transition: opacity @com-ani-time;
+
+				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 {
+			color: @com-color-header-text;
+		}
+	}
+
+	// Required
+	&.tag-required {
+		span:after {
+			content: '*';
+			padding-left: @com-space-micro;
+			color: @com-color-error;
+			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; }
+	}
+}
+</style>