CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-opentiny--vue-common

Cross-framework compatibility utilities and adapters for building Vue components that work seamlessly across Vue 2, Vue 2.7, and Vue 3

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

design-system.mddocs/

Design System Integration

The Design System Integration provides global design configuration, component customization, and theming integration across the TinyVue component ecosystem. It enables design token management, component-level configuration overrides, and custom design system integration.

Capabilities

Design Configuration Core

Global design configuration system for managing design tokens and component specifications.

/**
 * Design configuration system core
 */
const design: {
  /** Symbol key for dependency injection */
  configKey: symbol;
  /** Global design configuration instance */
  configInstance: any;
};

/**
 * Provide design configuration to component tree
 * @param designConfig - Design configuration object
 */
function provideDesignConfig(designConfig: DesignConfig): void;

interface DesignConfig {
  /** Component-specific configurations */
  components?: Record<string, ComponentConfig>;
  /** Design system name */
  name?: string;
  /** Design system version */
  version?: string;
}

interface ComponentConfig {
  /** Component-specific props overrides */
  props?: Record<string, any>;
  /** Renderless function extensions */
  renderless?: (props: any, hooks: any, utils: any, sdk: any) => any;
  /** Component API extensions */
  api?: string[];
}

Usage Examples:

import { provideDesignConfig } from "@opentiny/vue-common";

// Configure design system at application level
const designConfig = {
  name: 'CustomDesignSystem',
  version: '1.0.0',
  components: {
    Button: {
      props: {
        size: 'medium',
        variant: 'primary',
        borderRadius: '8px'
      },
      api: ['customAction']
    },
    Input: {
      props: {
        clearable: true,
        validateEvent: true
      }
    }
  }
};

// Provide to component tree
provideDesignConfig(designConfig);

Custom Design Configuration

Support for external design systems and custom theming solutions like MetaERP integration.

/**
 * Custom design configuration for external systems
 */
const customDesignConfig: {
  /** Design configuration instance */
  designConfig: DesignConfig | null;
  /** Tailwind merge function override */
  twMerge: (str: string) => string;
};

Usage Examples:

import { customDesignConfig } from "@opentiny/vue-common";

// Configure custom design system (e.g., MetaERP)
customDesignConfig.designConfig = {
  name: 'MetaERP',
  components: {
    Button: {
      props: {
        theme: 'corporate',
        elevation: 2
      }
    }
  }
};

// Override Tailwind merge function
customDesignConfig.twMerge = (classString) => {
  // Custom class merging logic for MetaERP
  return customTailwindMerge(classString);
};

Component-Level Configuration

Dynamic component configuration resolution with prop inheritance and override capabilities.

Automatic Prop Resolution:

// Component automatically receives design configuration
export default {
  setup(props, context) {
    return setup({
      props,
      context,
      renderless: (props, hooks, utils) => {
        // Design configuration is automatically available
        const { designConfig, globalDesignConfig } = utils;
        
        // Component-specific config
        const componentConfig = designConfig;
        const globalConfig = globalDesignConfig;
        
        return {
          componentConfig,
          globalConfig
        };
      },
      api: ['componentConfig', 'globalConfig']
    });
  }
};

Manual Configuration Access:

import { hooks } from "@opentiny/vue-common";

export default {
  setup() {
    // Access design configuration through injection
    const globalDesign = hooks.inject(design.configKey, {});
    const componentName = 'Button'; // Component name without prefix
    
    const componentConfig = hooks.computed(() => {
      const config = globalDesign?.value || globalDesign || {};
      return config.components?.[componentName] || {};
    });
    
    return {
      componentConfig
    };
  }
};

Advanced Configuration Patterns

Multi-Theme Design System

Design system that supports multiple themes with component-specific overrides.

import { provideDesignConfig, resolveTheme } from "@opentiny/vue-common";

export default {
  setup(props, context) {
    const currentTheme = resolveTheme(props, context);
    
    const themeConfigs = {
      tiny: {
        name: 'TinyDesign',
        components: {
          Button: {
            props: {
              borderRadius: '4px',
              shadow: 'sm',
              fontWeight: 'medium'
            }
          }
        }
      },
      saas: {
        name: 'SaaSDesign',
        components: {
          Button: {
            props: {
              borderRadius: '8px',
              shadow: 'md',
              fontWeight: 'semibold'
            }
          }
        }
      }
    };
    
    const designConfig = hooks.computed(() => themeConfigs[currentTheme]);
    
    hooks.watch(designConfig, (newConfig) => {
      provideDesignConfig(newConfig);
    }, { immediate: true });
    
    return {
      currentTheme,
      designConfig
    };
  }
};

Design Token Management

Centralized design token management with component integration.

import { provideDesignConfig } from "@opentiny/vue-common";

const designTokens = {
  colors: {
    primary: {
      50: '#eff6ff',
      100: '#dbeafe',
      500: '#3b82f6',
      600: '#2563eb',
      900: '#1e3a8a'
    },
    semantic: {
      success: '#10b981',
      warning: '#f59e0b',
      error: '#ef4444',
      info: '#3b82f6'
    }
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem'
  },
  typography: {
    fontSizes: {
      xs: '0.75rem',
      sm: '0.875rem',
      base: '1rem',
      lg: '1.125rem',
      xl: '1.25rem'
    },
    fontWeights: {
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700'
    }
  }
};

const tokenBasedDesignConfig = {
  name: 'TokenBasedDesign',
  tokens: designTokens,
  components: {
    Button: {
      props: {
        primaryColor: designTokens.colors.primary[500],
        padding: `${designTokens.spacing.sm} ${designTokens.spacing.md}`,
        fontSize: designTokens.typography.fontSizes.sm,
        fontWeight: designTokens.typography.fontWeights.medium
      }
    },
    Input: {
      props: {
        borderColor: designTokens.colors.primary[200],
        focusColor: designTokens.colors.primary[500],
        fontSize: designTokens.typography.fontSizes.base
      }
    }
  }
};

provideDesignConfig(tokenBasedDesignConfig);

Component Factory with Design Integration

Create components that automatically integrate with design system configuration.

import { defineComponent, setup, hooks } from "@opentiny/vue-common";

function createDesignAwareComponent(componentName, defaultConfig, renderless) {
  return defineComponent({
    name: `Tiny${componentName}`,
    setup(props, context) {
      return setup({
        props,
        context,
        renderless: (props, hooks, utils) => {
          // Merge default config with design system config
          const { designConfig } = utils;
          const componentConfig = {
            ...defaultConfig,
            ...designConfig?.props || {}
          };
          
          // Enhanced renderless with config
          const sdk = renderless(props, hooks, utils, componentConfig);
          
          // Apply design system API extensions
          if (designConfig?.renderless) {
            Object.assign(sdk, designConfig.renderless(props, hooks, utils, sdk));
          }
          
          return {
            ...sdk,
            componentConfig
          };
        },
        api: ['componentConfig', ...(defaultConfig.api || [])]
      });
    }
  });
}

// Usage
const SmartButton = createDesignAwareComponent(
  'SmartButton',
  {
    size: 'medium',
    variant: 'primary',
    api: ['handleClick']
  },
  (props, hooks, utils, config) => {
    const handleClick = () => {
      console.log('Button clicked with config:', config);
    };
    
    return {
      handleClick,
      config
    };
  }
);

Integration with Component Setup

The design system automatically integrates with the component setup system:

Automatic Design Injection

import { setup } from "@opentiny/vue-common";

export default {
  setup(props, context) {
    return setup({
      props,
      context,
      renderless: (props, hooks, utils) => {
        // Design configuration automatically available
        const { 
          designConfig,      // Component-specific config
          globalDesignConfig // Global design config
        } = utils;
        
        // Use design configuration
        const buttonSize = designConfig?.props?.size || 'medium';
        const theme = globalDesignConfig?.theme || 'default';
        
        return {
          buttonSize,
          theme
        };
      },
      api: ['buttonSize', 'theme']
    });
  }
};

Design-Aware Prop Resolution

Props are automatically resolved with design system overrides:

export default {
  props: {
    size: String,
    variant: String
  },
  setup(props, context) {
    return setup({
      props,
      context,
      renderless: (props, hooks, utils) => {
        // Props may be overridden by design configuration
        // Final props include both user props and design system defaults
        
        const finalProps = {
          size: props.size,      // User prop takes precedence
          variant: props.variant // Falls back to design system default
        };
        
        return {
          finalProps
        };
      },
      api: ['finalProps']
    });
  }
};

MCP Integration

Multi-Component Platform Configuration

Advanced component platform integration for enterprise scenarios.

/**
 * Register MCP (Multi-Component Platform) configuration
 * @param mcpConfig - MCP configuration object
 * @param defineTool - Tool definition function
 */
function registerMcpConfig(mcpConfig: any, defineTool: any): void;

Usage Examples:

import { registerMcpConfig } from "@opentiny/vue-common";

// Register MCP configuration
const mcpConfig = {
  platform: 'enterprise',
  components: {
    Button: {
      analytics: true,
      accessibility: 'enhanced',
      permissions: ['read', 'interact']
    }
  }
};

const defineTool = (vm, config, componentConfig) => {
  // Define MCP tools for component
  if (componentConfig.analytics) {
    vm.trackInteraction = (event) => {
      // Analytics integration
    };
  }
};

registerMcpConfig(mcpConfig, defineTool);

Performance Considerations

The design system integration is optimized for performance:

Lazy Evaluation

  • Design configurations are computed only when needed
  • Component-specific configs are cached per component type

Memory Efficiency

  • Shared design configuration instances across components
  • Automatic cleanup of unused configurations

Build-Time Optimization

  • Design configurations can be tree-shaken when not used
  • Static analysis friendly for build tools

Install with Tessl CLI

npx tessl i tessl/npm-opentiny--vue-common

docs

adapter.md

breakpoints.md

composition-hooks.md

css-utilities.md

design-system.md

index.md

setup.md

svg-icons.md

theme-mode.md

tile.json