@meistrari/tela-build 1.51.0 → 1.52.0

package/components/tela/avatar/label/avatar-label.stories.ts

@@ -4,7 +4,6 @@ import TelaAvatarLabel from './avatar-label.vue'
 const meta = {
     title: 'Core/AvatarLabel',
     component: TelaAvatarLabel,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

package/components/tela/confirmation-modal/confirmation-modal.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { DialogClose } from 'radix-vue'
 import TelaModal from '../modal/modal.vue'
 import TelaButton from '../button/button.vue'
 
@@ -20,11 +19,6 @@ const emit = defineEmits<{
 
 const open = defineModel<boolean>('open')
 
-function handleCloseClick() {
-    emit('cancel')
-    open.value = false
-}
-
 const confirmButtonVariant = computed(() => {
     return props.variant === 'danger' ? 'danger' : 'primary'
 })
@@ -35,36 +29,24 @@ const confirmButtonVariant = computed(() => {
         v-model:model-value="open"
         :compact="props.compact ?? true"
         hide-dividers
+        :is-close-icon="false"
+        :style="{ paddingBlock: '20px' }"
         @close="emit('cancel')"
     >
-        <template #actions>
-            <DialogClose as-child>
-                <TelaIconButton
-                    absolute
-                    top-8px
-                    right-8px
-                    icon="i-ph-x"
-                    size="md"
-                    color="secondary"
-                    outline-none
-                    @click="handleCloseClick"
-                />
-            </DialogClose>
-        </template>
         <div flex="~ col" w-400px>
             <h6 body-20-semibold text-gray-900>
                 {{ props.title }}
             </h6>
-            <div body-16-regular text-gray-700 mt-8px>
+            <div body-16-regular text-gray-700 mt-4px>
                 <slot />
             </div>
         </div>
         <template #footer>
             <div flex="~" gap-8px w-full justify-between>
-                <TelaButton :disabled="props.loading" size="lg" variant="secondary" @click="emit('cancel')">
+                <TelaButton :disabled="props.loading" size="lg" variant="secondary" flex-1 whitespace-nowrap @click="emit('cancel')">
                     {{ props.cancelButtonText ?? 'Cancel' }}
                 </TelaButton>
-                <TelaButton :loading="props.loading" size="lg" :variant="confirmButtonVariant" :data-testid="props.confirmButtonTestId" @click="emit('confirm')">
+                <TelaButton :loading="props.loading" size="lg" :variant="confirmButtonVariant" :data-testid="props.confirmButtonTestId" flex-1 whitespace-nowrap @click="emit('confirm')">
                     {{ props.confirmButtonText ?? 'Confirm' }}
                 </TelaButton>
             </div>

package/components/tela/drag-zone.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps<{
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    filesDropped: [list: File[]]
+}>()
+
+const active = ref(false)
+let inActiveTimeout: ReturnType<typeof setTimeout> | null = null
+
+// setActive and setInactive use timeouts, so that when you drag an item over a child element,
+// the dragleave event that is fired won't cause a flicker. A few ms should be plenty of
+// time to wait for the next dragenter event to clear the timeout and set it back to active.
+function setActive() {
+    if (props.disabled)
+        return
+    active.value = true
+    if (inActiveTimeout)
+        clearTimeout(inActiveTimeout)
+}
+function setInactive() {
+    inActiveTimeout = setTimeout(() => {
+        active.value = false
+    }, 50)
+}
+
+function onDrop(e: DragEvent) {
+    setInactive()
+    if (props.disabled)
+        return
+    if (!e.dataTransfer?.files)
+        return
+    emit('filesDropped', [...e.dataTransfer.files])
+}
+</script>
+
+<template>
+    <div
+        :data-active="active"
+        @dragenter.prevent.stop="setActive"
+        @dragover.prevent.stop="setActive"
+        @dragleave.prevent.stop="setInactive"
+        @drop.prevent.stop="onDrop"
+    >
+        <slot :drop-zone-active="active" />
+    </div>
+</template>

package/components/tela/dropdown-menu/DropdownMenu.vue

@@ -16,10 +16,12 @@ const props = withDefaults(defineProps<{
         label: string
         icon?: string
         iconSide?: 'left' | 'right'
+        trailingIcon?: string
         group?: string
         color?: 'positive' | 'caution' | 'negative'
         click: () => void
         disabled?: boolean
+        preventClose?: boolean
         checkbox?: {
             modelValue: boolean
             onChange: (value: boolean) => void
@@ -34,6 +36,8 @@ const props = withDefaults(defineProps<{
     triggerClass?: HTMLAttributes['class']
     contentClass?: HTMLAttributes['class']
     align?: 'start' | 'end' | 'center'
+    labelClass?: string
+    defaultOpen?: boolean
 }>(), {
     align: 'start',
     iconSide: 'left',
@@ -70,7 +74,7 @@ function onToggle(open: boolean) {
 
 <template>
     <div data-allow-mismatch @click.stop>
-        <DropdownMenuRoot :modal="shouldBeModal" :default-open="isStorybook" @update:open="onToggle">
+        <DropdownMenuRoot :modal="shouldBeModal" :default-open="defaultOpen" @update:open="onToggle">
             <DropdownMenuTrigger as-child :class="cn('data-[state=open]:bg-muted', triggerClass)" @click.prevent.stop>
                 <slot />
                 <VisuallyHidden v-if="isStorybook" as-child>
@@ -83,6 +87,8 @@ function onToggle(open: boolean) {
                 :side-offset="sideOffset"
                 :class="cn('min-w-128px! z-605!', contentClass)"
             >
+                <slot name="header" />
+
                 <div v-if="allowSearch" flex="~" items-center px-8px py-6px>
                     <TelaIcon name="i-ph-magnifying-glass-bold" text-gray-800 mr-6px />
                     <input
@@ -111,16 +117,25 @@ function onToggle(open: boolean) {
                             :disabled="item.disabled"
                             :icon="item.icon"
                             :icon-side="item.iconSide"
+                            :trailing-icon="item.trailingIcon"
                             :color="item.color"
                             :checkbox="item.checkbox"
                             :tooltip="item.tooltip"
                             :data-testid="item.testId"
+                            :label-class="labelClass"
+                            @select="(event: Event) => {
+                                if (item.preventClose) {
+                                    event.preventDefault()
+                                }
+                            }"
                             @click="item.click"
                         >
-                            <span>{{ item.label }}</span>
+                            {{ item.label }}
                         </DropdownMenuItem>
                     </DropdownMenuGroup>
                 </template>
+
+                <slot name="footer" />
             </DropdownMenuContent>
         </DropdownMenuRoot>
     </div>

package/components/tela/dropdown-menu/DropdownMenuItem.vue

@@ -7,9 +7,11 @@ import type { TooltipProps } from '../tooltip/tooltip.vue'
 
 const props = defineProps<DropdownMenuItemProps & {
     class?: HTMLAttributes['class']
+    labelClass?: HTMLAttributes['class']
     inset?: boolean
     icon?: string
     iconSide?: 'left' | 'right'
+    trailingIcon?: string
     iconWithBackground?: {
         name: string
         size?: string
@@ -105,7 +107,7 @@ const isIconImage = computed(() => {
             <TelaIcon v-else-if="icon" :name="icon" :class="getIconClasses(props.color)" />
             <TelaIcon v-else-if="iconWithBackground" :name="iconWithBackground.name" :size="iconWithBackground.size" :background-class="iconWithBackground.backgroundClass" :class="getIconClasses(props.color)" />
             <TelaCheckbox v-else-if="checkbox" :model-value="checkbox?.modelValue" @update:model-value="(value) => checkbox?.onChange(value === true)" />
-            <span text-body-14-medium font-460 :class="getItemClasses(props.color)">
+            <span text-body-14-medium font-460 :class="cn(getItemClasses(props.color), labelClass)">
                 <slot />
             </span>
         </DropdownMenuItem>
@@ -127,10 +129,11 @@ const isIconImage = computed(() => {
         <TelaIcon v-else-if="icon && (!iconSide || iconSide === 'left')" :name="icon" :class="getIconClasses(props.color)" />
         <TelaIcon v-else-if="iconWithBackground" :name="iconWithBackground.name" :size="iconWithBackground.size" :background-class="iconWithBackground.backgroundClass" :class="getIconClasses(props.color)" />
         <TelaCheckbox v-else-if="checkbox" :model-value="checkbox?.modelValue" @update:model-value="(value) => checkbox?.onChange(value === true)" />
-        <span text-body-14-medium font-460 :class="getItemClasses(props.color)">
+        <span text-body-14-medium font-460 :class="cn(getItemClasses(props.color), labelClass)">
             <slot />
         </span>
         <img v-if="icon && iconSide === 'right' && isIconImage" :src="icon" :class="cn('size-16px')">
         <TelaIcon v-else-if="icon && iconSide === 'right'" :name="icon" />
+        <TelaIcon v-else-if="trailingIcon" :name="trailingIcon" color="gray-400" size="14px" ml-auto />
     </DropdownMenuItem>
 </template>

package/components/tela/dropdown-menu/dropdown-menu.stories.ts

@@ -44,6 +44,13 @@ const meta: Meta<typeof DropdownMenu> = {
             options: ['start', 'end', 'center'],
             description: 'Alignment of the dropdown menu relative to the trigger element.',
         },
+        defaultOpen: {
+            control: 'boolean',
+            description: 'Whether the dropdown menu starts open when mounted.',
+        },
+    },
+    args: {
+        defaultOpen: true,
     },
 }
 

package/components/tela/filter/filter.stories.ts

@@ -6,7 +6,6 @@ import type { FilterConfig, FilterSelections } from './filter.vue'
 const meta: Meta<typeof Filter> = {
     title: 'Filters/Filter',
     component: Filter,
-    tags: ['autodocs'],
     parameters: {
         layout: 'centered',
         docs: {

package/components/tela/link-decoration/link-decoration.vue

@@ -6,14 +6,11 @@ const props = defineProps<{
 </script>
 
 <template>
-    <a
-        v-if="props.href"
+    <component
+        :is="props.href ? 'a' : 'span'"
         :href="props.href"
         :class="cn('text-gray-900 underline underline-offset-3px', props.class)"
     >
         <slot />
-    </a>
-    <span v-else :class="cn('text-gray-900 underline underline-offset-3px', props.class)">
-        <slot />
-    </span>
+    </component>
 </template>