fix: add support for formatting vue files

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "parser": "vue-eslint-parser",
+  "plugins": [
+    "vue"
+  ],
+  "extends": [
+    "@warp-ds",
+    "plugin:vue/vue3-essential",
+    "plugin:prettier/recommended"
+  ]
+}

components/alert/index.js

@@ -1,4 +1,5 @@
 import wAlert from './w-alert.vue';
+
 import { installer } from '#util';
 
 export const Alert = { install: installer([wAlert]) };

components/alert/stories/Alert.stories.js

@@ -1,8 +1,9 @@
-import wAlert from '../w-alert.vue';
 import { ref } from 'vue';
 
 import { within, expect } from '@storybook/test';
 
+import wAlert from '../w-alert.vue';
+
 const showAlert = ref(true);
 
 export default { title: 'FeedbackIndicators/Alert', component: wAlert };
@@ -19,7 +20,10 @@ export const MainStory = Template.bind({});
 MainStory.args = { info: true, title: 'I am a title' };
 
 export const NegativeAlertTask = Template.bind({});
-NegativeAlertTask.args = { negative: true, title: 'This is "negative" variant of the alert component' };
+NegativeAlertTask.args = {
+  negative: true,
+  title: 'This is "negative" variant of the alert component',
+};
 NegativeAlertTask.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await expect(canvas.getByRole('alert')).toBeInTheDocument();

components/alert/w-alert.vue

@@ -1,18 +1,20 @@
 <script setup>
-import { computed } from "vue";
-import { wExpandTransition } from "#generics";
-import { createModel, modelProps } from "create-v-model";
-import { alert as ccAlert } from "@warp-ds/css/component-classes";
-import IconError16 from "@warp-ds/icons/vue/error-16";
-import IconSuccess16 from "@warp-ds/icons/vue/success-16";
-import IconWarning16 from "@warp-ds/icons/vue/warning-16";
-import IconInfo16 from "@warp-ds/icons/vue/info-16";
+import { computed } from 'vue';
+
+import { alert as ccAlert } from '@warp-ds/css/component-classes';
+import IconError16 from '@warp-ds/icons/vue/error-16';
+import IconInfo16 from '@warp-ds/icons/vue/info-16';
+import IconSuccess16 from '@warp-ds/icons/vue/success-16';
+import IconWarning16 from '@warp-ds/icons/vue/warning-16';
+import { createModel, modelProps } from 'create-v-model';
+
+import { wExpandTransition } from '#generics';
 
 const props = defineProps({
   title: String,
   role: {
     type: String,
-    default: "alert",
+    default: 'alert',
   },
   negative: Boolean,
   positive: Boolean,
@@ -21,30 +23,33 @@ const props = defineProps({
   ...modelProps(),
 });
 
-const possibleTypeProps = ["negative", "positive", "warning", "info"];
+const possibleTypeProps = ['negative', 'positive', 'warning', 'info'];
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 const model = createModel({ props, emit });
 const alertColorType = computed(() => possibleTypeProps.find((e) => props[e]));
 const activeWrapperClassNames = computed(() => ccAlert[alertColorType.value]);
-const activeIconClassNames = computed(
-  () => ccAlert[`${alertColorType.value}Icon`]
-);
-const wrapperClass = computed(() => [
-  ccAlert.alert,
-  activeWrapperClassNames.value,
-]);
+const activeIconClassNames = computed(() => ccAlert[`${alertColorType.value}Icon`]);
+const wrapperClass = computed(() => [ccAlert.alert, activeWrapperClassNames.value]);
 const iconClass = computed(() => [ccAlert.icon, activeIconClassNames.value]);
 
-const iconComponent = computed(() =>
-  props.negative
-    ? IconError16
-    : props.positive
-    ? IconSuccess16
-    : props.warning
-    ? IconWarning16
-    : IconInfo16
-);
+const iconComponent = computed(() => {
+  let icon;
+  if (props.negative) {
+    icon = IconError16;
+  } else if (props.positive) {
+    icon = IconSuccess16;
+  } else if (props.warning) {
+    icon = IconWarning16;
+  } else {
+    icon = IconInfo16;
+  }
+  return icon;
+});
+</script>
+
+<script>
+export default { name: 'wAlert' };
 </script>
 
 <template>
@@ -57,15 +62,11 @@ const iconComponent = computed(() =>
             <component :is="iconComponent" />
           </div>
           <div :class="ccAlert.textWrapper" data-test="content">
-            <h3 :class="ccAlert.title" v-if="title">{{ title }}</h3>
+            <h3 v-if="title" :class="ccAlert.title">{{ title }}</h3>
             <slot />
           </div>
         </div>
       </div>
     </w-expand-transition>
   </div>
 </template>
-
-<script>
-export default { name: "wAlert" };
-</script>

components/attention/w-attention-arrow.vue

@@ -1,27 +1,28 @@
 <script setup>
-  import { computed } from 'vue'
-  import { opposites, arrowDirectionClassname } from '@warp-ds/core/attention'
-  import { props as attentionProps, getVariantClasses } from './attentionUtil.js'
-  import { attention as ccAttention } from '@warp-ds/css/component-classes'
-
-  const props = defineProps({
-    ...attentionProps,
-    direction: String
-  })
-  const arrowDirection = computed(() => opposites[props.direction])
+import { computed } from 'vue';
 
-  const arrowClasses = computed(() => [
-    ccAttention.arrowBase,
-    ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection.value)}`],
-    getVariantClasses(props).arrow
-  ]);
-</script>
+import { opposites, arrowDirectionClassname } from '@warp-ds/core/attention';
+import { attention as ccAttention } from '@warp-ds/css/component-classes';
 
-<template>
-  <div :class="arrowClasses"/>
-</template>
+import { props as attentionProps, getVariantClasses } from './attentionUtil.js';
+
+const props = defineProps({
+  ...attentionProps,
+  direction: String,
+});
+const arrowDirection = computed(() => opposites[props.direction]);
+
+const arrowClasses = computed(() => [
+  ccAttention.arrowBase,
+  ccAttention[`arrowDirection${arrowDirectionClassname(arrowDirection.value)}`],
+  getVariantClasses(props).arrow,
+]);
+</script>
 
 <script>
 export default { name: 'wAttentionArrow' };
 </script>
 
+<template>
+  <div :class="arrowClasses" />
+</template>