@meistrari/tela-build 1.0.0

package/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/app.config.ts

@@ -0,0 +1,73 @@
+export default defineAppConfig({
+    ui: {
+        primary: 'black',
+        selectMenu: {
+            rounded: 'rounded-8px',
+            ring: 'ring-0 b-1 b-gray-200',
+            background: '!bg-red',
+        },
+        button: {
+            variant: {
+                solid: 'text-black bg-white shadow-none b-1 b-#EDEDED hover:bg-#F7F7F7 hover:b-#DEDEDE transition disabled:bg-white disabled:cursor-not-allowed ',
+            },
+            size: {
+                '2xs': 'text-xs',
+                'xs': 'text-xs',
+                'sm': 'text-[13px] h-32px',
+                'md': 'text-[13px] h-40px',
+                'lg': 'text-sm',
+                'xl': 'text-base',
+            },
+            padding: {
+                md: '!px-16px !py-15px',
+            },
+            default: {
+                size: 'md',
+                variant: 'solid',
+                color: 'primary',
+                loadingIcon: 'i-ph-arrows-clockwise',
+            },
+        },
+        input: {
+            base: '!ring-0 !shadow-none !bg-pink',
+            padding: {
+                sm: '!pb-50px',
+            },
+        },
+        modal: {
+            container: 'flex min-h-full items-center sm:items-center justify-center text-center',
+        },
+        notifications: {
+            position: 'right-0',
+            width: 'sm:!w-[420px]',
+        },
+        notification: {
+            background: '!bg-[#031E22]',
+            container: 'b-1 b-[#01292F/08]',
+            rounded: 'rounded-8px',
+            title: 'text-16px text-white font-semibold tracking--0.01em leading-20px',
+            description: 'text-14px text-white/60 leading-1.08em',
+            ring: 'ring-0',
+        },
+        toggle: {
+            container: {
+                base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow ring-0 transition ease-in-out duration-200',
+            },
+        },
+        tooltip: {
+            popper: {
+                arrow: true,
+
+            },
+            rounded: 'rounded-full',
+            arrow: {
+                ring: 'before:ring-[#000000]',
+                background: 'before:!bg-[#000000]',
+            },
+            background: '!bg-[#01292F]',
+            ring: '!ring-1 !ring-black',
+            base: '[@media(pointer:coarse)]:hidden h-6 px-12px py-4px truncate relative text-10px font-semibold !text-white',
+            shadow: 'shadow-none',
+        },
+    },
+})

package/components/tela/animated/animated-calculating-number.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{ value: number | null; min: number; max: number }>()
+const currentNumber = ref(props.value)
+
+const timer = setInterval(() => {
+    currentNumber.value = Math.floor(Math.random() * (props.max - props.min) + props.min)
+}, 350)
+
+onUnmounted(() => {
+    clearInterval(timer)
+})
+</script>
+
+<template>
+    <TelaAnimatedValue :value="value !== null ? value : currentNumber" />
+</template>

package/components/tela/animated/animated-number.mdx

@@ -0,0 +1,248 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as AnimatedNumberStories from './animated-number.stories.ts';
+
+<Meta of={AnimatedNumberStories} />
+
+# TelaAnimatedNumber
+
+An animated number component that smoothly animates number changes with counting effects. Supports currency formatting, decimal precision, and locale customization. Useful for displaying metrics, statistics, or financial data with engaging animations.
+
+## Examples
+
+### With Currency
+
+<Canvas of={AnimatedNumberStories.WithCurrency} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const count = ref(0)
+
+const increment = () => {
+  count.value += 100
+}
+</script>
+
+<template>
+  <div>
+    <TelaAnimatedNumber :value="count" />
+    <TelaButton @click="increment">Increment</TelaButton>
+  </div>
+</template>
+```
+
+### With Currency Code Examples
+
+```vue
+<TelaAnimatedNumber
+  :value="123456.78"
+  currency="USD"
+  :locales="['en-US']"
+/>
+<!-- Output: $123,456.78 -->
+
+<TelaAnimatedNumber
+  :value="123456.78"
+  currency="BRL"
+  :locales="['pt-BR']"
+/>
+<!-- Output: R$ 123.456,78 -->
+
+<TelaAnimatedNumber
+  :value="123456.78"
+  currency="EUR"
+  :locales="['de-DE']"
+/>
+<!-- Output: 123.456,78 € -->
+```
+
+### With Precision
+
+```vue
+<!-- 2 decimal places -->
+<TelaAnimatedNumber
+  :value="123.456789"
+  :precision="2"
+/>
+<!-- Output: 123.46 -->
+
+<!-- No decimal places -->
+<TelaAnimatedNumber
+  :value="123.456789"
+  :precision="0"
+/>
+<!-- Output: 123 -->
+
+<!-- 4 decimal places -->
+<TelaAnimatedNumber
+  :value="123.456789"
+  :precision="4"
+/>
+<!-- Output: 123.4568 -->
+```
+
+### Counter Example
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const visitors = ref(1234)
+
+setInterval(() => {
+  visitors.value += Math.floor(Math.random() * 10)
+}, 2000)
+</script>
+
+<template>
+  <div>
+    <div class="text-4xl font-bold">
+      <TelaAnimatedNumber :value="visitors" />
+    </div>
+    <div class="text-sm text-gray-600">
+      Active visitors
+    </div>
+  </div>
+</template>
+```
+
+### Sales Dashboard
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const revenue = ref(45678.90)
+const orders = ref(234)
+const conversion = ref(3.45)
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-4">
+    <div class="p-4 bg-white rounded shadow">
+      <div class="text-2xl font-bold">
+        <TelaAnimatedNumber
+          :value="revenue"
+          currency="USD"
+          :locales="['en-US']"
+        />
+      </div>
+      <div class="text-sm text-gray-600">Total Revenue</div>
+    </div>
+
+    <div class="p-4 bg-white rounded shadow">
+      <div class="text-2xl font-bold">
+        <TelaAnimatedNumber :value="orders" />
+      </div>
+      <div class="text-sm text-gray-600">Orders</div>
+    </div>
+
+    <div class="p-4 bg-white rounded shadow">
+      <div class="text-2xl font-bold">
+        <TelaAnimatedNumber
+          :value="conversion"
+          :precision="2"
+        />%
+      </div>
+      <div class="text-sm text-gray-600">Conversion Rate</div>
+    </div>
+  </div>
+</template>
+```
+
+### Different Locales
+
+```vue
+<!-- US Format -->
+<TelaAnimatedNumber
+  :value="1234567.89"
+  :locales="['en-US']"
+/>
+<!-- Output: 1,234,567.89 -->
+
+<!-- Brazilian Format -->
+<TelaAnimatedNumber
+  :value="1234567.89"
+  :locales="['pt-BR']"
+/>
+<!-- Output: 1.234.567,89 -->
+
+<!-- German Format -->
+<TelaAnimatedNumber
+  :value="1234567.89"
+  :locales="['de-DE']"
+/>
+<!-- Output: 1.234.567,89 -->
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type AnimatedNumberProps = {
+  value: number
+  precision?: number
+  currency?: string
+  locales?: string[]
+}
+```
+
+## Features
+
+- **Smooth Animation**: Numbers count up/down smoothly
+- **Currency Formatting**: Support for all currency codes
+- **Locale Support**: Format according to different locales
+- **Precision Control**: Set decimal places
+- **Performance**: Optimized for rapid updates
+- **Direction**: Automatically counts up or down
+
+## Currency Codes
+
+Common currency codes:
+- USD - US Dollar
+- EUR - Euro
+- GBP - British Pound
+- BRL - Brazilian Real
+- JPY - Japanese Yen
+- CNY - Chinese Yuan
+- INR - Indian Rupee
+
+## Locale Codes
+
+Common locale codes:
+- en-US - English (US)
+- en-GB - English (UK)
+- pt-BR - Portuguese (Brazil)
+- es-ES - Spanish (Spain)
+- fr-FR - French (France)
+- de-DE - German (Germany)
+- ja-JP - Japanese (Japan)
+- zh-CN - Chinese (China)
+
+## Use Cases
+
+- **Dashboards**: Display real-time metrics
+- **Statistics**: Animated counters for stats
+- **Financial Data**: Show monetary values
+- **Analytics**: User counts, page views
+- **E-commerce**: Sales figures, revenue
+- **Gaming**: Scores, points, levels
+
+## Best Practices
+
+1. **Set Appropriate Precision**: Use 2 decimals for currency
+2. **Match Locale to Currency**: Use correct locale for currency
+3. **Avoid Rapid Changes**: Limit update frequency
+4. **Provide Context**: Label what the number represents
+5. **Consider Performance**: Limit simultaneous animations
+
+## Accessibility
+
+- Numbers are readable by screen readers
+- Provide context with labels
+- Ensure sufficient color contrast
+- Animation can be disabled via CSS

package/components/tela/animated/animated-number.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import AnimatedNumber from './animated-number.vue'
+
+const meta: Meta<typeof AnimatedNumber> = {
+    title: 'Core/Animated Number',
+    component: AnimatedNumber,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'An animated number component that smoothly animates number changes with counting effects. Supports currency formatting, decimal precision, and locale customization. Useful for displaying metrics, statistics, or financial data with engaging animations.',
+            },
+        },
+    },
+    argTypes: {
+        value: {
+            control: 'number',
+            description: 'The numeric value to display and animate.',
+        },
+        precision: {
+            control: 'number',
+            description: 'Number of decimal places to display.',
+        },
+        currency: {
+            control: 'text',
+            description: 'Currency code (e.g., "USD", "BRL") for currency formatting.',
+        },
+        locales: {
+            control: 'object',
+            description: 'Array of locale strings (e.g., ["pt-BR", "en-US"]) for number formatting.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        value: 123456789,
+    },
+}
+
+export const WithCurrency: Story = {
+    args: {
+        value: 123456789,
+        currency: 'BRL',
+        locales: ['pt-BR'],
+    },
+}

package/components/tela/animated/animated-number.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import NumberFlow from '@number-flow/vue'
+
+const props = defineProps<{
+    value: number
+    precision?: number
+    currency?: string
+    locales?: string[]
+}>()
+</script>
+
+<template>
+    <NumberFlow
+        :value="props.value"
+        :format="{
+            roundingMode: 'expand',
+            maximumFractionDigits: props.precision,
+            currency: props.currency?.length === 3 ? props.currency : undefined,
+            style: props.currency?.length === 3 ? 'currency' : undefined,
+        }"
+        :locales="props.locales"
+    />
+</template>

package/components/tela/animated/animated-text.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { Virtualizer } from 'virtua/vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<{
+    content: string | number | boolean | null | undefined
+}>()
+
+const chunkSize = 3000
+
+const resolvedString = computed(() => {
+    if (typeof props.content === 'string')
+        return props.content
+
+    if (typeof props.content === 'number')
+        return props.content.toString()
+
+    if (typeof props.content === 'boolean')
+        return props.content ? 'true' : 'false'
+
+    if (props.content === null)
+        return 'null'
+
+    if (props.content === undefined)
+        return 'undefined'
+
+    return props.content
+})
+
+const chunks = computed(() => {
+    if (resolvedString.value.length < chunkSize) {
+        return [resolvedString.value.split(' ')]
+    }
+
+    function splitByEmptyLines(str: string) {
+        const lines = str.split('\n')
+
+        const chunks: string[][] = [[]]
+
+        for (const line of lines) {
+            if (line.trim() === '') {
+                chunks.push(['\n'])
+            }
+            else {
+                chunks[chunks.length - 1].push(...line.split(' '))
+            }
+        }
+
+        return chunks
+    }
+
+    function splitByWords(str: string) {
+        const words = str.split(' ')
+        const chunks: string[][] = []
+
+        for (let i = 0; i < words.length; i += chunkSize) {
+            chunks.push(words.slice(i, i + chunkSize))
+        }
+
+        return chunks
+    }
+
+    // check if the chunks are too small, if so, we can split the chunks by words
+    function checkChunksSize(original: string, chunks: string[][]) {
+        const idealNumberOfChunks = Math.ceil(original.length / chunkSize)
+        const numberOfChunks = chunks.length
+        const avg = chunks.reduce((acc, chunk) => acc + chunk.length, 0) / chunks.length
+
+        // if the number of chunks is less than 70% of the ideal number of chunks
+        if (numberOfChunks < idealNumberOfChunks * 0.7) {
+            return false
+        }
+
+        // if the average chunk length is less than 70% of the ideal chunk length
+        if (avg < chunkSize * 0.7) {
+            return false
+        }
+
+        return true
+    }
+
+    const chunks = splitByEmptyLines(resolvedString.value)
+
+    if (checkChunksSize(resolvedString.value, chunks)) {
+        return chunks
+    }
+
+    return splitByWords(resolvedString.value)
+})
+</script>
+
+<template>
+    <Virtualizer v-slot="{ item }" :data="chunks" class="block h-full">
+        <TransitionGroup name="word">
+            <span v-for="word, i in item" v-bind="$attrs" :key="`word-${i}`" whitespace="break-spaces">{{ `${word} ` }}</span>
+        </TransitionGroup>
+    </Virtualizer>
+</template>
+
+<style scoped>
+.word-enter-active,
+.word-leave-active {
+  transition:
+    top .35s ease-out,
+    opacity .8s ease-out;
+  opacity: 0.8;
+  position: relative;
+}
+
+.word-enter-from,
+.word-leave-to {
+  opacity: 0;
+  top: 10px;
+}
+
+.word-enter-to,
+.word-leave-from {
+  opacity: 1;
+  top: 0px;
+}
+</style>

package/components/tela/animated/animated-value.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = withDefaults(
+    defineProps<{
+        value: any,
+        direction?: 'vertical' | 'horizontal',
+        enterOffset?: string,
+        leaveOffset?: string
+    }>(),
+    {
+        direction: 'vertical',
+        enterOffset: '20px',
+        leaveOffset: '-20px',
+    },
+)
+
+const cssVars = computed(() => {
+    if (props.direction === 'horizontal') {
+        return {
+            '--enter-offset': props.enterOffset,
+            '--leave-offset': props.leaveOffset,
+        }
+    }
+    return {}
+})
+
+const directionClass = computed(() => props.direction)
+</script>
+
+<template>
+    <Transition name="slide-fade" mode="out-in">
+        <p :key="value" :class="directionClass" :style="cssVars">
+            {{ value }}
+        </p>
+    </Transition>
+</template>
+
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 100ms ease;
+}
+.slide-fade-leave-active {
+  transition: all 100ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.horizontal.slide-fade-enter-active {
+  transition: all 200ms ease;
+}
+.horizontal.slide-fade-leave-active {
+  transition: all 200ms cubic-bezier(1.0, 0.5, 0.8, 1.0);
+}
+
+.horizontal.slide-fade-enter {
+  transform: translateX(var(--enter-offset));
+  opacity: 0;
+}
+.horizontal.slide-fade-leave-to {
+  transform: translateX(var(--leave-offset));
+  opacity: 0;
+}
+
+.vertical.slide-fade-enter,
+.vertical.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+</style>