@community-release/nx-ui 0.0.22 → 0.0.24

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.22"
+  "version": "0.0.24"
 }

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,16 +1,25 @@
 <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>
 		<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">
+		<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>
-		<div class="ui-card-footer" v-if="slots?.footer">
+		<div class="ui-card-footer" v-if="$slots?.footer">
 			<slot name="footer"></slot>
 		</div>
 	</component>
@@ -18,16 +27,22 @@
 
 <script setup>
 // Imports
-	import { useSlots, resolveComponent } from 'vue';
-
-//
-const slots = useSlots()
+import { resolveComponent } from 'vue';
 
+// Data
 const props = defineProps({
 	to: {
 		type: String,
 		default: ''
 	},
+	image: {
+		type: String,
+		default: ''
+	},
+	imageAlt: {
+		type: String,
+		default: ''
+	},
 	icon: {
 		type: String,
 		default: ''
@@ -44,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';
@@ -61,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);
 
@@ -81,6 +116,13 @@ const iconTitleIs = props.iconLink ? resolveComponent('NuxtLink') : 'b';
 	background: @com-color-surface;
 	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;
+	}
+
 	.ui-card-icon {
 		display: grid;
 		grid-template-columns: 50px auto;
@@ -108,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;
@@ -126,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/package.json

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