@windward/core 0.0.1

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionLikert.vue

@@ -0,0 +1,95 @@
+<template>
+    <v-container fluid>
+        <p class="question">
+            {{ value.body }}
+        </p>
+        <div class="d-flex justify-space-around">
+            <v-radio-group
+                :rules="[
+                    (v) =>
+                        !!v ||
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.required'
+                        ),
+                ]"
+                row
+                class="radio-group"
+                v-model="value.response"
+            >
+                <v-radio
+                    class="likert-radio"
+                    color="green"
+                    :label="
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.scale.strongly_agree'
+                        )
+                    "
+                    value="5"
+                ></v-radio>
+                <v-radio
+                    class="likert-radio"
+                    color="light-green"
+                    :label="
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.scale.agree'
+                        )
+                    "
+                    value="4"
+                ></v-radio>
+                <v-radio
+                    class="likert-radio"
+                    color="amber"
+                    :label="
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.scale.neutral'
+                        )
+                    "
+                    value="3"
+                ></v-radio>
+                <v-radio
+                    class="likert-radio"
+                    color="orange"
+                    :label="
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.scale.disagree'
+                        )
+                    "
+                    value="2"
+                ></v-radio>
+                <v-radio
+                    class="likert-radio"
+                    color="red"
+                    :label="
+                        $t(
+                            'plugin.core.components.content.blocks.feedback.scale.strongly_disagree'
+                        )
+                    "
+                    value="1"
+                ></v-radio>
+            </v-radio-group>
+        </div>
+    </v-container>
+</template>
+
+<script>
+export default {
+    name: 'FeedbackQuestionLikert',
+    props: {
+        value: { type: Object, required: true, default: '' },
+    },
+    data() {
+        return {}
+    },
+}
+</script>
+<style scoped>
+.question {
+    font-weight: bold;
+}
+.radio-group {
+    width: 100% !important;
+}
+.likert-radio {
+    margin-left: 55px;
+}
+</style>

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionOpenResponse.vue

@@ -0,0 +1,45 @@
+<template>
+    <v-container fluid>
+        <p class="question">
+            {{ value.body }}
+        </p>
+        <div v-if="!feedbackExist">
+            <TextEditor v-model="value.response"></TextEditor>
+        </div>
+        <div v-else>
+            <div v-if="value.response">
+                <TextViewer v-model="value.response" text-viewer></TextViewer>
+            </div>
+            <div v-else>
+                <TextViewer v-model="noResponse" text-viewer></TextViewer>
+            </div>
+        </div>
+    </v-container>
+</template>
+<script>
+import TextEditor from '~/components/Text/TextEditor.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
+export default {
+    name: 'FeedbackQuestionOpenResponse',
+    components: {
+        TextEditor,
+        TextViewer,
+    },
+    props: {
+        value: { type: Object, required: true, default: '' },
+        feedbackExist: { type: Boolean, required: false, default: false },
+    },
+    data() {
+        return {
+            noResponse: this.$t(
+                'plugin.core.components.content.blocks.feedback.no_response_entered'
+            ),
+        }
+    },
+}
+</script>
+<style scoped>
+.question {
+    font-weight: bold;
+}
+</style>

package/components/Content/Blocks/FeedbackTemplates/FeedbackQuestionTrueFalse.vue

@@ -0,0 +1,55 @@
+<template>
+    <v-container fluid>
+        <p class="question">
+            {{ value.body }}
+        </p>
+        <v-radio-group
+            :rules="[
+                (v) =>
+                    !!v ||
+                    $t(
+                        'plugin.core.components.content.blocks.feedback.required'
+                    ),
+            ]"
+            row
+            v-model="value.response"
+            class="radio-group"
+        >
+            <v-radio
+                class="likert-radio"
+                :label="
+                    $t('plugin.core.components.content.blocks.feedback.yes')
+                "
+                value="true"
+            ></v-radio>
+            <v-radio
+                class="likert-radio"
+                :label="$t('plugin.core.components.content.blocks.feedback.no')"
+                value="false"
+            ></v-radio>
+        </v-radio-group>
+    </v-container>
+</template>
+
+<script>
+export default {
+    name: 'FeedbackQuestionTrueFalse',
+    props: {
+        value: { type: Object, required: true, default: '' },
+    },
+    data() {
+        return {}
+    },
+}
+</script>
+<style scoped>
+.question {
+    font-weight: bold;
+}
+.radio-group {
+    width: 100% !important;
+}
+.likert-radio {
+    margin-left: 55px;
+}
+</style>

package/components/Content/Blocks/Image.vue

@@ -0,0 +1,116 @@
+<template>
+    <div>
+        <p v-if="!block.body">
+            <v-img
+                class="img-holder"
+                src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNCyiabrwN6YV6s3Mj5IzREZCnQqqwT4A3Bw&usqp=CAU"
+                contain
+            ></v-img>
+        </p>
+        <v-responsive :aspect-ratio="aspectRatio">
+            <v-img
+                v-if="block.body"
+                :alt="block.metadata.config.alt"
+                :aria-describedby="block.metadata.config.aria_described_by"
+                class="img-display"
+                :src="block.body"
+                contain
+            >
+                <template v-slot:placeholder>
+                    <v-skeleton-loader
+                        type="image, image, list-item-avatar"
+                        height="100%"
+                        width="100%"
+                    ></v-skeleton-loader>
+                </template>
+            </v-img>
+        </v-responsive>
+        <TextViewer
+            v-if="describedById"
+            v-model="describedByText"
+            :id="describedById"
+            class="sr-only"
+        ></TextViewer>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import Crypto from '~/helpers/Crypto'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockImage',
+    extends: BaseContentBlock,
+    components: {
+        TextViewer,
+    },
+    data() {
+        return {
+            aspectRatio: undefined,
+        }
+    },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.alt)) {
+            this.block.metadata.config.alt = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.aria_describedby)) {
+            this.block.metadata.config.aria_describedby = ''
+        }
+    },
+    data() {
+        return {
+            id: 'image_' + Crypto.id(),
+        }
+    },
+    computed: {
+        describedById() {
+            // If there's a described by
+            if (_.get(this.block.metadata, 'config.aria_describedby', null)) {
+                return this.id
+            } else {
+                return null
+            }
+        },
+        describedByText() {
+            return _.get(this.block.metadata, 'config.aria_describedby', null)
+        },
+    },
+    watch: {
+        value(newValue) {
+            if (
+                !_.isEmpty(newValue.metadata.config.height) &&
+                !_.isEmpty(newValue.metadata.config.width)
+            ) {
+                this.aspectRatio =
+                    newValue.metadata.config.width +
+                    '/' +
+                    newValue.metadata.config.height
+            } else {
+                this.aspectRatio = undefined
+            }
+        },
+    },
+    mounted() {},
+    methods: {},
+}
+</script>
+
+<style scoped>
+.img-display {
+    border-radius: 3px;
+}
+.img-holder {
+    max-height: 300px;
+}
+::v-deep .v-skeleton-loader.v-skeleton-loader--is-loading {
+    .v-skeleton-loader__image {
+        height: 100%;
+    }
+}
+</style>

package/components/Content/Blocks/Math.vue

@@ -0,0 +1,87 @@
+<template>
+    <div>
+        <br />
+        <math-expression-editor
+            v-if="!render && block.metadata.config.expand"
+            :key="key"
+            v-model="block.metadata.config.formula"
+            mode="standalone"
+            :value="block.metadata.config.formula"
+        ></math-expression-editor>
+        <div
+            v-if="!block.metadata.config.expand"
+            class="text-viewer"
+            v-html="formulaConvertedToHtml"
+        ></div>
+        <br />
+    </div>
+</template>
+
+<script>
+import MathExpressionEditor from '../../utils/MathExpressionEditor'
+import MathHelper from '../../../helpers/MathHelper'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Crypto from '~/helpers/Crypto'
+import _ from 'lodash'
+
+export default {
+    name: 'ContentBlockMath',
+    components: { MathExpressionEditor },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = 'Math Editor'
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.formula)) {
+            this.block.metadata.config.formula = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.expand)) {
+            this.block.metadata.config.expand = false
+        }
+    },
+    data() {
+        return {
+            key: '0',
+        }
+    },
+    computed: {
+        formulaConvertedToHtml() {
+            if (_.isEmpty(this.block.metadata.config.formula)) {
+                this.block.metadata.config.formula = ''
+            }
+            return MathHelper.convertMathContentToHtml(
+                this.block.metadata.config.formula
+            )
+        },
+    },
+    watch: {
+        value(newValue) {
+            if (newValue.metadata.config.expand === true) {
+                this.key = Crypto.id()
+            }
+        },
+    },
+    methods: {},
+}
+</script>
+
+<style scoped>
+.text-viewer {
+    min-height: 100px;
+}
+@media (max-width: 600px) {
+    .text-viewer {
+        display: flex !important;
+        flex-wrap: wrap !important;
+    }
+}
+</style>

package/components/Content/Blocks/Tab.vue

@@ -0,0 +1,89 @@
+<template>
+    <div>
+        <v-container>
+            <v-tabs background-color="primary">
+                <v-tab
+                    v-for="(tab, tabIndex) in block.metadata.config.items"
+                    :key="tabIndex"
+                >
+                    {{
+                        tab.tabHeader === '' || tab.tabHeader === null
+                            ? 'Item ' + (tabIndex + 1)
+                            : tab.tabHeader
+                    }}
+                </v-tab>
+                <v-tab-item
+                    v-for="(tabContent, tabContentIndex) in block.metadata
+                        .config.items"
+                    :key="'tabContent ' + tabContentIndex"
+                >
+                    <v-container>
+                        <TextViewer
+                            v-if="!tabContent.expand"
+                            v-model="
+                                tabContent.content === '' ||
+                                tabContent.content === null
+                                    ? 'Item ' + (tabContentIndex + 1)
+                                    : tabContent.content
+                            "
+                            text-viewer
+                        ></TextViewer>
+                        <TextEditor
+                            v-if="!render && tabContent.expand"
+                            v-model="tabContent.content"
+                        ></TextEditor>
+                    </v-container>
+                </v-tab-item>
+            </v-tabs>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'ContentBlockTab',
+    components: {
+        TextEditor,
+        TextViewer,
+    },
+    extends: BaseContentBlock,
+    beforeMount() {
+        this.block.body = 'tab'
+        if (_.isEmpty(this.block.metadata.config.items)) {
+            const defaultObject = {
+                tabHeader: '',
+                expand: false,
+                content: '',
+            }
+            this.block.metadata.config.items = []
+            this.block.metadata.config.items.push(defaultObject)
+        } else {
+            this.block.metadata.config.items.forEach((element) => {
+                if (element.content == null) {
+                    element.content = ''
+                }
+                if (element.tabHeader == null) {
+                    element.tabHeader = ''
+                }
+            })
+        }
+    },
+    data() {
+        return {}
+    },
+    methods: {
+        async onBeforeSave() {
+            this.block.metadata.config.items.forEach((element) => {
+                element.expand = false
+            })
+        },
+    },
+}
+</script>
+
+<style scoped></style>

package/components/Content/Blocks/Table.vue

@@ -0,0 +1,68 @@
+<template>
+    <v-container>
+        <TextEditor
+            v-if="!render && block.metadata.config.expand"
+            v-model="block.body"
+        />
+        <TextViewer
+            v-if="render || !block.metadata.config.expand"
+            v-model="block.body"
+        />
+    </v-container>
+</template>
+<script>
+import _ from 'lodash'
+import TextViewer from '~/components/Text/TextViewer.vue'
+import TextEditor from '~/components/Text/TextEditor.vue'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+export default {
+    name: 'ContentBlockTable',
+    components: { TextEditor, TextViewer },
+    extends: BaseContentBlock,
+    beforeMount() {
+        // Apply the default config
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = this.tablePreset
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = { expand: false }
+        }
+    },
+    data() {
+        return {
+            tablePreset: `<table style="border-collapse: collapse; width: 99.951%;" border="1">
+                            <tbody>
+                            <tr>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7555%;">&nbsp;</td>
+                            </tr>
+                            <tr>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7555%;">&nbsp;</td>
+                            </tr>
+                            <tr>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7555%;">&nbsp;</td>
+                            </tr>
+                            <tr>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7426%;">&nbsp;</td>
+                            <td style="width: 19.7555%;">&nbsp;</td>
+                            </tr>
+                            </tbody>
+                            </table>`,
+        }
+    },
+    mounted() {},
+    methods: {},
+}
+</script>
+
+<style scoped></style>