add notice interface

and update v-notice accordingly

src/components/v-notice/readme.md

@@ -7,9 +7,7 @@
 ## Props
 | Prop      | Description                                                        | Default |
 |-----------|--------------------------------------------------------------------|---------|
-| `success` | Shows the success notice                                           | `false` |
-| `warning` | Shows the warning notice                                           | `false` |
-| `danger`  | Shows the danger notice                                            | `false` |
+| `color`   | One of `info`, `success`, `warning`, `danger`                       | `info`  |
 | `icon`    | Custom icon name, or false if you want to hide the icon completely | `null`  |
 | `center`  | Render notice content centered                                     | `false` |
 

src/components/v-notice/v-notice.vue

@@ -1,30 +1,18 @@
 <template>
-	<div class="v-notice" :class="[className, { center }]">
+	<div class="v-notice" :class="[color, { center }]">
 		<v-icon v-if="icon !== false" :name="iconName" left />
 		<slot />
 	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed, PropType } from '@vue/composition-api';
 
 export default defineComponent({
 	props: {
-		info: {
-			type: Boolean,
-			default: false,
-		},
-		success: {
-			type: Boolean,
-			default: false,
-		},
-		warning: {
-			type: Boolean,
-			default: false,
-		},
-		danger: {
-			type: Boolean,
-			default: false,
+		color: {
+			type: String as PropType<'normal' | 'info' | 'success' | 'warning' | 'danger'>,
+			default: 'normal',
 		},
 		icon: {
 			type: [String, Boolean],
@@ -41,34 +29,20 @@ export default defineComponent({
 				return props.icon;
 			}
 
-			if (props.info) {
+			if (props.color == 'info') {
 				return 'info';
-			} else if (props.success) {
+			} else if (props.color == 'success') {
 				return 'check_circle';
-			} else if (props.warning) {
+			} else if (props.color == 'warning') {
 				return 'warning';
-			} else if (props.danger) {
+			} else if (props.color == 'danger') {
 				return 'error';
 			} else {
 				return 'info';
 			}
 		});
 
-		const className = computed<string | null>(() => {
-			if (props.info) {
-				return 'info';
-			} else if (props.success) {
-				return 'success';
-			} else if (props.warning) {
-				return 'warning';
-			} else if (props.danger) {
-				return 'danger';
-			} else {
-				return null;
-			}
-		});
-
-		return { iconName, className };
+		return { iconName };
 	},
 });
 </script>
@@ -126,5 +100,11 @@ body {
 		align-items: center;
 		justify-content: center;
 	}
+
+	::v-deep {
+		a {
+			text-decoration: underline;
+		}
+	}
 }
 </style>

src/interfaces/index.ts

@@ -13,6 +13,7 @@ import InterfaceStatus from './status';
 import InterfaceDateTime from './datetime';
 import InterfaceImage from './image';
 import InterfaceIcon from './icon';
+import InterfaceNotice from './notice';
 import InterfaceManyToOne from './many-to-one';
 import InterfaceOneToMany from './one-to-many';
 import InterfaceColor from './color';
@@ -38,6 +39,7 @@ export const interfaces = [
 	InterfaceDateTime,
 	InterfaceImage,
 	InterfaceIcon,
+	InterfaceNotice,
 	InterfaceManyToOne,
 	InterfaceOneToMany,
 	InterfaceColor,

src/interfaces/notice/index.ts

@@ -0,0 +1,41 @@
+import { defineInterface } from '@/interfaces/define';
+import InterfaceNotice from './notice.vue';
+
+export default defineInterface(({ i18n }) => ({
+	id: 'notice',
+	name: i18n.t('notice'),
+	icon: 'remove',
+	component: InterfaceNotice,
+	hideLabel: true,
+	hideLoader: true,
+	options: [
+		{
+			field: 'color',
+			name: i18n.t('color'),
+			width: 'half',
+			interface: 'dropdown',
+			default_value: 'normal',
+			options: {
+				items: [
+					{ itemText: i18n.t('normal'), itemValue: 'normal' },
+					{ itemText: i18n.t('info'), itemValue: 'info' },
+					{ itemText: i18n.t('success'), itemValue: 'success' },
+					{ itemText: i18n.t('warning'), itemValue: 'warning' },
+					{ itemText: i18n.t('danger'), itemValue: 'danger' },
+				],
+			},
+		},
+		{
+			field: 'icon',
+			name: i18n.t('icon'),
+			width: 'half',
+			interface: 'icon',
+		},
+		{
+			field: 'text',
+			name: i18n.t('text'),
+			width: 'full',
+			interface: 'textarea',
+		},
+	],
+}));

src/interfaces/notice/notice.vue

@@ -0,0 +1,34 @@
+<template>
+	<v-notice :icon="icon" :color="color">
+		<div v-html="marked(text)" />
+	</v-notice>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import marked from 'marked';
+
+export default defineComponent({
+	props: {
+		color: {
+			type: String,
+			default: 'normal',
+		},
+		icon: {
+			type: String,
+			default: 'info',
+		},
+		text: {
+			type: String,
+			default: 'No text configured...',
+		},
+	},
+	setup(props) {
+		return { marked };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+//
+</style>

src/interfaces/notice/readme.md

@@ -0,0 +1,9 @@
+# Notice
+
+## Options
+
+| Prop       | Description                    | Default                |
+| ---------- | ------------------------------ | ---------------------- |
+| `color`    | Notice color                   | `normal`               |
+| `icon`     | Icon rendered before the text  | `null`                 |
+| `text`     | Text for notice                | `null`                 |