@meistrari/tela-build 1.36.0 → 1.38.0

package/components/tela/icon/custom.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { TelaCustomIconName } from '../../../types'
+import type { TelaCustomIconName } from '@meistrari/tela-build/types'
+
 import { Motion } from 'motion-v'
 
 const props = withDefaults(defineProps<{
@@ -14,6 +15,10 @@ const props = withDefaults(defineProps<{
 })
 
 const colorValue = computed(() => {
+    if (props.color.startsWith('#')) {
+        return props.color
+    }
+
     const [colorName, shade] = props.color.split('-')
     const colors = DT.colors as Record<string, any>
 
@@ -360,5 +365,10 @@ const colorValue = computed(() => {
                 <path d="M0.805054 0.805054L3.34137 3.34137C4.54019 4.54019 4.60421 6.46316 3.4878 7.73906L0.805054 10.8051" stroke="currentColor" stroke-width="1.61015" stroke-linecap="round" />
             </g>
         </template>
+
+        <template v-if="name === 'quarter-slice'">
+            <path d="M12 6C12 9.31371 9.31371 12 6 12C2.68629 12 0 9.31371 0 6C0 2.68629 2.68629 0 6 0C9.31371 0 12 2.68629 12 6ZM1.2 6C1.2 8.65097 3.34903 10.8 6 10.8C8.65097 10.8 10.8 8.65097 10.8 6C10.8 3.34903 8.65097 1.2 6 1.2C3.34903 1.2 1.2 3.34903 1.2 6Z" fill="currentColor" />
+            <path d="M2.5 6C2.5 6.69223 2.70527 7.36892 3.08986 7.9445C3.47444 8.52007 4.02107 8.96867 4.66061 9.23358C5.30015 9.49848 6.00388 9.5678 6.68282 9.43275C7.36175 9.2977 7.98539 8.96436 8.47487 8.47487C8.96436 7.98539 9.2977 7.36175 9.43275 6.68282C9.5678 6.00388 9.49849 5.30015 9.23358 4.66061C8.96867 4.02107 8.52007 3.47444 7.9445 3.08986C7.36892 2.70527 6.69224 2.5 6 2.5L6 6L2.5 6Z" fill="currentColor" />
+        </template>
     </svg>
 </template>

package/components/tela/status/status.mdx

@@ -9,8 +9,9 @@ A status component that displays different workflow and task statuses with appro
 
 ## Rules
 
-- **Always** use `<TelaStatus />` for any status indicator (workflow status, event status, health state, etc.). Never build a custom status with icons + color classes.
 - `text-success` and `text-error` are reserved for `<TelaStatus />` — never apply them to regular text content.
+- **Always** use `<TelaStatus />` for any status indicator (workflow status, event status, health state, etc.). Never build a custom status with icons + color classes.
+- **NEVER** use the `config` prop. It exists as an escape hatch for domain-specific variants in consuming apps (hex colors, localized labels, etc.). Always prefer an existing `variant` — if none fits, extend the built-in variant list instead of passing `config`. One-off `config` objects defeat the design system.
 
 ## Examples
 

package/components/tela/status/status.vue

@@ -13,6 +13,7 @@ type StatusConfig = {
 
 const props = withDefaults(defineProps<{
     variant?: TelaStatusVariant
+    config?: StatusConfig
     label?: string
     isIconAnimated?: boolean
     isIconHidden?: boolean
@@ -293,6 +294,9 @@ const variantConfig: Record<TelaStatusVariant, StatusConfig> = {
 }
 
 const currentStatus = computed<StatusConfig>(() => {
+    if (props.config)
+        return props.config
+
     const variant = props.variant ?? 'running'
 
     return variantConfig[variant] ?? variantConfig.running
@@ -334,7 +338,7 @@ function measureContentWidth() {
 }
 
 watch(
-    () => [props.variant, statusLabel.value, props.isIconHidden],
+    () => [props.variant, props.config, statusLabel.value, props.isIconHidden],
     measureContentWidth,
     { immediate: true },
 )
@@ -358,7 +362,7 @@ const shineClass = computed(() => {
     ]
 })
 
-const isShineVisible = computed(() => ['running', 'executing', 'processing', 'verifying', 'initializing', 'reviewing'].includes(props.variant))
+const isShineVisible = computed(() => !props.config && ['running', 'executing', 'processing', 'verifying', 'initializing', 'reviewing'].includes(props.variant))
 
 function iconVariants() {
     return {

package/package.json

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

package/types/custom-icon.ts

@@ -1 +1 @@
-export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start' | 'level-right'
+export type TelaCustomIconName = 'circle' | 'pause' | 'queued' | 'close' | 'circle-notch' | 'circle-minus' | 'stop' | 'circle-dashed' | 'warning' | 'check' | 'check-dashed' | 'semi-circle' | 'arrow-down' | 'reported' | 'circle-warning' | 'slice' | 'half-slice' | 'knot' | 'timeline-dot' | 'timeline-start' | 'level-right' | 'quarter-slice'