0.6.18 • Published 8 months ago

unified-components v0.6.18

Weekly downloads
-
License
-
Repository
-
Last release
8 months ago

Unified Components

Capabilities

General capabilities added through UnoCSS

  • Variant groups
    • class="hover:(text-black underline)"
  • Directives
    •   .custom-div {
          --at-apply: "text-center my-0 font-medium";
        }
    • @screen xs { ... }
    • @screen lt-lg { ... }
    • @screen at-lg { ... }
    • background-color: theme('colors.blue.500');
  • Compile classes
    • <div class=":uno: text-center sm:text-left">...</div>
  • Auto import access to all functions in the VueUse
  • Auto import access to all functions in the Radash

How to use

1- Install

bun i unified-components --exact

2- Configure

~/uno.config.js

import { defineConfig, transformerCompileClass, transformerDirectives, transformerVariantGroup } from 'unocss';
import config from 'unified-components/uno.config.js';

export default defineConfig({
  presets: [
    config,
  ],
  transformers: [
    transformerVariantGroup(),
    transformerDirectives(),
    transformerCompileClass(),
  ],
});

~/nuxt.config.js

export default defineNuxtConfig({
  extends: [
    'unified-components',
  ],
});

~/app/app.vue

<style>
  :root {
    color: theme('colors.on-surface');
    background-color: theme('colors.surface');
  }
</style>

Theming

The theme is automatically applied to all components. You can override the theme by passing a theme object to the module.

~/nuxt.config.js

export default defineNuxtConfig({
  extends: [
    'unified-components',
  ],
  unifiedComponents: {
    theme: {
      'surface': '#FAFAFA',
      'on-surface': '#212121',
      'neutral': '#212121',
      'on-neutral': '#FAFAFA',
      'primary': '#3B82F6',
      'on-primary': '#FAFAFA',
      'success': '#22C55E',
      'on-success': '#212121',
      'danger': '#EF4444',
      'on-danger': '#212121',
    },
  },
});
0.6.18

8 months ago

0.6.12

10 months ago

0.6.17

8 months ago

0.6.14

10 months ago

0.6.13

10 months ago

0.6.16

9 months ago

0.6.15

10 months ago

0.6.7

11 months ago

0.6.6

11 months ago

0.4.8

1 year ago

0.6.9

10 months ago

0.6.8

11 months ago

0.6.10

10 months ago

0.6.11

10 months ago

0.6.3

11 months ago

0.5.3

1 year ago

0.6.5

11 months ago

0.4.7

1 year ago

0.4.6

1 year ago

0.5.0

1 year ago

0.5.2

1 year ago

0.5.1

1 year ago

0.4.5

1 year ago

0.4.4

1 year ago

0.4.1

1 year ago

0.4.3

1 year ago

0.4.2

1 year ago

0.4.0

1 year ago

0.3.0

1 year ago

0.2.3

1 year ago

0.2.4

1 year ago

0.2.1

1 year ago

0.2.2

1 year ago

0.2.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago