@meistrari/tela-build 1.31.0 → 1.32.0

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

@@ -7,39 +7,54 @@ const props = defineProps<{
     to?: string
     onClick?: () => void
     isActive: boolean
+    disabled?: boolean
 }>()
 
 const iconName = computed(() => props.isActive ? `${props.icon}-fill` : props.icon)
+
+const rootIs = computed(() => props.disabled || !props.to ? 'button' : NuxtLink)
+
+const rootAttrs = computed(() => {
+    if (props.disabled || !props.to) {
+        return {
+            type: 'button',
+            disabled: props.disabled || undefined,
+            ...(!props.disabled && props.onClick ? { onClick: props.onClick } : {}),
+        }
+    }
+    return { to: props.to }
+})
 </script>
 
 <template>
     <component
-        :is="to ? NuxtLink : 'button'"
-        :to="to"
-        :type="!to ? 'button' : undefined"
-        class="group"
+        :is="rootIs"
+        v-bind="rootAttrs"
+        class="group disabled:opacity-60 disabled:cursor-not-allowed"
         flex="~ col" items-center justify-center gap-2px outline-none
-        :data-active="isActive"
-        v-bind="!to && onClick ? { onClick } : {}"
+        :data-active="isActive && !props.disabled"
     >
         <div relative size-40px flex items-center justify-center rounded-10px>
             <TelaIcon
                 :name="iconName"
                 size="20px"
                 relative z-1
-                :color="isActive ? 'icon' : 'icon-tertiary duration-150 ease-out group-hover:icon group-focus-within:icon'"
+                color="icon-tertiary duration-150 ease-out group-[:hover:not(:disabled)]:icon group-focus-visible:icon group-data-[active=true]:icon"
             />
             <div
                 :class="cn(
-                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent',
-                    isActive ? 'bg-neutral-200 group-focus-within:border-strong' : 'bg scale-10 opacity-0 duration-150 ease-out origin-center group-hover:border-strong group-hover:scale-100 group-hover:opacity-100 group-focus-within:border-strong group-focus-within:scale-100 group-focus-within:opacity-100',
+                    'absolute inset-0 size-full rounded-[14px] z-0 border-[0.5px] border-transparent duration-150 ease-out origin-center group-disabled:scale-0',
+                    'group-data-[active=false]:bg group-data-[active=false]:scale-10 group-data-[active=false]:opacity-0',
+                    'group-data-[active=true]:bg-neutral-200 group-focus-visible:border-strong group-[[data-active=false]:hover]:border-strong group-hover:scale-100 group-hover:opacity-100',
+                    'group-focus-visible:border-strong group-focus-visible:scale-100 group-focus-visible:opacity-100',
                 )"
             />
         </div>
         <p
             :class="cn(
-                'text-[11px] leading-[12px] -tracking-0.2px',
-                isActive ? 'text-primary font-550' : 'font-460 text-tertiary duration-150 ease-out group-hover:text-primary group-focus-within:text-primary',
+                'text-[11px] leading-[12px] -tracking-0.2px font-460 text-tertiary duration-150 ease-out',
+                'group-[:hover:not(:disabled)]:text-primary group-focus-visible:text-primary',
+                'group-data-[active=true]:text-primary group-data-[active=true]:font-550',
             )"
         >
             {{ label }}

package/components/tela/sidebar/sidebar.mdx

@@ -57,6 +57,10 @@ A composable sidebar navigation system built from focused sub-components. Fixed
 
 <Canvas of={SidebarStories.NoActiveItem} />
 
+### Disabled Items
+
+<Canvas of={SidebarStories.DisabledItems} />
+
 ### Individual Item States
 
 <Canvas of={SidebarStories.SingleItem} />
@@ -98,6 +102,7 @@ interface TelaSidebarItemProps {
     isActive: boolean     // Highlights the item as the current route
     to?: string           // Route path — renders as a link
     onClick?: () => void  // Click handler when not using `to`
+    disabled?: boolean    // Renders as a non-interactive button with reduced opacity
 }
 ```
 

package/components/tela/sidebar/sidebar.stories.ts

@@ -168,6 +168,66 @@ export const ActivityActive: Story = {
     }),
 }
 
+export const DisabledItems: Story = {
+    parameters: {
+        docs: {
+            description: {
+                story: 'Disabled items render as non-interactive buttons with reduced opacity. The `to` prop is ignored when `disabled` is `true`.',
+            },
+        },
+    },
+    render: () => ({
+        components,
+        setup() {
+            return { userActions }
+        },
+        template: `
+            <TelaSidebar>
+                <TelaSidebarHeader>
+                    <TelaSidebarLogo src="/tela-logo-black.svg" alt="Tela Logo" />
+                </TelaSidebarHeader>
+
+                <TelaSidebarContent>
+                    <TelaSidebarItem
+                        icon="i-ph-house"
+                        label="Home"
+                        to="/"
+                        :is-active="true"
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-graph"
+                        label="Workflows"
+                        to="/workflows"
+                        :is-active="false"
+                        disabled
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-database"
+                        label="Data"
+                        to="/data"
+                        :is-active="false"
+                        disabled
+                    />
+                    <TelaSidebarItem
+                        icon="i-ph-gear"
+                        label="Settings"
+                        to="/settings"
+                        :is-active="false"
+                    />
+                </TelaSidebarContent>
+
+                <TelaSidebarFooter>
+                    <TelaSidebarUser
+                        name="Username"
+                        email="user@example.com"
+                        :actions="userActions"
+                    />
+                </TelaSidebarFooter>
+            </TelaSidebar>
+        `,
+    }),
+}
+
 export const SingleItem: Story = {
     parameters: {
         layout: 'centered',

package/components/tela/tags/tags-select.mdx

@@ -97,7 +97,9 @@ function clearAll() {
 </template>
 ```
 
-### Read-Only Display
+### Non-Editable (selection only)
+
+Pass `:is-editable="false"` to hide the create button (`+`) and the per-tag edit pencil. Users can still select/deselect existing tags, but cannot create new ones or modify existing ones.
 
 ```vue
 <script setup>
@@ -112,6 +114,7 @@ const tags = ref([
   <TelaTagsSelect
     :model-value="tags"
     :options="tags"
+    :is-editable="false"
   />
 </template>
 ```
@@ -143,6 +146,7 @@ type TagsSelectProps = {
   addNewNamePlaceholder?: string
   createButtonLabel?: string
   saveChangesButtonLabel?: string
+  isEditable?: boolean  // Default: true. When false, hides the create (+) button and the per-tag edit pencil.
 }
 ```
 

package/components/tela/tags/tags-select.vue

@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<{
     assignLabel?: string
     showLabel?: boolean
     alwaysShowEmpty?: boolean
+    isEditable?: boolean
 }>(), {
     modelValue: () => [],
     disabled: false,
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<{
     tagPlural: 'tags',
     showLabel: true,
     alwaysShowEmpty: false,
+    isEditable: true,
 })
 
 const emit = defineEmits<{
@@ -141,7 +143,7 @@ function resolveColor(color: string, lightColor = false): string {
 const allCreatedTags = ref<Tag[]>([])
 const localSelectedTags = ref<Tag[]>(props.modelValue || [])
 const popoverOpen = ref(false)
-const selectedContent = ref<ContentType>(allCreatedTags.value.length > 0 ? 'existing-tag' : 'new-tag')
+const selectedContent = ref<ContentType>(allCreatedTags.value.length > 0 || !props.isEditable ? 'existing-tag' : 'new-tag')
 const newTagName = ref<string>('')
 const selectedColorsForNewTag = ref<string | null>(ALL_COLORS[0])
 const selectedTagsForApply = ref<Set<string>>(new Set())
@@ -247,7 +249,7 @@ watch(() => props.modelValue, (newTags) => {
 
 watch(popoverOpen, (isOpen) => {
     if (isOpen) {
-        selectedContent.value = hasTags.value ? 'existing-tag' : 'new-tag'
+        selectedContent.value = hasTags.value || !props.isEditable ? 'existing-tag' : 'new-tag'
         selectedTagsForApply.value = getTagKeys(localSelectedTags.value)
     }
     else {
@@ -574,7 +576,7 @@ updateAllCreatedTags()
                                             <h5 heading-h5-semibold>
                                                 {{ allCreatedTags.length }} {{ allCreatedTags.length > 1 ? props.tagPlural : props.tagSingular }}
                                             </h5>
-                                            <button flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted mr--4px @click="handleCreateMore">
+                                            <button v-if="props.isEditable" flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted mr--4px @click="handleCreateMore">
                                                 <TelaIcon name="i-ph-plus" size="16px" color="icon" />
                                             </button>
                                         </div>
@@ -588,6 +590,7 @@ updateAllCreatedTags()
                                                 </div>
                                                 <div flex items-center gap-4px>
                                                     <button
+                                                        v-if="props.isEditable"
                                                         class="group opacity-0 group-hover/tag:opacity-100" flex items-center justify-center w-17px h-17px rounded-5px hover:bg-background-lowered
                                                         @click.stop="handleEditTag(tag)"
                                                     >

package/package.json

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