SpaceONE Design System

🧩 SpaceOne Design System

SpaceOne storybook

👨‍👩‍👧 Author

See our OWNERS file.

📝 License

This project is Apache 2.0 licensed.

Chart License

SpaceONE design system internally uses amCharts for Dynamic Chart.
Before using the design system, look carefully at amCharts' license.
If you want to purchase the amCharts license that suits you and use it on your application, see the license FAQ.

https://www.amcharts.com/online-store/licenses-explained/

How to Use

1. Install

npm install @spaceone/design-system vue @vue/composition-api vue-router vue-i18n vue-fragment @amcharts

2. Set plugin

Add following lines to main.js file.

import SpaceDesignSystem from '@spaceone/design-system';

Vue.use(SpaceDesignSystem, pluginOptions);

Plugin Options

Option	Description
installVueRouter	Whether to install Vue Router. Some components use Vue Router, so don't give this option if you have already installed it in your application.
installVueI18n	Whether to install Vue I18n. Some components use Vue I18n, so don't give this option if you have already installed it in your application.
installVueCompositionApi	Whether to install the Vue Composition API. All components use the Vue Composition API, so don't give this option if you have already installed it in your application.
installFragment	Whether to install Vue Fragment. Some components use Vue Fragment, so don't give this option if you have already installed it in your application.
amchartsLicenses	If you use the amcharts library such as Dynamic Chart, license the amcharts as a string array.

interface SpaceoneDSOptions {
    installVueRouter?: boolean;
    installVueI18n?: boolean;
    installVueCompositionApi?: boolean;
    installFragment?: boolean;
    amchartsLicenses?: string[];
}

3. Set components locally

Example:

import { PButtonTab, PDynamicLayout } from '@spaceone/design-system';

export default {
    components: {
        PButtonTab,
        PDynamicLayout,
    },
    ...
}

How to Apply Styles

SpaceONE Design System is based on Tailwindcss.

Global Styles

Case 1. All styles

If your project doesn't use tailwindcss, add the code below to main.ts.

import '@spaceone/design-system/dist/css/style.css';

Case 2. Without tailwindcss styles

If your project use tailwindcss, you don't need to import all styles.
In that case, add codes below to your tailwind.config.js.

const spaceoneTailwind = require('@spaceone/design-system/tailwind.config.js')

module.exports = {
    theme: {
        ...spaceoneTailwind.theme,
        // your customized theme
    },
    variants: [...spaceoneTailwind.variants, 
    //your customized variants 
    ],
    plugins: [
        ...spaceoneTailwind.plugins,
        //your customized plugins 
    ]
}

Also, you need to add codes below to your main.js.

import '@spaceone/design-system/dist/css/light-style.css';