@community-release/nx-ui 0.0.4 → 0.0.7

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

@@ -0,0 +1,360 @@
+<template>
+	<component 
+		class="component-ui component-ui-button"
+		:is="computedType" 
+		:href="href" 
+		:to="href" 
+		:class="classes" 
+		:style="styles" 
+		@click="handleClick"
+	>
+		<div class="button-bg" :style="buttonBgStyle"></div>
+
+		<ui-impulse-indicator :impulse="impulse" />
+
+		<span class="button-content">
+			<span><slot name="prepend"></slot></span>
+			<span class="slot-default"><slot></slot></span>
+			<span><slot name="append"></slot></span>
+		</span>
+
+		<ui-loading class="loading-indicator" :active="loading"></ui-loading>
+	</component>
+</template>
+
+<script>
+import UiImpulseIndicator from '../impulse-indicator.vue';
+import UiLoading from '../loading.vue';
+import comProps from '#build/ui.button.mjs';
+
+export default {
+	components: {
+		UiImpulseIndicator,
+		UiLoading,
+	},
+	
+	// Data
+	props: {
+		color: {
+			type: String,
+			default: comProps.color,
+		},
+		size: {
+			type: String,
+			default: comProps.size,
+		},
+		variant: {
+			type: String,
+			default: comProps.variant,
+		},
+		shape: {
+			type: String,
+			default: comProps.shape,
+		},
+		href: {
+			type: String,
+			default: '',
+		},
+		type: {
+			type: String,
+			default: '',
+		},
+		block: {
+			type: Boolean,
+			default: false,
+		},
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: [Boolean, Number],
+			default: false,
+		},
+	},
+	data: function() {
+		return {
+			impulse: false,
+		};
+	},
+	computed: {
+		computedType() {
+			return this.type !== '' ? this.type : (this.href !== '' ? 'a' : 'span');
+		},
+		classes() {
+			let ar = [];
+
+			if (this.size) ar.push(`tag-size-${this.size}`);
+			if (this.shape) ar.push(`tag-shape-${this.shape}`);
+			if (this.variant) ar.push(`tag-variant-${this.variant}`);
+			if (this.block) ar.push('tag-block');
+			if (this.loading) ar.push('tag-loading');
+			if (this.disabled) ar.push('tag-disabled');
+
+			return ar;
+		},
+		stylesHoverColor() {
+			return `var(--ui-color-text-on-${this.color})`;
+		},
+		styles() {
+			let background = `var(--ui-color-${this.color})`;
+			let color = `var(--ui-color-text-on-${this.color})`;
+
+			if (this.variant === 'flat' || this.variant === 'outline') 
+				background = 'transparent';
+
+			if (this.variant === 'flat' || this.variant === 'outline') 
+				color = `var(--ui-color-${this.color}-text)`;
+
+			return {
+				background,
+				color
+			};
+		},
+		buttonBgStyle() {
+			return {
+				'background': (this.variant === 'flat' || this.variant === 'outline') ? `var(--ui-color-${this.color})` : 'rgba(66,88,120, 0.075)'
+			}
+		}
+	},
+
+	// Methods
+	methods: {
+		handleClick(e) {
+			if (this.disabled || this.loading) return;
+
+			let rect = this.$el.getBoundingClientRect();
+
+			this.impulse = {
+				left	: e.clientX - rect.left,
+				top		: e.clientY - rect.top,
+				width	: this.$el.offsetWidth,
+				height	: this.$el.offsetHeight
+			};
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.component-ui-button {
+	--button-hover-color: v-bind(stylesHoverColor);
+	--button-text-color: v-bind(styles.color);
+	--button-background: v-bind(styles.background);
+
+	// 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);
+
+	// Animation
+	@com-ani-time: var(--ui-ani-time);
+	@com-ani-ease: var(--ui-ani-ease);
+
+	// Colors
+	@com-color-header-text: var(--ui-color-header-text);
+	@com-color-primary: var(--ui-color-primary);
+	@com-color-primary-text: var(--ui-color-primary-text);
+	@com-color-secondary: var(--ui-color-secondary);
+	@com-color-border-bolder: var(--ui-color-border-bolder);
+
+	// 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);
+
+	// Padding
+	@com-space-default: var(--ui-space-default);
+	@com-space-small: var(--ui-space-small);
+	@com-space-mini: var(--ui-space-mini);
+
+	// Text
+	@com-text-default: var(--ui-text-default);
+	@com-text-small: var(--ui-text-small);
+	@com-text-mini: var(--ui-text-mini);
+
+	// Font
+	@com-font-header: var(--ui-font-header);
+
+	// Box shadow
+	@com-bs-1: var(--ui-bs-1);
+
+	transition: opacity @com-ani-time @com-ani-ease, visibility @com-ani-time @com-ani-ease;
+
+	overflow: hidden;
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+
+	padding: 0 @com-space-default;
+	height: @com-input-height-default;
+	line-height: 1.1;
+
+	text-align: center;
+	font-size: @com-text-default;
+	font-weight: normal;
+
+	cursor: pointer;
+	border: 1px solid transparent;
+	border-radius: @com-input-height-large;
+
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+
+	img {
+		width: 35px;
+		max-width: none;
+	}
+
+	.button-bg {
+		transition: opacity @com-ani-time @com-ani-ease;
+
+		opacity: 0;
+		position: absolute;
+		inset: 0;
+	}
+
+	.button-content {
+		transition: opacity @com-ani-time @com-ani-ease, visibility @com-ani-time @com-ani-ease, color @com-ani-time @com-ani-ease;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		position: relative;
+		height: 100%;
+		font-weight: 600;
+		font-family: @com-font-header;
+		letter-spacing: -0.015em;
+
+		.slot-default {
+			padding: 0 @com-space-mini;
+			line-height: 1;
+		}
+
+		.ic {
+			font-weight: normal;
+		}
+	}
+
+	.loading-indicator {
+		transform: translate3d(-50%, -50%, 0);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+
+		svg circle {
+			stroke: var(--button-text-color);
+		}
+	}
+
+	// Loading state
+	&.tag-loading {
+		cursor: default;
+
+		.button-content {
+			opacity: 0;
+			visibility: hidden;
+		}
+	}
+
+	// Flat
+	&.tag-variant-flat {
+		border: none;
+		box-shadow: none;
+		background: transparent;
+	}
+
+	// Outline
+	&.tag-variant-outline {
+		background: transparent;
+		border: 1px solid var(--button-text-color);
+	}
+
+	// Shapes
+	&.tag-shape-circle {
+		padding: 0 !important;
+		width: @com-input-height-default;
+		border-radius: 50%;
+
+		&.tag-size-large { width: @com-input-height-large; }
+		&.tag-size-big { width: @com-input-height-big; }
+		&.tag-size-medium { width: @com-input-height-big; }
+		&.tag-size-small { width: @com-input-height-small; }
+		&.tag-size-mini { width: @com-input-height-mini; }
+	}
+	&.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;
+	}
+
+	// Block
+	&.tag-block {
+		display: block;
+		padding: 0 @com-space-mini;
+		width: 100%;
+	}
+
+	// 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;
+
+		.loading-indicator {
+			transform: translate3d(-50%, -50%, 0) scale(0.8);
+		}
+	}
+
+	&.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);
+		}
+	}
+
+	// Disabled
+	&.tag-disabled {
+		opacity: 0.6;
+		cursor: default;
+		pointer-events: none;
+	}
+}
+
+@media (hover: hover) {
+	.component-ui-button {
+		&:hover {
+			text-decoration: none;
+			color: var(--button-hover-color) !important;
+
+			.button-bg { opacity: 1; }
+		}
+	}
+}
+</style>

package/dist/runtime/components/button/index.vue.d.ts

@@ -0,0 +1,81 @@
+declare namespace _default {
+    namespace components {
+        export { UiImpulseIndicator };
+        export { UiLoading };
+    }
+    namespace props {
+        export namespace color {
+            export let type: StringConstructor;
+            let _default: any;
+            export { _default as default };
+        }
+        export namespace size {
+            let type_1: StringConstructor;
+            export { type_1 as type };
+            let _default_1: any;
+            export { _default_1 as default };
+        }
+        export namespace variant {
+            let type_2: StringConstructor;
+            export { type_2 as type };
+            let _default_2: any;
+            export { _default_2 as default };
+        }
+        export namespace shape {
+            let type_3: StringConstructor;
+            export { type_3 as type };
+            let _default_3: any;
+            export { _default_3 as default };
+        }
+        export namespace href {
+            let type_4: StringConstructor;
+            export { type_4 as type };
+            let _default_4: string;
+            export { _default_4 as default };
+        }
+        export namespace type_5 {
+            let type_6: StringConstructor;
+            export { type_6 as type };
+            let _default_5: string;
+            export { _default_5 as default };
+        }
+        export { type_5 as type };
+        export namespace block {
+            let type_7: BooleanConstructor;
+            export { type_7 as type };
+            let _default_6: boolean;
+            export { _default_6 as default };
+        }
+        export namespace loading {
+            let type_8: BooleanConstructor;
+            export { type_8 as type };
+            let _default_7: boolean;
+            export { _default_7 as default };
+        }
+        export namespace disabled {
+            let type_9: (BooleanConstructor | NumberConstructor)[];
+            export { type_9 as type };
+            let _default_8: boolean;
+            export { _default_8 as default };
+        }
+    }
+    function data(): {
+        impulse: boolean;
+    };
+    namespace computed {
+        function computedType(): any;
+        function classes(): string[];
+        function stylesHoverColor(): string;
+        function styles(): {
+            background: string;
+            color: string;
+        };
+        function buttonBgStyle(): {
+            background: string;
+        };
+    }
+    namespace methods {
+        function handleClick(e: any): void;
+    }
+}
+export default _default;

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

@@ -0,0 +1,6 @@
+{
+	"color": "primary",
+	"shape": "",
+	"size": "default",
+	"variant": "solid"
+}

package/dist/runtime/components/card.vue

@@ -0,0 +1,138 @@
+<template>
+	<component class="component-ui-card" :is="cardIs" :to="to">
+		<div class="ui-card-icon" v-if="icon">
+			<img :src="icon">
+			<component v-if="iconTitle" :is="iconTitleIs" :to="iconLink" target="_blank" class="ui-card-icon-title">
+				{{ iconTitle }}
+			</component>
+		</div>
+		<div class="ui-card-title" v-if="title"><strong>{{ title }}</strong></div>
+		<div class="ui-card-content" v-if="slots?.default">
+			<slot></slot>
+		</div>
+		<div class="ui-card-footer" v-if="slots?.footer">
+			<slot name="footer"></slot>
+		</div>
+	</component>
+</template>
+
+<script setup>
+// Imports
+	import { useSlots, resolveComponent } from 'vue';
+
+//
+const slots = useSlots()
+
+const props = defineProps({
+	to: {
+		type: String,
+		default: ''
+	},
+	icon: {
+		type: String,
+		default: ''
+	},
+	iconTitle: {
+		type: String,
+		default: ''
+	},
+	iconLink: {
+		type: String,
+		default: ''
+	},
+	title: {
+		type: String,
+		default: ''
+	},
+});
+
+const cardIs = (props.to || props.href) ? resolveComponent('NuxtLink') : 'div';
+const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
+</script>
+
+<style lang="less">
+// Variables
+@com-border-radius-default: var(--ui-border-radius-big);
+
+// Text size
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+
+// Font family
+@com-font-header: var(--ui-font-header);
+
+// Color
+@com-color-header-text: var(--ui-color-header-text);
+@com-color-surface: var(--ui-color-surface);
+@com-color-text: var(--ui-color-text);
+@com-color-primary: var(--ui-color-primary);
+
+// Padding
+@com-space-default: var(--ui-space-default);
+@com-space-micro: var(--ui-space-micro);
+@com-space-mini: var(--ui-space-mini);
+
+.component-ui-card {
+	--ui-card-padding: @com-space-default;
+
+	position: relative;
+
+	color: @com-color-header-text;
+	background: @com-color-surface;
+	border-radius: @com-border-radius-default;
+
+	.ui-card-icon {
+		display: grid;
+		grid-template-columns: 50px auto;
+		gap: @com-space-default;
+		align-items: center;
+		padding: var(--ui-card-padding) 0 0 30px;
+		height: 80px;
+
+		font-family: @com-font-header;
+
+		img {
+			width: 100%;
+			max-width: 50px;
+			max-height: 50px;
+		}
+
+		a, b {
+			padding-right: @com-space-mini;
+			font-weight: 600;
+			color: @com-color-header-text;
+		}
+	}
+
+	.ui-card-title {
+		display: block;
+		padding: var(--ui-card-padding) var(--ui-card-padding) @com-space-micro var(--ui-card-padding);
+		font-family: @com-font-header;
+
+		strong {
+			position: relative;
+
+			&:before {
+				content: '';
+
+				position: absolute;
+				bottom: 22%;
+				right: -8px;
+
+				width: 4px;
+				height: 4px;
+				border-radius: 50%;
+
+				background: @com-color-primary;
+			}
+		}
+	}
+
+	.ui-card-content {
+		padding: 0 var(--ui-card-padding) var(--ui-card-padding) var(--ui-card-padding);
+		line-height: 1.5;
+		font-size: @com-text-small;
+		color: @com-color-text;
+	}
+}
+</style>