chore(all): format vue (VIV-1621) (#1625)

* Remove vue files from prettierignore * Format files * Fix linter warnings
Vonage · Mar 14, 2024 · df5c928 · df5c928
1 parent 661b83c
commit df5c928
Show file tree

Hide file tree

Showing 357 changed files with 3,043 additions and 2,482 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -12,5 +12,4 @@ package-lock.json
 **/*.ts
 **/*.mts
 **/*.cts
-**/*.vue
 **/*.md
diff --git a/apps/vue-docs/.eslintrc.json b/apps/vue-docs/.eslintrc.json
@@ -29,6 +29,7 @@
 		},
 		{
 			"files": ["*.vue"],
+			"extends": ["prettier"],
 			"rules": {
 				"vue/multi-word-component-names": 0,
 				"vue/no-multiple-template-root": 0,

diff --git a/apps/vue-docs/docs/custom/CodeTab.vue b/apps/vue-docs/docs/custom/CodeTab.vue
@@ -1,90 +1,92 @@
 <template>
-  <div class="container">
-    <div class="example-wrapper vvd-root">
-      <div
-        class="example"
-        :class="{
-          'example--no-padding': noPadding,
-          'example--visible-overflow': visibleOverflow,
-          'example--no-overflow': noOverflow,
-        }"
-      >
-        <slot name="example" />
-      </div>
-    </div>
-    <div class="controls">
-      <VButton
-        icon="code-solid"
-        :appearance="isCodeVisible ? 'filled' : 'ghost'"
-        @click="isCodeVisible = !isCodeVisible"
-      />
-    </div>
-    <div v-if="isCodeVisible" class="code">
-      <slot name="code" />
-    </div>
-  </div>
+	<div class="container">
+		<div class="example-wrapper vvd-root">
+			<div
+				class="example"
+				:class="{
+					'example--no-padding': noPadding,
+					'example--visible-overflow': visibleOverflow,
+					'example--no-overflow': noOverflow,
+				}"
+			>
+				<slot name="example" />
+			</div>
+		</div>
+		<div class="controls">
+			<VButton
+				icon="code-solid"
+				:appearance="isCodeVisible ? 'filled' : 'ghost'"
+				@click="isCodeVisible = !isCodeVisible"
+			/>
+		</div>
+		<div v-if="isCodeVisible" class="code">
+			<slot name="code" />
+		</div>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { defineClientComponent } from 'vitepress';
 import { ref } from 'vue';
 
 defineProps({
-  noPadding: Boolean,
-  visibleOverflow: Boolean,
-  noOverflow: Boolean,
+	noPadding: Boolean,
+	visibleOverflow: Boolean,
+	noOverflow: Boolean,
 });
 
-const VButton = defineClientComponent(async () => (await import('@vonage/vivid-vue')).VButton);
+const VButton = defineClientComponent(
+	async () => (await import('@vonage/vivid-vue')).VButton
+);
 
 const isCodeVisible = ref(false);
 </script>
 
 <style lang="scss" scoped>
 .container {
-  display: flex;
-  flex-direction: column;
+	display: flex;
+	flex-direction: column;
 }
 
 .controls {
-  border-top: 1px solid lightgray;
-  padding: 4px 8px;
-  display: flex;
-  flex-direction: row-reverse;
+	border-top: 1px solid lightgray;
+	padding: 4px 8px;
+	display: flex;
+	flex-direction: row-reverse;
 
-  border-left: 1px solid lightgray;
-  border-right: 1px solid lightgray;
-  border-bottom: 1px solid lightgray;
+	border-left: 1px solid lightgray;
+	border-right: 1px solid lightgray;
+	border-bottom: 1px solid lightgray;
 }
 
 .example {
-  background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23F5F5F5%22%2F%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A);
-  padding: 16px;
+	background-image: url(data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23F5F5F5%22%2F%3E%0A%3Crect%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%2210%22%20height%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%0A%3C%2Fsvg%3E%0A);
+	padding: 16px;
 
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border: 1px solid lightgray;
-  overflow-x: auto;
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	border: 1px solid lightgray;
+	overflow-x: auto;
 
-  transform: translateX(0);
+	transform: translateX(0);
 
-  &--no-padding {
-    padding: 0;
-  }
+	&--no-padding {
+		padding: 0;
+	}
 
-  &--no-overflow {
-    overflow: hidden;
-  }
+	&--no-overflow {
+		overflow: hidden;
+	}
 
-  &--visible-overflow {
-    overflow: visible;
-  }
+	&--visible-overflow {
+		overflow: visible;
+	}
 }
 .code {
-  :deep([class*='language-']) {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    margin: 0;
-  }
+	:deep([class*='language-']) {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+		margin: 0;
+	}
 }
 </style>
diff --git a/apps/vue-docs/docs/custom/Layout.vue b/apps/vue-docs/docs/custom/Layout.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-    <Layout />
-  </div>
+	<div>
+		<Layout />
+	</div>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue b/apps/vue-docs/docs/examples/components/accordion/ExpandedExample.vue
@@ -1,10 +1,18 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item 1" expanded> This is the first item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 4"> This is the fourth item's accordion body. </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item 1" expanded>
+			This is the first item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 2">
+			This is the second item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 3">
+			This is the third item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 4">
+			This is the fourth item's accordion body.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue b/apps/vue-docs/docs/examples/components/accordion/MultiModeExample.vue
@@ -1,10 +1,18 @@
 <template>
-  <VAccordion expand-mode="multi">
-    <VAccordionItem heading="Accordion item 1" expanded> This is the first item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 2"> This is the second item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 3"> This is the third item's accordion body. </VAccordionItem>
-    <VAccordionItem heading="Accordion item 4"> This is the fourth item's accordion body. </VAccordionItem>
-  </VAccordion>
+	<VAccordion expand-mode="multi">
+		<VAccordionItem heading="Accordion item 1" expanded>
+			This is the first item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 2">
+			This is the second item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 3">
+			This is the third item's accordion body.
+		</VAccordionItem>
+		<VAccordionItem heading="Accordion item 4">
+			This is the fourth item's accordion body.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/ExpandedExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Click to toggle accordion item" expanded>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Click to toggle accordion item" expanded>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/HeadingExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with heading">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with heading">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/HeadingLevelExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="my heading" heading-level="3">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="my heading" heading-level="3">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/IconExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with icon" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with icon" icon="chat-solid">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/IconTrailingExample.vue
@@ -1,9 +1,13 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with icon-trailing" icon="chat-solid" icon-trailing>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem
+			heading="Accordion item with icon-trailing"
+			icon="chat-solid"
+			icon-trailing
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/MetaExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item with metadata" meta="meta-data">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item with metadata" meta="meta-data">
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/NoIndicatorExample.vue
@@ -1,9 +1,9 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="Accordion item without indicator" no-indicator>
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem heading="Accordion item without indicator" no-indicator>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 
 <script setup lang="ts">

diff --git a/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue b/apps/vue-docs/docs/examples/components/accordionItem/SizeExample.vue
@@ -1,15 +1,24 @@
 <template>
-  <VAccordion>
-    <VAccordionItem heading="normal accordion item" meta="meta-data" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
-  <hr />
-  <VAccordion>
-    <VAccordionItem heading="condensed accordion item" size="condensed" meta="meta-data" icon="chat-solid">
-      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-    </VAccordionItem>
-  </VAccordion>
+	<VAccordion>
+		<VAccordionItem
+			heading="normal accordion item"
+			meta="meta-data"
+			icon="chat-solid"
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
+	<hr />
+	<VAccordion>
+		<VAccordionItem
+			heading="condensed accordion item"
+			size="condensed"
+			meta="meta-data"
+			icon="chat-solid"
+		>
+			Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+		</VAccordionItem>
+	</VAccordion>
 </template>
 <script setup lang="ts">
 import { VAccordion, VAccordionItem } from '@vonage/vivid-vue';

diff --git a/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue b/apps/vue-docs/docs/examples/components/action-group/ActionGroupExample.vue
@@ -1,10 +1,10 @@
 <template>
-  <VActionGroup>
-    <VButton icon="reply-line" />
-    <VButton label="copy" />
-    <VButton label="paste" />
-    <VButton label="submit" />
-  </VActionGroup>
+	<VActionGroup>
+		<VButton icon="reply-line" />
+		<VButton label="copy" />
+		<VButton label="paste" />
+		<VButton label="submit" />
+	</VActionGroup>
 </template>
 
 <script setup lang="ts">