### Vue FloatLabel Input Group Example

Source: https://frontend-design.jennifersoft.com/form-input/input-group

Demonstrates the FloatLabel component within an input group, allowing for prefixed and suffixed text or icons. It utilizes Vue's reactivity system with `ref` for managing input values.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, SvgIcon, ICON_TYPE } from "@jennifersoft/vue-components-v2";
const textValue1 = ref('');
const textValue2 = ref('');
</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                홈페이지
            </input-group-addon>
            <input-text v-model="textValue1" :placeholder="'jennifersoft'" />
            <input-group-addon>
                .com
            </input-group-addon>
        </input-group>
        <input-group>
            <input-group-addon>
                <svg-icon :icon="ICON_TYPE.user" :width="20" :height="20" />
            </input-group-addon>
            <input-text v-model="textValue2" :placeholder="'Username'" />
        </input-group>
    </div>
</template>
```

--------------------------------

### Vue Checkbox in Input Group Example

Source: https://frontend-design.jennifersoft.com/form-input/input-group

Illustrates using the `Checkbox` component alongside `InputText` within an input group. This setup is useful for scenarios requiring a checkbox to be associated with an input field, managed via Vue's `ref`.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, Checkbox } from "@jennifersoft/vue-components-v2";
const textValue5 = ref('');
const textValue6 = ref('');

const checked1 = ref(false);
const checked2 = ref(false);


</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                <checkbox v-model="checked1" />
            </input-group-addon>
            <input-text v-model="textValue5" :placeholder="'Username'" />
        </input-group>
        <input-group>
            <input-text v-model="textValue6" :placeholder="'Website'" />
            <input-group-addon>
                <checkbox v-model="checked2" />
            </input-group-addon>
        </input-group>
    </div>
</template>
```

--------------------------------

### Vue Button Integration in Input Group

Source: https://frontend-design.jennifersoft.com/form-input/input-group

Shows how to incorporate buttons within an input group for search functionalities. This example uses `Btn` and `InputText` components from `@jennifersoft/vue-components-v2`.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { InputGroup, InputGroupAddon, InputText, Btn, ICON_TYPE } from "@jennifersoft/vue-components-v2";
const textValue3 = ref('');
const textValue4 = ref('');


</script>
<template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <input-group>
            <input-group-addon>
                <btn type="text" text="Search" />
            </input-group-addon>
            <input-text v-model="textValue3" :placeholder="'Keyword'" />
        </input-group>
        <input-group>
            <input-text v-model="textValue4" :placeholder="'Keyword'" />
            <input-group-addon>
                <btn type="text" :leading-icon="ICON_TYPE.search" />
            </input-group-addon>
        </input-group>
    </div>
</template>
```

--------------------------------

### Vue Tooltip Placement Examples

Source: https://frontend-design.jennifersoft.com/overlay/tooltip

This snippet demonstrates how to use the Tooltip component to display tooltips at various positions relative to a button. It imports the necessary components and utilizes different 'placement' props to control the tooltip's location. The 'tooltipMessage' variable would contain the text to be displayed in the tooltip.

```vue
<script setup>
import { Btn, Tooltip } from '@jennifersoft/vue-components-v2';
</script>
<template>
    <div class="flex flex-col gap-8">
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="top-left">
                <btn type="outlined" text="TL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top">
                <btn type="outlined" text="Top" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="top-right">
                <btn type="outlined" text="TR" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-top">
                <btn type="outlined" text="LR" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right-top">
                <btn type="outlined" text="RT" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left">
                <btn type="outlined" text="Left" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right">
                <btn type="outlined" text="Right" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="left-bottom">
                <btn type="outlined" text="LB" />
            </tooltip>
            <div>&nbsp;</div>
            <tooltip :text="tooltipMessage" placement="right-bottom">
                <btn type="outlined" text="RB" />
            </tooltip>
        </div>
        <div class="flex flex-row gap-8">
            <tooltip :text="tooltipMessage" placement="bottom-left">
                <btn type="outlined" text="BL" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom">
                <btn type="outlined" text="Bottom" />
            </tooltip>
            <tooltip :text="tooltipMessage" placement="bottom-right">
                <btn type="outlined" text="BR" />
            </tooltip>
        </div>
    </div>
</template>
```

--------------------------------

### Basic Tooltip Usage (Vue)

Source: https://frontend-design.jennifersoft.com/overlay/tooltip

Demonstrates the basic implementation of a tooltip component. It requires importing the 'Btn' and 'Tooltip' components from '@jennifersoft/vue-components-v2'. The tooltip displays text when hovering over a button.

```vue
<template>
    <tooltip text="This is a tooltip" placement="top">
        <btn type="outlined" text="Hover me" />
    </tooltip>
</template>

<script setup>
import { Btn, Tooltip } from '@jennifersoft/vue-components-v2';
</script>
```

--------------------------------

### InputAffix with Prefix and Suffix Icons (Vue)

Source: https://frontend-design.jennifersoft.com/form-input/input-affix

Demonstrates how to use the InputAffix component in Vue.js to create an input field with both a prefix and a suffix icon. It utilizes InputText for the input field and SvgIcon for the icons, allowing for customizable input elements.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import {
    InputAffix,
    InputText,
    SvgIcon,
    ICON_TYPE,
} from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
</script>
<template>
    <div class="w-80">
        <input-affix>
            <svg-icon :icon="ICON_TYPE.search" />
            <input-text v-model="textValue1" :placeholder="'jennifersoft'" />
            <svg-icon :icon="ICON_TYPE.help" />
        </input-affix>
    </div>
</template>
```

--------------------------------

### Basic InputText Usage in Vue

Source: https://frontend-design.jennifersoft.com/form-input/input-text

Demonstrates the basic implementation of the InputText component in a Vue.js application. It utilizes `ref` for managing the input's value and imports the component from '@jennifersoft/vue-components-v2'. The component is rendered with a placeholder.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue = ref('');
</script>
<template>
    <div class="flex items-center gap-2">
        <input-text v-model="textValue" :placeholder="'input text'" />
    </div>
</template>
```

--------------------------------

### FloatLabel Basic Usage with InputText (Vue)

Source: https://frontend-design.jennifersoft.com/form-input/float-label

Demonstrates the basic implementation of FloatLabel with InputText components. The label appears when the input is focused or has a value. It utilizes Vue.js reactivity with `ref`.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { FloatLabel, InputText } from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
const textValue2 = ref('');
</script>
<template>
    <div class="flex flex-wrap justify-center items-end gap-4">
        <float-label position="over">
            <input-text v-model="textValue1" />
            <label for="textValue1">label</label>
        </float-label>
        <float-label position="on">
            <input-text v-model="textValue2" />
            <label for="textValue2">label</label>
        </float-label>
    </div>
</template>
```

--------------------------------

### FloatLabel Fixed Label Behavior (Vue)

Source: https://frontend-design.jennifersoft.com/form-input/float-label

Illustrates how to use the `fixed` prop on the FloatLabel component to keep the label persistently displayed, regardless of input focus or value. This is useful for emphasizing the input's purpose.

```vue
<script setup lang="ts">
import { ref } from 'vue';
// Assuming FloatLabel and InputText are imported elsewhere or globally available
</script>
<template>
    <float-label position="over" :fixed="true">
        <input-text />
        <label>label</label>
    </float-label>
</template>
```

--------------------------------

### InputText Component States in Vue

Source: https://frontend-design.jennifersoft.com/form-input/input-text

Illustrates different visual states of the InputText component in Vue.js, including inactive, required, readonly, invalid, and disabled. Each state is managed using a `ref` to control the component's behavior and appearance.

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.