more module previews

zero.Core/Entities/Link.cs

@@ -11,6 +11,8 @@ namespace zero.Core.Entities
 
     public string UrlSuffix { get; set; }
 
+    public string Label { get; set; }
+
     public string Title { get; set; }
 
     public Dictionary<string, string> Values { get; set; } = new Dictionary<string, string>();

zero.Web.UI/App/components/modules/predefined/module-preview-button.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="ui-module-preview-button">
+    <div class="ui-button type-light" v-text="text"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'uiModulePreviewButton',
+
+    props: {
+      text: {
+        type: String
+      }
+    }
+  }
+</script>

zero.Web.UI/App/components/modules/predefined/module-preview-tags.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="ui-module-preview-tags">
+    <div class="ui-module-preview-tag" v-for="item in items">{{(!!property ? item[property] : item)}}</div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'uiModulePreviewTags',
+
+    props: {
+      items: {
+        type: Array
+      },
+      property: {
+        type: String,
+        default: null
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-module-preview-tags
+  {
+    display: flex;
+    gap: 8px;
+  }
+
+  .ui-module-preview-tag
+  {
+    display: inline-block;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius);
+    padding: 6px 8px 4px;
+  }
+</style>

zero.Web.UI/App/editor/fields/link.vue

@@ -0,0 +1,43 @@
+<template>
+  <input :value="url" @input="onChange($event.target.value)" type="text" class="ui-input" :disabled="disabled" />
+</template>
+
+
+<script>
+  export default {
+    props: {
+      value: {
+        type: Object,
+        default: {
+          providerAlias: null,
+          target: 'default',
+          urlSuffix: null,
+          label: null,
+          title: null,
+          values: {
+            url: null
+          }
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      }
+    },
+
+    data: () => ({
+      url: null
+    }),
+
+    methods: {
+      onChange(value)
+      {
+        this.$emit('input', {
+          values: {
+            url: value
+          }
+        });
+      }
+    }
+  }
+</script>

zero.Web.UI/app/components/all.js

@@ -22,6 +22,8 @@ import uiSelect from './forms/select.vue';
 import uiModulePreviewFigure from './modules/predefined/module-preview-figure.vue';
 import uiModulePreviewHeadline from './modules/predefined/module-preview-headline.vue';
 import uiModulePreviewText from './modules/predefined/module-preview-text.vue';
+import uiModulePreviewButton from './modules/predefined/module-preview-button.vue';
+import uiModulePreviewTags from './modules/predefined/module-preview-tags.vue';
 import uiModules from './modules/modules.vue';
 
 import uiDropdownButton from './overlays/dropdown-button.vue';
@@ -89,6 +91,8 @@ export default {
   uiModulePreviewFigure,
   uiModulePreviewHeadline,
   uiModulePreviewText,
+  uiModulePreviewButton,
+  uiModulePreviewTags,
   uiModules,
 
   uiDropdownButton,

zero.Web.UI/app/core/editor-field.ts

@@ -26,6 +26,7 @@ import Modules from '../editor/fields/modules.vue';
 import Nested from '../editor/fields/nested.vue';
 import State from '../editor/fields/state.vue';
 import Tags from '../editor/fields/tags.vue';
+import Link from '../editor/fields/link.vue';
 
 
 class EditorField
@@ -214,6 +215,16 @@ class EditorField
   }
 
 
+  /**
+   * Render a link picker
+   * @returns {EditorField}
+   */
+  linkPicker()
+  {
+    return this._setComponent(Link, {});
+  }
+
+
   /**
    * @typedef {object} EditorSelectItem
    * @param {object} key - Key/Id of the item