@meistrari/tela-build 1.0.0

package/components/tela/collapsible-section-with-actions.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+const props = defineProps<{
+    title?: string
+    info?: string
+    collapseOnScroll?: boolean
+    headerClass?: string
+    containerClass?: string
+    titleClass?: string
+}>()
+
+const emit = defineEmits(['close', 'open'])
+
+const isOpen = defineModel<boolean>('open', { default: false, required: true })
+
+const headerRef = ref(null)
+const contentRef = ref(null)
+
+const headerBounds = useElementBounding(headerRef)
+const contentBounds = useElementBounding(contentRef)
+
+const distance = computed(() => contentBounds.bottom.value - headerBounds.bottom.value)
+
+const isOpenForAtLeast2Seconds = ref(false)
+
+watch(distance, (newVal) => {
+    if (isOpen.value && isOpenForAtLeast2Seconds.value && newVal < 50 && props.collapseOnScroll) {
+        isOpen.value = false
+    }
+})
+
+const timer = ref<NodeJS.Timeout | null>(null)
+
+watch(isOpen, (newVal) => {
+    emit(newVal ? 'open' : 'close')
+
+    if (timer.value) {
+        clearTimeout(timer.value)
+        timer.value = null
+    }
+
+    if (!newVal) {
+        isOpenForAtLeast2Seconds.value = false
+        return
+    }
+
+    timer.value = setTimeout(() => {
+        isOpenForAtLeast2Seconds.value = true
+    }, 2000)
+}, { immediate: true })
+
+// Clean up the timer when component is unmounted
+onUnmounted(() => {
+    if (timer.value) {
+        clearTimeout(timer.value)
+        timer.value = null
+    }
+})
+</script>
+
+<template>
+    <div class="bg-white" :class="[containerClass]">
+        <TelaCollapsible v-model:open="isOpen">
+            <slot name="trigger" :is-open="isOpen">
+                <div ref="headerRef" :class="headerClass" flex items-center justify-between sticky top-0 bg-white z-10 px-32px pt-14px pb-12px>
+                    <div flex items-center gap-4px :class="titleClass">
+                        <TelaCollapsibleTrigger relative flex items-center focus:outline-none>
+                            <div flex items-center gap-2>
+                                <button
+                                    transition-all pl-2px
+                                    :class="!isOpen && 'rotate--180'"
+                                >
+                                    <TelaIcon name="i-ph-caret-up" w-10px h-10px text-gray-600 />
+                                </button>
+                                <p body-14-semibold text-gray-600>
+                                    {{ title }}
+                                </p>
+                            </div>
+                        </TelaCollapsibleTrigger>
+                        <TelaTooltip
+                            v-if="info"
+                            placement="bottom"
+                            :content="info"
+                            w-fit
+                            content-class="max-w-300px"
+                        >
+                            <TelaIcon name="i-ph-question" w-10px h-10px text-gray-600 />
+                        </TelaTooltip>
+                    </div>
+                    <slot name="actions" />
+                </div>
+            </slot>
+
+            <TelaCollapsibleContent ref="contentRef" :class="isOpen ? '' : 'hidden'">
+                <slot />
+            </TelaCollapsibleContent>
+        </TelaCollapsible>
+    </div>
+</template>

package/components/tela/combobox/combobox-anchor.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import type { ComboboxAnchorProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <ComboboxAnchor
+        v-bind="forwarded"
+        :class="cn('relative', props.class)"
+    >
+        <slot />
+    </ComboboxAnchor>
+</template>

package/components/tela/combobox/combobox-empty.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { ComboboxEmpty } from 'reka-ui'
+import type { ComboboxEmptyProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </ComboboxEmpty>
+</template>

package/components/tela/combobox/combobox-group.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { ComboboxGroup } from 'reka-ui'
+import type { ComboboxGroupProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxGroupProps & {
+    class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <ComboboxGroup
+        v-bind="delegatedProps"
+        :class="cn('overflow-hidden py-1 px-1', props.class)"
+    >
+        <slot />
+    </ComboboxGroup>
+</template>

package/components/tela/combobox/combobox-indicator.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { ComboboxItemIndicator } from 'reka-ui'
+import type { ComboboxItemIndicatorProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <ComboboxItemIndicator
+        v-bind="delegatedProps"
+        :class="cn('text-gray-500', props.class)"
+    >
+        <slot />
+    </ComboboxItemIndicator>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import {
+    ComboboxInput,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxInputProps & {
+    class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <ComboboxInput
+        v-bind="forwarded"
+        :class="cn('flex h-10 w-full bg-white-1000 border-b-[0.5px] border-gray-200 rounded-xl px-3 py-1 body-14-regular shadow-sm text-gray-900 transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:bg-white-1000 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    >
+        <slot />
+    </ComboboxInput>
+</template>

package/components/tela/combobox/combobox-item.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import {
+    ComboboxItem,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <ComboboxItem
+        v-bind="forwarded"
+        :class="cn('relative flex cursor-pointer gap-2 select-none justify-between items-center rounded-lg px-2 py-1.5 text-sm font-medium outline-none data-[highlighted]:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+    >
+        <slot />
+    </ComboboxItem>
+</template>

package/components/tela/combobox/combobox-label.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import { ComboboxLabel, useForwardProps } from 'reka-ui'
+import type { ComboboxLabelProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxLabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <ComboboxLabel
+        v-bind="forwarded"
+        :class="cn('px-2 py-1 body-12-semibold text-gray-500', props.class)"
+    >
+        <slot />
+    </ComboboxLabel>
+</template>

package/components/tela/combobox/combobox-list.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+
+import {
+    ComboboxContent,
+    ComboboxPortal,
+    ComboboxViewport,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+    defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'], hasAnimate?: boolean, disablePortal?: boolean }>(),
+    {
+        position: 'popper',
+        align: 'center',
+        sideOffset: 3,
+        hasAnimate: false,
+        disablePortal: false,
+    },
+)
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <template v-if="props.disablePortal">
+        <ComboboxContent
+            v-bind="forwarded"
+            :class="cn('ComboboxContent z-[9999] w-200px shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
+        >
+            <ComboboxViewport>
+                <slot />
+            </ComboboxViewport>
+        </ComboboxContent>
+    </template>
+    <ComboboxPortal v-else>
+        <ComboboxContent
+            v-bind="forwarded"
+            :class="cn('ComboboxContent z-50 w-200px shadow-lg outline-none rounded-xl bg-white-1000 border-[0.5px] border-gray-200 pointer-events-auto', props.class)"
+        >
+            <ComboboxViewport>
+                <slot />
+            </ComboboxViewport>
+        </ComboboxContent>
+    </ComboboxPortal>
+</template>
+
+<style>
+.ComboboxContent {
+  transform-origin: var(--reka-combobox-content-transform-origin);
+
+  &[data-state="open"] {
+     animation: slideDownAndFade 0.12s ease-out forwards;
+  }
+
+  &[data-state="closed"] {
+     animation: slideUpAndFade 0.12s ease-out forwards;
+     animation-delay: 0s;
+  }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2px) scale(0.97);
+    }
+}
+</style>