more module previews

2021-01-29 13:07:04 +01:00
parent fe19e3c238
commit 44b6e6109f
6 changed files with 114 additions and 0 deletions
@@ -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>
@@ -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>
@@ -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>