3 files changed, 109 insertions, 109 deletions
diff --git a/src/ui/c-input-text/c-input-text.demo.vue b/src/ui/c-input-text/c-input-text.demo.vue
index 5a5fa99..b027787 100644
--- a/src/ui/c-input-text/c-input-text.demo.vue
+++ b/src/ui/c-input-text/c-input-text.demo.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+import { useValidation } from '@/composable/validation';
+
+const value = ref('value');
+const valueLong = ref(
+  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?',
+);
+
+const validationRules = [{ message: 'Length must be > 10', validator: (value: string) => value.length > 10 }];
+
+const validation = useValidation({
+  source: value,
+  rules: validationRules,
+});
+</script>
+
 <template>
   <h2>Default</h2>
 
@@ -58,19 +74,3 @@
     clearable
   />
 </template>
-
-<script lang="ts" setup>
-import { useValidation } from '@/composable/validation';
-
-const value = ref('value');
-const valueLong = ref(
-  'Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, est modi iusto repellendus fuga accusantium atque at magnam aliquam eum explicabo vero quia, nobis quasi quis! Earum amet quam a?',
-);
-
-const validationRules = [{ message: 'Length must be > 10', validator: (value: string) => value.length > 10 }];
-
-const validation = useValidation({
-  source: value,
-  rules: validationRules,
-});
-</script>
diff --git a/src/ui/c-input-text/c-input-text.test.ts b/src/ui/c-input-text/c-input-text.test.ts
index 69f4046..2d1908d 100644
--- a/src/ui/c-input-text/c-input-text.test.ts
+++ b/src/ui/c-input-text/c-input-text.test.ts
@@ -1,9 +1,9 @@
-import { describe, expect, it, beforeEach } from 'vitest';
-import { shallowMount, mount } from '@vue/test-utils';
-import { setActivePinia, createPinia } from 'pinia';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { mount, shallowMount } from '@vue/test-utils';
+import { createPinia, setActivePinia } from 'pinia';
 import _ from 'lodash';
-import { useValidation } from '@/composable/validation';
 import CInputText from './c-input-text.vue';
+import { useValidation } from '@/composable/validation';
 
 describe('CInputText', () => {
   beforeEach(() => {
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index cd5f067..90d7152 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -1,95 +1,35 @@
-<template>
-  <div
-    class="c-input-text"
-    :class="{ disabled, error: !validation.isValid, 'label-left': labelPosition === 'left', multiline }"
-  >
-    <label v-if="label" :for="id" class="label"> {{ label }} </label>
-
-    <div class="feedback-wrapper">
-      <div ref="inputWrapperRef" class="input-wrapper">
-        <slot name="prefix" />
-
-        <textarea
-          v-if="multiline"
-          :id="id"
-          ref="textareaRef"
-          v-model="value"
-          class="input"
-          :placeholder="placeholder"
-          :readonly="readonly"
-          :disabled="disabled"
-          :data-test-id="testId"
-          :autocapitalize="autocapitalize ?? (rawText ? 'off' : undefined)"
-          :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
-          :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
-          :spellcheck="spellcheck ?? (rawText ? false : undefined)"
-          :rows="rows"
-        />
-
-        <input
-          v-else
-          :id="id"
-          v-model="value"
-          :type="htmlInputType"
-          class="input"
-          size="1"
-          :placeholder="placeholder"
-          :readonly="readonly"
-          :disabled="disabled"
-          :data-test-id="testId"
-          :autocapitalize="autocapitalize ?? (rawText ? 'off' : undefined)"
-          :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
-          :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
-          :spellcheck="spellcheck ?? (rawText ? false : undefined)"
-        />
-
-        <c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">
-          <icon-mdi-close />
-        </c-button>
-
-        <c-button v-if="type === 'password'" variant="text" circle size="small" @click="showPassword = !showPassword">
-          <icon-mdi-eye v-if="!showPassword" />
-          <icon-mdi-eye-off v-if="showPassword" />
-        </c-button>
-        <slot name="suffix" />
-      </div>
-      <span v-if="!validation.isValid" class="feedback"> {{ validation.message }} </span>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
-import { generateRandomId } from '@/utils/random';
-import { useValidation, type UseValidationRule } from '@/composable/validation';
 import type { Ref } from 'vue';
-import { useTheme } from './c-input-text.theme';
 import { useAppTheme } from '../theme/themes';
+import { useTheme } from './c-input-text.theme';
+import { generateRandomId } from '@/utils/random';
+import { type UseValidationRule, useValidation } from '@/composable/validation';
 
 const props = withDefaults(
   defineProps<{
-    value?: string;
-    id?: string;
-    placeholder?: string;
-    label?: string;
-    readonly?: boolean;
-    disabled?: boolean;
-    validationRules?: UseValidationRule<string>[];
-    validationWatch?: Ref<unknown>[];
-    validation?: ReturnType<typeof useValidation>;
-    labelPosition?: 'top' | 'left';
-    labelWidth?: string;
-    labelAlign?: 'left' | 'right';
-    clearable?: boolean;
-    testId?: string;
-    autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | 'on' | 'off' | string;
-    autocomplete?: 'on' | 'off' | string;
-    autocorrect?: 'on' | 'off' | string;
-    spellcheck?: 'true' | 'false' | boolean;
-    rawText?: boolean;
-    type?: 'text' | 'password';
-    multiline?: boolean;
-    rows?: number | string;
-    autosize?: boolean;
+    value?: string
+    id?: string
+    placeholder?: string
+    label?: string
+    readonly?: boolean
+    disabled?: boolean
+    validationRules?: UseValidationRule<string>[]
+    validationWatch?: Ref<unknown>[]
+    validation?: ReturnType<typeof useValidation>
+    labelPosition?: 'top' | 'left'
+    labelWidth?: string
+    labelAlign?: 'left' | 'right'
+    clearable?: boolean
+    testId?: string
+    autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | 'on' | 'off' | string
+    autocomplete?: 'on' | 'off' | string
+    autocorrect?: 'on' | 'off' | string
+    spellcheck?: 'true' | 'false' | boolean
+    rawText?: boolean
+    type?: 'text' | 'password'
+    multiline?: boolean
+    rows?: number | string
+    autosize?: boolean
   }>(),
   {
     value: '',
@@ -123,9 +63,9 @@ const showPassword = ref(false);
 
 const { id, placeholder, label, validationRules, labelPosition, labelWidth, labelAlign, autosize } = toRefs(props);
 
-const validation =
-  props.validation ??
-  useValidation({
+const validation
+  = props.validation
+  ?? useValidation({
     rules: validationRules,
     source: value,
     watch: props.validationWatch,
@@ -170,6 +110,66 @@ const htmlInputType = computed(() => {
 });
 </script>
 
+<template>
+  <div
+    class="c-input-text"
+    :class="{ disabled, 'error': !validation.isValid, 'label-left': labelPosition === 'left', multiline }"
+  >
+    <label v-if="label" :for="id" class="label"> {{ label }} </label>
+
+    <div class="feedback-wrapper">
+      <div ref="inputWrapperRef" class="input-wrapper">
+        <slot name="prefix" />
+
+        <textarea
+          v-if="multiline"
+          :id="id"
+          ref="textareaRef"
+          v-model="value"
+          class="input"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          :disabled="disabled"
+          :data-test-id="testId"
+          :autocapitalize="autocapitalize ?? (rawText ? 'off' : undefined)"
+          :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
+          :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
+          :spellcheck="spellcheck ?? (rawText ? false : undefined)"
+          :rows="rows"
+        />
+
+        <input
+          v-else
+          :id="id"
+          v-model="value"
+          :type="htmlInputType"
+          class="input"
+          size="1"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          :disabled="disabled"
+          :data-test-id="testId"
+          :autocapitalize="autocapitalize ?? (rawText ? 'off' : undefined)"
+          :autocomplete="autocomplete ?? (rawText ? 'off' : undefined)"
+          :autocorrect="autocorrect ?? (rawText ? 'off' : undefined)"
+          :spellcheck="spellcheck ?? (rawText ? false : undefined)"
+        >
+
+        <c-button v-if="clearable && value" variant="text" circle size="small" @click="value = ''">
+          <icon-mdi-close />
+        </c-button>
+
+        <c-button v-if="type === 'password'" variant="text" circle size="small" @click="showPassword = !showPassword">
+          <icon-mdi-eye v-if="!showPassword" />
+          <icon-mdi-eye-off v-if="showPassword" />
+        </c-button>
+        <slot name="suffix" />
+      </div>
+      <span v-if="!validation.isValid" class="feedback"> {{ validation.message }} </span>
+    </div>
+  </div>
+</template>
+
 <style lang="less" scoped>
 .c-input-text {
   display: inline-flex;