JenniferSoft Design Docs

Appearance

InputText ​

  • InputText 는 텍스트 입력 도구인 Input을 확장하여 구현 했습니다.

Basic ​

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>

States ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue1 = ref('');
const textValue2 = ref('required');
const textValue3 = ref('readonly');
const textValue4 = ref('invalid');
const textValue5 = ref('disabled');
</script>
<template>
    <div class="flex items-center gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">inactive</label>
            <input-text
                class="w-80"
                v-model="textValue1"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">required</label>
            <input-text
                class="w-80"
                v-model="textValue2"
                :required="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">readonly</label>
            <input-text
                class="w-80"
                v-model="textValue3"
                :readonly="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold ">invalid</label>
            <input-text
                class="w-80"
                v-model="textValue4"
                :invalid="true"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">disable</label>
            <input-text
                class="w-80"
                v-model="textValue5"
                :disabled="true"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

Size ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const largeValue = ref('');
const mediumValue = ref('');
const smallValue = ref('');
</script>
<template>
    <div class="flex flex-col gap-2">
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Large</label>
            <input-text
                class="w-80"
                v-model="largeValue"
                :size="'large'"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Medium</label>
            <input-text
                class="w-80"
                v-model="mediumValue"
                :size="'medium'"
                :placeholder="'input text'"
            />
        </div>
        <div class="flex items-center h-12">
            <label class="w-32 font-bold">Small</label>
            <input-text
                class="w-80"
                v-model="smallValue"
                :size="'small'"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

textAlign ​

textAlign 속성을 설정하여 텍스트 정렬 방식을 설정할 수 있습니다.

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const textValue6 = ref('');
</script>
<template>
    <input-text
        v-model="textValue6"
        :text-align="'right'"
        :placeholder="'input text'"
    />
</template>

label ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue1 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs">Label</label>
            <input-text
                class="w-80"
                v-model="compositionValue1"
                :size="'medium'"
                :placeholder="'input text'"
            />
        </div>
    </div>
</template>

message ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue3 = ref('');
const compositionValue4 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <input-text
                class="w-80"
                v-model="compositionValue3"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block"
                >Please enter a guide description</label
            >
        </div>
        <div class="flex flex-col ">
            <input-text
                class="w-80"
                v-model="compositionValue4"
                :size="'medium'"
                :placeholder="'input text'"
        />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>

label + message ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue5 = ref('');
const compositionValue6 = ref('');
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs" for="input5">Label</label>
            <input-text
                id="input5"
                class="w-80"
                v-model="compositionValue5"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block"
                >Please enter a guide description</label
            >
        </div>
        <div class="flex flex-col ">
            <label class="text-xs" for="input6">Label</label>
            <input-text
                id="input6"
                class="w-80"
                v-model="compositionValue6"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>

input - when invalid(true) ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { InputText } from '@jennifersoft/vue-components-v2';
const compositionValue7 = ref('');
const invalid = ref(true);
</script>
<template>
    <div class="flex gap-2">
        <div class="flex flex-col ">
            <label class="text-xs" for="input7">Label</label>
            <input-text
                id="input7"
                class="w-80"
                :invalid="invalid"
                v-model="compositionValue7"
                :size="'medium'"
                :placeholder="'input text'"
            />
            <label class="text-xs block text-[--red-800]"
                >Please enter a guide description</label
            >
        </div>
    </div>
</template>