@meistrari/tela-build 1.32.0 → 1.33.0

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { TooltipProps } from '../tooltip/tooltip.vue'
+
 import { VisuallyHidden } from 'radix-vue'
+
 import DropdownMenuRoot from './DropdownMenuRoot.vue'
 import DropdownMenuContent from './DropdownMenuContent.vue'
 import DropdownMenuGroup from './DropdownMenuGroup.vue'
 import DropdownMenuItem from './DropdownMenuItem.vue'
 import DropdownMenuLabel from './DropdownMenuLabel.vue'
 import DropdownMenuTrigger from './DropdownMenuTrigger.vue'
-import type { TooltipProps } from '../tooltip/tooltip.vue'
 
 const props = withDefaults(defineProps<{
     items: {
@@ -27,7 +30,8 @@ const props = withDefaults(defineProps<{
     allowSearch?: boolean
     searchPlaceholder?: string
     shouldBeModal?: boolean
-    contentClass?: string
+    triggerClass?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
     align?: 'start' | 'end' | 'center'
 }>(), {
     align: 'start',
@@ -66,7 +70,7 @@ function onToggle(open: boolean) {
 <template>
     <div data-allow-mismatch @click.stop>
         <DropdownMenuRoot :modal="shouldBeModal" :default-open="isStorybook" @update:open="onToggle">
-            <DropdownMenuTrigger as-child class="data-[state=open]:bg-gray-100" @click.prevent.stop>
+            <DropdownMenuTrigger as-child :class="cn('data-[state=open]:bg-muted', triggerClass)" @click.prevent.stop>
                 <slot />
                 <VisuallyHidden v-if="isStorybook" as-child>
                     <button />

package/components/tela/header/trailing/pagination/pagination-next-button.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
         size="md"
         color="secondary"
         :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
-        button-class="!disabled:bg-transparent"
+        button-class="!rounded-12px !disabled:bg-transparent"
         :disabled="disabled"
         @click="emit('click')"
     />

package/components/tela/header/trailing/pagination/pagination-prev-button.vue

@@ -14,7 +14,7 @@ const emit = defineEmits<{
         size="md"
         color="secondary"
         :icon-class="disabled ? 'text-icon-subtle' : 'text-icon'"
-        button-class="!disabled:bg-transparent"
+        button-class="!rounded-12px !disabled:bg-transparent"
         :disabled="disabled"
         @click="emit('click')"
     />

package/components/tela/header/trailing/trailing-actions.vue

@@ -18,6 +18,7 @@ defineProps<{
             size="md"
             color="secondary"
             icon="i-ph-dots-three-bold"
+            button-class="!rounded-12px"
             icon-class="text-neutral-950"
         />
     </TelaDropdownMenu>

package/components/tela/initials.vue

@@ -15,7 +15,7 @@ const sizeStyles = computed(() => {
         case 'sm':
             return 'w-32px h-32px text-16px'
         case 'md':
-            return 'w-40px h-40px text-18px'
+            return 'w-40px h-40px text-20px'
         case 'lg':
             return 'w-64px h-64px text-28px'
         case 'xl':

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

@@ -123,10 +123,10 @@ defineExpose({
             transition
             cursor-text
             overflow-hidden
-            px-3 py-8px
-            b="0.5px border-strong"
+            px-10px py-4px
+            b="0.5px border"
             rounded-10px bg-white
-            class="focus-within-b-gray-400 focus-within-ring-2 focus-within-ring-gray-100"
+            class="focus-within-border-strong focus-within-ring-2 focus-within-ring-gray-100 [box-shadow:0_1px_4px_0_rgba(103,127,148,0.03)]"
             :class="[
                 size === 'sm' && 'py-7px !px-12px',
                 disabled && '!bg-gray-50 cursor-not-allowed color-gray-600',
@@ -137,8 +137,8 @@ defineExpose({
             flex items-center
             @click="$el.querySelector(isTextarea ? 'textarea' : 'input')?.focus()"
         >
-            <div v-if="icon" flex mr-6px>
-                <TelaIcon :name="icon" size="sm" text="gray-400" />
+            <div v-if="icon" flex mr-8px>
+                <TelaIcon :name="icon" size="13px" text="icon-tertiary" />
             </div>
             <div
                 flex="~ col" grow align-center h-full
@@ -155,7 +155,6 @@ defineExpose({
                     align-center
                     :class="[disabled && 'cursor-not-allowed', props.labelClass]"
                 >
-
                     <slot name="label-leading" />
                     {{ label }}
                 </label>
@@ -175,13 +174,13 @@ defineExpose({
                     bg-transparent
                     z-0
                     h-full
-                    class="placeholder-gray-300 focus-visible:outline-none! leading-170% tracking-.01em"
+                    body-14-regular
+                    class="placeholder-text-tertiary focus-visible:outline-none!"
                     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',
                     ]"

package/components/tela/menubar/menubar-content.vue

@@ -14,7 +14,7 @@ const props = withDefaults(
     {
         align: 'start',
         alignOffset: 0,
-        sideOffset: 8,
+        sideOffset: 4,
         disablePortal: false,
     },
 )

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

@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <MenubarItem
         v-bind="forwarded"
         :class="cn(
-            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 text-body-14-medium font-460 outline-none focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+            'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5 body-14-medium text-primary outline-none focus:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
             inset && 'pl-8',
             props.class,
         )"

package/components/tela/menubar/menubar-trigger.vue

@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps)
         v-bind="forwardedProps"
         :class="
             cn(
-                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-lowered data-[state=open]:bg-lowered',
+                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-muted data-[state=open]:bg-muted',
                 props.class,
             )
         "

package/components/tela/scroll-area/scroll-area.vue

@@ -1,34 +1,43 @@
 <script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+import { computed, onMounted, useTemplateRef } from 'vue'
+
 import {
     ScrollAreaCorner,
     ScrollAreaRoot,
-
     ScrollAreaViewport,
 } from 'reka-ui'
-import type { ScrollAreaRootProps } from 'reka-ui'
-import { computed } from 'vue'
-import type { HTMLAttributes } from 'vue'
+
 import ScrollBar from './scroll-bar.vue'
 
 const props = withDefaults(
     defineProps<ScrollAreaRootProps
-    & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' | 'both', scrollThumbClass?: HTMLAttributes['class'] }>(),
+    & { class?: HTMLAttributes['class'], orientation?: 'vertical' | 'horizontal' | 'both', scrollThumbClass?: HTMLAttributes['class'], disableViewportFocus?: boolean }>(),
     {
         orientation: 'vertical',
-        scrollThumbClass: '',
+        disableViewportFocus: false,
     },
 )
 
 const delegatedProps = computed(() => {
-    const { class: _, ...delegated } = props
+    const { class: _, disableViewportFocus: __, ...delegated } = props
 
     return delegated
 })
+
+const viewportRef = useTemplateRef<InstanceType<typeof ScrollAreaViewport>>('viewportRef')
+
+onMounted(() => {
+    if (props.disableViewportFocus)
+        viewportRef.value?.viewportElement?.setAttribute('tabindex', '-1')
+})
 </script>
 
 <template>
     <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
-        <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+        <ScrollAreaViewport ref="viewportRef" class="size-full rounded-[inherit] focus-visible:outline-border-strong">
             <slot />
         </ScrollAreaViewport>
         <ScrollBar v-if="props.orientation === 'vertical' || props.orientation === 'both'" orientation="vertical" :class="props.scrollThumbClass" />

package/components/tela/sidebar/sidebar-logo.vue

@@ -2,7 +2,7 @@
 import { NuxtLink } from '#components'
 
 defineProps<{
-    src?: string
+    src?: string | null
     alt: string
     to?: string
 }>()

package/components/tela/sidebar/sidebar-user.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineProps<{
     image?: string
-    name: string
-    email: string
+    name?: string
+    email?: string
     actions: {
         label: string
         icon: string

package/css/reset.css

@@ -383,4 +383,12 @@ Make all headers have regular font weight by default
 
 h1, h1, h2, h3, h4, h5, h6 {
   --at-apply: 'font-regular'
-}
+}
+
+/*
+Reset user-select from images
+*/
+
+img {
+    user-select: none;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.32.0",
+  "version": "1.33.0",
   "type": "module",
   "files": [
     "app.config.ts",