-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #29 from formsible/feat/redirect
add component
- Loading branch information
Showing
6 changed files
with
166 additions
and
52 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,37 @@ | ||
| <script setup lang="ts"> | ||
| import { useTimeoutFn } from '@vueuse/core' | ||
| import { onMounted } from 'vue' | ||
| import { ref, watch } from 'vue' | ||
| import type { ActionRedirectProperties } from '~/types' | ||
| // Props declaration | ||
| interface Props { | ||
| display: ActionRedirectProperties | ||
| redirect?: boolean | ||
| } | ||
| const props = defineProps<Props>() | ||
| const props = withDefaults(defineProps<Props>(), { | ||
| redirect: true, | ||
| }) | ||
| const secondsRemaining = ref(props.display.countDown || 3) | ||
| // Countdown complete event | ||
| const onCountdownComplete = () => { | ||
| window.location.href = props.display.url | ||
| } | ||
| const onCountdownComplete = () => (window.location.href = props.display.url) | ||
| // Timeout composable by vusue | ||
| const { start } = useTimeoutFn( | ||
| onCountdownComplete, | ||
| props.display.countDown || 3000, | ||
| ) | ||
| // Interval for timer | ||
| setInterval(() => { | ||
| if (secondsRemaining.value > 0 && props.redirect === true) | ||
| secondsRemaining.value = secondsRemaining.value - 1 | ||
| }, 1000) | ||
| // Hooks | ||
| onMounted(start) | ||
| // Watchers | ||
| watch(secondsRemaining, (newValue) => { | ||
| if (newValue <= 0) onCountdownComplete() | ||
| }) | ||
| </script> | ||
| <template> | ||
| <div class="text-center"> | ||
| <p>You are being directed to {{ display.url }}.</p> | ||
| <p> | ||
| You will be redirected in {{ secondsRemaining }} seconds to | ||
| {{ display.url }}. | ||
| </p> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,42 @@ | ||
| import { Component } from "vue"; | ||
| import type { DisplayComponentType } from "~/types"; | ||
| import { ActionRedirect, EmbedDocument, EmbedSlides, HtmlBlockContent, HtmlBlockList, HtmlBlockMedia, LocaleSelector } from ".."; | ||
| import { | ||
| // Content Block Components | ||
| HtmlBlockContent, | ||
| HtmlBlockList, | ||
| HtmlBlockMedia, | ||
|
|
||
| // Embed Components | ||
| EmbedDocument, | ||
| EmbedSlides, | ||
|
|
||
| // Utility Components | ||
| LocaleSelector, | ||
| ActionRedirect, | ||
| } from ".."; | ||
|
|
||
| /** | ||
| * A collection of display components for rendering various types of content. | ||
| * Each component is mapped to its corresponding DisplayComponentType. | ||
| * | ||
| * Components are grouped into the following categories: | ||
| * - Content Block: Components for rendering structured HTML content | ||
| * - Embed: Components for displaying external documents and presentations | ||
| * - Utility: Components for user interaction and navigation | ||
| */ | ||
| export const displayComponents: Record<DisplayComponentType, Component> = { | ||
| html_block_content: HtmlBlockContent, | ||
| html_block_list: HtmlBlockList, | ||
| html_block_media: HtmlBlockMedia, | ||
| locale_selector: LocaleSelector, | ||
| action_redirect: ActionRedirect, | ||
| embed_slide: EmbedSlides, | ||
| embed_document: EmbedDocument | ||
| } | ||
| // Content Block Components | ||
| html_block_content: HtmlBlockContent, // Renders formatted HTML content | ||
| html_block_list: HtmlBlockList, // Displays structured list content | ||
| html_block_media: HtmlBlockMedia, // Handles media content display | ||
|
|
||
| // Embed Components | ||
| embed_document: EmbedDocument, // Embeds external documents | ||
| embed_slide: EmbedSlides, // Embeds presentation slides | ||
|
|
||
| // Utility Components | ||
| locale_selector: LocaleSelector, // Language/locale selection interface | ||
| action_redirect: ActionRedirect, // Handles navigation redirects | ||
| }; | ||
|
|
||
| export default displayComponents; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,99 @@ | ||
| import { Component } from "vue"; | ||
| import type { InputComponentType } from "~/types"; | ||
| import { Number, Address, Captcha, Checkboxes, DatePicker, Dropdown, Email, FileUpload, ImageChoice, LikertScale, LongText, MultipleChoice, NetPromoterScore, Password, PhoneNumber, Ranking, RatingScale, ShortText, Signature, Slider, TimePicker, Website } from '..' | ||
| import { | ||
| // Text Input Components | ||
| ShortText, | ||
| LongText, | ||
| Email, | ||
| Password, | ||
| Website, | ||
| PhoneNumber, | ||
| Address, | ||
|
|
||
| // Numeric Input Components | ||
| Number, | ||
| Slider, | ||
| RatingScale, | ||
| NetPromoterScore, | ||
| LikertScale, | ||
|
|
||
| // Selection Components | ||
| Dropdown, | ||
| MultipleChoice, | ||
| Checkboxes, | ||
| ImageChoice, | ||
| Ranking, | ||
|
|
||
| // Date & Time Components | ||
| DatePicker, | ||
| TimePicker, | ||
|
|
||
| // Media & File Components | ||
| FileUpload, | ||
| Signature, | ||
| AudioRecorder, | ||
|
|
||
| // Verification Components | ||
| Captcha, | ||
| List, | ||
| DataTable, | ||
| CodeJavascript, | ||
| CodeJson, | ||
| } from '..'; | ||
|
|
||
| /** | ||
| * A collection of input components organized by type and functionality. | ||
| * Each component is mapped to its corresponding InputComponentType. | ||
| * | ||
| * Components are grouped into the following categories: | ||
| * - Text Input: Components for collecting various types of text data | ||
| * - Numeric Input: Components for collecting numerical data and ratings | ||
| * - Selection: Components for choosing from predefined options | ||
| * - Date & Time: Components for temporal data collection | ||
| * - Media & File: Components for handling file uploads and media recording | ||
| * - Verification: Components for user verification | ||
| */ | ||
| export const inputComponents: Record<InputComponentType, Component> = { | ||
| number: Number, | ||
| address: Address, | ||
| captcha: Captcha, | ||
| checkboxes: Checkboxes, | ||
| date_picker: DatePicker, | ||
| dropdown: Dropdown, | ||
| email: Email, | ||
| file_upload: FileUpload, | ||
| image_choice: ImageChoice, | ||
| likert_scale: LikertScale, | ||
| long_text: LongText, | ||
| multiple_choice: MultipleChoice, | ||
| net_promoter_score: NetPromoterScore, | ||
| password: Password, | ||
| phone_number: PhoneNumber, | ||
| ranking: Ranking, | ||
| rating_scale: RatingScale, | ||
| short_text: ShortText, | ||
| signature: Signature, | ||
| slider: Slider, | ||
| time_picker: TimePicker, | ||
| website: Website | ||
| } | ||
| // Text Input Components | ||
| short_text: ShortText, // Single-line text input | ||
| long_text: LongText, // Multi-line text input | ||
| email: Email, // Email address input with validation | ||
| password: Password, // Secure password input field | ||
| website: Website, // URL input with validation | ||
| phone_number: PhoneNumber, // Phone number input with formatting | ||
| address: Address, // Structured address input | ||
| code_javascript: CodeJavascript, | ||
| code_json: CodeJson, | ||
|
|
||
| // Numeric Input Components | ||
| number: Number, // Basic number input | ||
| slider: Slider, // Range selection using a slider | ||
| rating_scale: RatingScale, // Numeric rating (e.g., 1-5 stars) | ||
| net_promoter_score: NetPromoterScore, // 0-10 satisfaction score | ||
| likert_scale: LikertScale, // Agreement scale (e.g., strongly disagree to strongly agree) | ||
|
|
||
| // Selection Components | ||
| dropdown: Dropdown, // Single selection from dropdown | ||
| multiple_choice: MultipleChoice, // Single selection from radio buttons | ||
| checkboxes: Checkboxes, // Multiple selection from checkboxes | ||
| image_choice: ImageChoice, // Selection from image options | ||
| ranking: Ranking, // Ordered ranking of options | ||
|
|
||
| // List Components | ||
| list: List, | ||
| data_table: DataTable, | ||
|
|
||
| // Date & Time Components | ||
| date_picker: DatePicker, // Date selection calendar | ||
| time_picker: TimePicker, // Time selection input | ||
|
|
||
| // Media & File Components | ||
| file_upload: FileUpload, // File upload functionality | ||
| signature: Signature, // Digital signature capture | ||
| audio_recorder: AudioRecorder, // Audio recording functionality | ||
|
|
||
| // Verification Components | ||
| captcha: Captcha, // CAPTCHA verification | ||
| }; | ||
|
|
||
| export default inputComponents; |