@meistrari/tela-build 1.0.0

package/components/tela/input/input.mdx

@@ -0,0 +1,182 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as InputStories from './input.stories.ts';
+
+<Meta of={InputStories} />
+
+# TelaInput
+
+A flexible input component that supports both text input and textarea modes. Includes features like labels, error states, icons, clear buttons, and validation feedback. Supports v-model binding for two-way data binding.
+
+## Examples
+
+### With Clear Button
+
+<Canvas of={InputStories.ClearButton} />
+
+### With Icon
+
+<Canvas of={InputStories.WithIcon} />
+
+### With Error
+
+<Canvas of={InputStories.WithError} />
+
+### Disabled
+
+<Canvas of={InputStories.Disabled} />
+
+### Textarea
+
+<Canvas of={InputStories.Textarea} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const value = ref('')
+</script>
+
+<template>
+  <TelaInput
+    v-model="value"
+    label="Username"
+    placeholder="Enter your username"
+  />
+</template>
+```
+
+### With Clear Button Code
+
+```vue
+<TelaInput
+  v-model="value"
+  label="Email"
+  placeholder="you@example.com"
+  show-clear-button
+/>
+```
+
+### With Icon Code
+
+```vue
+<TelaInput
+  v-model="searchQuery"
+  label="Search"
+  icon="i-ph-magnifying-glass"
+  placeholder="Search..."
+/>
+```
+
+### With Error Code
+
+```vue
+<TelaInput
+  v-model="email"
+  label="Email"
+  placeholder="you@example.com"
+  error="Please enter a valid email address"
+/>
+```
+
+### Disabled Code
+
+```vue
+<TelaInput
+  label="Disabled Input"
+  placeholder="Cannot edit"
+  disabled
+  model-value="Read only value"
+/>
+```
+
+```vue
+<TelaInput
+  v-model="message"
+  type="textarea"
+  label="Message"
+  placeholder="Enter your message..."
+/>
+```
+
+### Custom Styling
+
+```vue
+<TelaInput
+  v-model="value"
+  label="Custom Input"
+  label-class="text-blue-600 font-bold"
+  input-class="border-blue-400"
+  input-font-class="font-mono"
+/>
+```
+
+### With Maxlength
+
+```vue
+<TelaInput
+  v-model="bio"
+  label="Bio"
+  placeholder="Tell us about yourself"
+  :maxlength="100"
+/>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type InputSize = 'sm' | 'md'
+
+type InputProps = {
+  id?: string
+  modelValue?: string | number
+  label?: string
+  placeholder?: string
+  hideLabel?: boolean
+  disabled?: boolean
+  size?: InputSize
+  error?: string | false
+  showClearButton?: boolean
+  tabindex?: number
+  autofocus?: boolean
+  autocomplete?: 'on' | 'off'
+  type?: string
+  labelClass?: string
+  inputFontClass?: string
+  inputClass?: string
+  icon?: string
+  showDescription?: boolean
+  maxlength?: number
+}
+```
+
+## Features
+
+- **Flexible Input Types**: Supports text, email, password, number, textarea, and more
+- **Label Support**: Built-in label with hide option for accessibility
+- **Error Handling**: Display validation errors with styling
+- **Icon Integration**: Add icons inside the input field
+- **Clear Button**: Quick clear functionality with show/hide control
+- **Auto-focus**: Automatically focus on mount
+- **Disabled State**: Proper disabled styling and behavior
+- **Character Limit**: Maxlength support with counter
+- **Custom Classes**: Granular control over label, input, and font styling
+- **Two-way Binding**: Full v-model support
+- **Textarea Mode**: Multi-line input support
+
+## Sizes
+
+- **sm**: Small input with compact padding
+- **md**: Medium input (default) with comfortable spacing
+
+## Accessibility
+
+- Proper label-input association with `for` and `id` attributes
+- Hidden label option maintains accessibility
+- Error messages properly associated with input
+- Keyboard navigation support
+- Focus visible states
+- Disabled state properly conveyed to screen readers

package/components/tela/input/input.stories.ts

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { fn } from '@storybook/test'
+
+import Input from './tela-input.vue'
+
+const meta: Meta<typeof Input> = {
+    title: 'Core/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A flexible input component that supports both text input and textarea modes. Includes features like labels, error states, icons, clear buttons, and validation feedback. Supports v-model binding for two-way data binding.',
+            },
+        },
+    },
+    argTypes: {
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the input element. Used for accessibility and form association.',
+        },
+        modelValue: {
+            control: 'text',
+            description: 'The input value (v-model). Supports string or number types.',
+        },
+        label: {
+            control: 'text',
+            description: 'Label text displayed above or alongside the input field.',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text shown when the input is empty.',
+        },
+        hideLabel: {
+            control: 'boolean',
+            description: 'Hide the label visually while keeping it accessible for screen readers.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the input, preventing user interaction.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md'],
+            description: 'Size of the input field. Controls height and padding.',
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display below the input. Set to false to hide error state.',
+        },
+        showClearButton: {
+            control: 'boolean',
+            description: 'Show a clear button (X icon) that allows users to quickly clear the input value.',
+        },
+        tabindex: {
+            control: 'number',
+            description: 'Tab order of the input element. Use -1 to remove from tab sequence.',
+        },
+        autofocus: {
+            control: 'boolean',
+            description: 'Automatically focus the input when the component mounts.',
+        },
+        autocomplete: {
+            control: 'select',
+            options: ['off', 'on'],
+            description: 'HTML autocomplete attribute value. Controls browser autocomplete behavior.',
+        },
+        type: {
+            control: 'text',
+            description: 'Input type. Can be any HTML input type or "textarea" for multiline input.',
+        },
+        labelClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the label element.',
+        },
+        inputFontClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the input font styling.',
+        },
+        inputClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the input element.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Icon name or class to display inside the input (typically on the left side).',
+        },
+        showDescription: {
+            control: 'boolean',
+            description: 'Show description text below the input field.',
+        },
+        maxlength: {
+            control: 'number',
+            description: 'Maximum number of characters allowed in the input.',
+        },
+    },
+    args: {
+        'onUpdate:modelValue': fn(),
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const TextInput: Story = {
+    args: {
+        label: 'Label',
+        placeholder: 'Enter text',
+        autofocus: true,
+        modelValue: 'Hello',
+    },
+}
+
+export const ClearButton: Story = {
+    args: {
+        ...TextInput.args,
+        showClearButton: true,
+    },
+}
+
+export const WithIcon: Story = {
+    args: {
+        ...TextInput.args,
+        modelValue: 'Search...',
+        icon: 'i-ph-magnifying-glass',
+    },
+}
+
+export const WithError: Story = {
+    args: {
+        ...TextInput.args,
+        modelValue: 'Invalid value',
+        error: 'This is an error',
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        ...TextInput.args,
+        disabled: true,
+    },
+}
+
+export const Textarea: Story = {
+    args: {
+        ...TextInput.args,
+        type: 'textarea',
+        placeholder: 'Enter text',
+        modelValue: 'In the quiet of the night,\nStars above shining bright,\nWhispers of the moonlight,\nGuide my dreams till morning light.',
+    },
+}

package/components/tela/input/tela-input.vue

@@ -0,0 +1,240 @@
+<script setup lang="ts">
+import type { InputTypeHTMLAttribute } from 'vue'
+
+const props = defineProps<{
+    id?: string
+    modelValue: string | number | undefined
+    label?: string
+    placeholder?: string
+    hideLabel?: boolean
+    disabled?: boolean
+    size?: 'sm' | 'md'
+    error?: string | false
+    showClearButton?: boolean
+    tabindex?: number
+    autofocus?: boolean
+    autocomplete?: 'off' | 'on'
+    type?: InputTypeHTMLAttribute | 'textarea'
+    labelClass?: string
+    inputFontClass?: string
+    inputClass?: string
+    icon?: string
+    showDescription?: boolean
+    maxlength?: number
+}>()
+
+const emit = defineEmits<{
+    'focus': []
+    'update:modelValue': [string]
+    'blur': [string]
+}>()
+
+const isTextarea = computed(() => props.type === 'textarea')
+const attributes = computed(() => ({
+    size: isTextarea.value ? 'md' : undefined,
+    type: isTextarea.value ? undefined : props.type,
+    modelValue: props.modelValue,
+    value: props.modelValue,
+    maxlength: props.maxlength,
+}))
+
+function handleInput(data: Event | string) {
+    if (isTextarea.value)
+        emit('update:modelValue', ((data as Event).target as HTMLInputElement).value)
+    else
+        emit('update:modelValue', ((data as Event).target as HTMLInputElement).value)
+}
+
+function handleBlur(data: Event | string) {
+    if (isTextarea.value)
+        emit('blur', data as string)
+    else
+        emit('blur', ((data as Event).target as HTMLInputElement).value)
+}
+
+function clearContent() {
+    emit('update:modelValue', '')
+}
+
+const container = ref<HTMLElement>()
+const { textarea: inputRef, input: textareaInput } = useTextareaAutosize({ styleProp: 'minHeight' })
+
+function focusInput() {
+    if (container.value) {
+        setTimeout(() => container.value!.querySelector(isTextarea.value ? 'textarea' : 'input')?.focus(), 100)
+    }
+}
+
+onMounted(() => {
+    if (container.value && container.value.attributes.getNamedItem('data-testid')) {
+        const testId = container.value.attributes.getNamedItem('data-testid')?.value as string
+
+        // Remove the data-testid attribute from the container element
+        container.value.removeAttribute('data-testid')
+
+        // Add the data-testid attribute to the input element
+        inputRef.value?.setAttribute('data-testid', testId)
+    }
+
+    if (props.autofocus) {
+        focusInput()
+    }
+})
+
+const trailingContent = useTemplateRef('trailing-content')
+const { width: trailingWidth } = useElementBounding(trailingContent)
+
+const errorContainerRef = ref<HTMLElement>()
+const isErrorTruncated = ref(false)
+
+function checkTruncation() {
+    if (!errorContainerRef.value)
+        return
+
+    const span = errorContainerRef.value.querySelector('span')
+    if (span) {
+        isErrorTruncated.value = span.scrollWidth > span.clientWidth
+    }
+}
+
+watch(() => props.error, async () => {
+    if (props.error) {
+        await nextTick()
+        checkTruncation()
+    }
+    else {
+        isErrorTruncated.value = false
+    }
+}, { immediate: true })
+
+useResizeObserver(errorContainerRef, () => {
+    checkTruncation()
+})
+
+defineExpose({
+    focusInput,
+})
+</script>
+
+<template>
+    <div ref="container" flex="~ col" relative>
+        <div
+            relative
+            transition
+            cursor-text
+            overflow-hidden
+            px-3 py-8px
+            b="0.5px gray-300"
+            rounded-10px bg-white
+            class="focus-within-b-gray-400 focus-within-ring-2 focus-within-ring-gray-100"
+            :class="[
+                size === 'sm' && 'py-7px !px-12px',
+                disabled && '!bg-gray-50 cursor-not-allowed color-gray-600',
+                $attrs.class,
+                error && '!border-red-900 !text-red-900 !bg-[#FFDBDB66]',
+                props.inputClass,
+            ]"
+            flex items-center
+            @click="$el.querySelector(isTextarea ? 'textarea' : 'input')?.focus()"
+        >
+            <div v-if="icon" flex mr-6px>
+                <TelaIcon :name="icon" size="sm" text="gray-600" />
+            </div>
+            <div
+                flex="~ col" grow align-center h-full
+                :style="{
+                    marginRight: `${trailingWidth - 0}px`,
+                }"
+            >
+                <label
+                    v-if="label"
+                    :for="id"
+                    text="12px #68787A"
+                    leading-20px
+                    flex
+                    align-center
+                    :class="[disabled && 'cursor-not-allowed', props.labelClass]"
+                >
+
+                    <slot name="label-leading" />
+                    {{ label }}
+                </label>
+                <component
+                    :is="isTextarea ? 'textarea' : 'input'"
+                    :id="id"
+                    ref="inputRef"
+                    v-bind="attributes"
+                    v-model="textareaInput"
+                    :name="placeholder"
+                    variant="none"
+                    :autocomplete="autocomplete"
+                    :placeholder="placeholder"
+                    :rows="1"
+                    autoresize
+                    w-full
+                    bg-transparent
+                    z-0
+                    h-full
+                    class="placeholder-gray-300 focus-visible:outline-none! leading-170% tracking-.01em"
+                    resize-none
+                    :disabled="disabled"
+                    :tabindex="tabindex"
+                    :class="[
+                        disabled && 'cursor-not-allowed',
+                        size === 'sm' && 'leading-20px body-14-regular placeholder:body-14-regular',
+                        props.inputFontClass ? props.inputFontClass : 'text-14px',
+                        !isTextarea && '!h-1.7em',
+                    ]"
+                    @input="handleInput"
+                    @update:model-value="handleInput"
+                    @blur="handleBlur"
+                    @focus="emit('focus')"
+                />
+            </div>
+
+            <div v-if="!showClearButton" ref="trailing-content" absolute top-0 right-0 :bg="error ? '' : 'bg-inherit'" h-full flex="~ col" px-8px>
+                <div flex-auto />
+                <slot name="trailing" />
+                <div flex-auto />
+            </div>
+
+            <div v-if="showDescription" class="body-12-regular text-gray-500">
+                <slot name="description" />
+            </div>
+
+            <div v-if="showClearButton && modelValue" class="top-60% -translate-y-60%" right-1 absolute>
+                <TelaTooltip
+                    :content="$t('common.clear')"
+                >
+                    <button
+                        hover:bg="#EBEFF199"
+                        transition
+                        p-4px rounded-full
+                        class="group"
+                        tabindex="-1"
+                        @click="clearContent"
+                    >
+                        <TelaIcon name="i-ph-x-circle-light" text="#031E22" op-40 group-hover:op-100 transition />
+                    </button>
+                </TelaTooltip>
+            </div>
+        </div>
+        <TelaTooltip
+            v-if="error"
+            :content="error"
+            :disabled="!isErrorTruncated"
+            content-class="max-w-300px break-words z-[12000]"
+        >
+            <div
+                ref="errorContainerRef"
+                absolute bottom--14px left-0 right-0
+                body-10-medium text-red-900 flex items-center gap-3px
+                overflow-hidden text-ellipsis whitespace-nowrap
+                pr-2
+            >
+                <TelaIcon name="i-ph-warning-bold" size="sm" text="red-900" text-16px flex-shrink-0 />
+                <span class="overflow-hidden text-ellipsis">{{ error }}</span>
+            </div>
+        </TelaTooltip>
+    </div>
+</template>

package/components/tela/kbd/kbd-return.vue

@@ -0,0 +1,6 @@
+<template>
+    <div h-20px w-20px bg="#EFF0F3" rounded-4px relative>
+        <div h-10px w-12px bg="#60798F" rounded-4px absolute class="top-50% translate-y--50% left-50% translate-x--50%" />
+        <TelaIcon name="i-ph-key-return-fill" class="h-20px! w-20px!" color="#EFF0F3" absolute top-0px left-0px />
+    </div>
+</template>