Merge pull request #82 from rozsazoltan/v-html-support

feat: Raw HTML support
fatihsolhan · Feb 9, 2024 · 8aa02b3 · 8aa02b3
2 parents ca97953 + 4b7a066
commit 8aa02b3
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -77,7 +77,8 @@ export default defineComponent({
         },
         content: {
           title: 'Nice to see you here!',
-          description: 'You can use v-onboarding to show some information about your app, or to explain how to use it',
+          description: 'You can use <strong>v-onboarding</strong> to show some information about your app, or to explain how to use it',
+          html: true
         }
       },
       {

diff --git a/docs/pages/3.props/1.steps.md b/docs/pages/3.props/1.steps.md
@@ -13,6 +13,7 @@ title: steps
   content: {
     title: "..."
     description: "..."
+    html: false
   },
   on: {
     beforeStep: function (options) { ... },
@@ -29,6 +30,7 @@ title: steps
 | `content` | `Object` | **Optional** |
 | `content.title` | `String` | **Optional** | Title to use in onboarding step |
 | `content.description` | `String` | **Optional** | Description to use in onboarding step |
+| `content.html` | `Boolean` | **Optional** | If its set to `true`, the `content.description` will be rendered in the default template using [`v-html`](https://vuejs.org/guide/essentials/template-syntax.html#raw-html) |
 | `on` | `Object` | **Optional** |
 | `on.beforeStep` | `Function` `AsyncFunction` | **Optional** | Function to run before showing the step ([More information](/props/hooks#onBeforeStep)) |
 | `on.afterStep ` | `Function` `AsyncFunction` | **Optional** | Function to run after showing the step ([More information](/props/hooks#onAfterStep)) |

diff --git a/src/components/VOnboardingStep.vue b/src/components/VOnboardingStep.vue
@@ -29,7 +29,12 @@
             </button>
           </div>
           <p
-            v-if="step.content.description"
+            v-if="step.content.description && step.content.html"
+            class="v-onboarding-item__description"
+            v-html="step.content.description"
+          />
+          <p
+            v-else-if="step.content.description"
             class="v-onboarding-item__description"
           >{{ step.content.description }}</p>
           <div class="v-onboarding-item__actions">

diff --git a/src/types/StepEntity.d.ts b/src/types/StepEntity.d.ts
@@ -20,6 +20,7 @@ export interface StepEntity {
   content: {
     title: string;
     description?: string;
+    html?: boolean
   }
   on?: {
     beforeStep?: (options?: onBeforeStepOptions) => void | Promise<void>