@community-release/nx-ui 0.0.23 → 0.0.25

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.23"
+  "version": "0.0.25"
 }

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

@@ -1,7 +1,7 @@
 <template>
 	<section class="component-ui-accordion">
 		<ui-accordion-item v-if="list.length" v-for="item of list" :title="item.title">
-			{{ item.text }}
+			<div v-html="item.text"></div>
 		</ui-accordion-item>
 		<slot></slot>
 	</section>

package/dist/runtime/components/card.vue

@@ -1,5 +1,8 @@
 <template>
 	<component class="component-ui-card" :is="cardIs" :to="to">
+		<div class="ui-card-header" v-if="$slots?.header">
+			<slot name="header"></slot>
+		</div>
 		<div class="ui-card-image" v-if="image">
 			<img :src="image" :alt="imageAlt">
 		</div>
@@ -9,7 +12,10 @@
 				{{ iconTitle }}
 			</component>
 		</div>
-		<div class="ui-card-title" v-if="title"><strong>{{ title }}</strong></div>
+		<component v-if="title" :is="titleUrl ? 'a' : 'div'" class="ui-card-title" :href="titleUrl">
+			<strong>{{ title }}</strong>
+			<div v-if="subtitle" class="ui-card-subtitle">{{ subtitle }}</div>
+		</component>
 		<div class="ui-card-content" v-if="$slots?.default">
 			<slot></slot>
 		</div>
@@ -53,6 +59,18 @@ const props = defineProps({
 		type: String,
 		default: ''
 	},
+	subtitle: {
+		type: String,
+		default: ''
+	},
+	titleUrl: {
+		type: String,
+		default: ''
+	},
+	href: {
+		type: String,
+		default: ''
+	},
 });
 
 const cardIs = (props.to || props.href) ? resolveComponent('NuxtLink') : 'div';
@@ -70,14 +88,22 @@ const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
 // Font family
 @com-font-header: var(--ui-font-header);
 
+// Font size
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+
 // Color
 @com-color-header-text: var(--ui-color-header-text);
+@com-color-gray-text: var(--ui-color-gray-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-big: var(--ui-space-big);
+@com-space-medium: var(--ui-space-medium);
 @com-space-default: var(--ui-space-default);
+@com-space-small: var(--ui-space-small);
 @com-space-micro: var(--ui-space-micro);
 @com-space-mini: var(--ui-space-mini);
 
@@ -91,6 +117,7 @@ const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
 	border-radius: @com-border-radius-default;
 
 	.ui-card-image {
+		padding: @com-space-big @com-space-big @com-space-mini @com-space-big;
 		overflow: hidden;
 		border-top-left-radius: @com-border-radius-default;
 		border-top-right-radius: @com-border-radius-default;
@@ -123,6 +150,8 @@ const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
 		display: block;
 		padding: var(--ui-card-padding) var(--ui-card-padding) @com-space-micro var(--ui-card-padding);
 		font-family: @com-font-header;
+		font-size: @com-text-default;
+		color: @com-color-header-text;
 
 		strong {
 			position: relative;
@@ -141,6 +170,11 @@ const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
 				background: @com-color-primary;
 			}
 		}
+
+		.ui-card-subtitle {
+			font-size: @com-text-small;
+			color: @com-color-gray-text;
+		}
 	}
 
 	.ui-card-content {

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

@@ -0,0 +1,50 @@
+<template>
+	<label class="component-ui-label" :class="`tag-size-${size}`">
+		<span class="component-ui-label--text">{{ text }}</span>
+		<slot></slot>
+	</label>
+</template>
+
+<script setup>
+// Import
+	import comProps from '#build/ui.label.mjs';
+
+// Date
+	const props = defineProps({
+		text: {
+			default: '',
+		},
+		size: {
+			type: String,
+			default: comProps.size,
+		}
+	});
+</script>
+
+<style lang="less">
+@com-space-micro: var(--ui-space-micro);
+@com-color-header-text: var(--ui-color-header-text);
+@com-font-weight-medium: var(--ui-font-weight-medium);
+
+@com-text-big: var(--ui-text-big);
+@com-text-medium: var(--ui-text-medium);
+@com-text-default: var(--ui-text-default);
+@com-text-small: var(--ui-text-small);
+
+.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;
+	}
+
+	// Text size
+	&.tag-size-big .component-ui-label--text { font-size: @com-text-big; }
+	&.tag-size-medium .component-ui-label--text { font-size: @com-text-medium; }
+	&.tag-size-small .component-ui-label--text { font-size: @com-text-small; }
+}
+</style>

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

@@ -0,0 +1,3 @@
+{
+	"size": ""
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.23",
+    "version": "0.0.25",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",

package/dist/runtime/components/label.vue

@@ -1,33 +0,0 @@
-<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>