From 44b6e6109fb1474bbbe34228e13eb17a3b05abff Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Fri, 29 Jan 2021 13:07:04 +0100
Subject: [PATCH] more module previews

---
 zero.Core/Entities/Link.cs                    |  2 +
 .../predefined/module-preview-button.vue      | 17 ++++++++
 .../predefined/module-preview-tags.vue        | 37 ++++++++++++++++
 zero.Web.UI/App/editor/fields/link.vue        | 43 +++++++++++++++++++
 zero.Web.UI/app/components/all.js             |  4 ++
 zero.Web.UI/app/core/editor-field.ts          | 11 +++++
 6 files changed, 114 insertions(+)
 create mode 100644 zero.Web.UI/App/components/modules/predefined/module-preview-button.vue
 create mode 100644 zero.Web.UI/App/components/modules/predefined/module-preview-tags.vue
 create mode 100644 zero.Web.UI/App/editor/fields/link.vue

diff --git a/zero.Core/Entities/Link.cs b/zero.Core/Entities/Link.cs
index 572f2d57..f420b323 100644
--- a/zero.Core/Entities/Link.cs
+++ b/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>();
diff --git a/zero.Web.UI/App/components/modules/predefined/module-preview-button.vue b/zero.Web.UI/App/components/modules/predefined/module-preview-button.vue
new file mode 100644
index 00000000..b1162e47
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/modules/predefined/module-preview-tags.vue b/zero.Web.UI/App/components/modules/predefined/module-preview-tags.vue
new file mode 100644
index 00000000..523a53ad
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/zero.Web.UI/App/editor/fields/link.vue b/zero.Web.UI/App/editor/fields/link.vue
new file mode 100644
index 00000000..75c2312b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/zero.Web.UI/app/components/all.js b/zero.Web.UI/app/components/all.js
index 12d8ccd3..425c442c 100644
--- a/zero.Web.UI/app/components/all.js
+++ b/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,
diff --git a/zero.Web.UI/app/core/editor-field.ts b/zero.Web.UI/app/core/editor-field.ts
index a7e57b0a..885aa9d7 100644
--- a/zero.Web.UI/app/core/editor-field.ts
+++ b/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