Getting started

HopeKit is a framework of UI components based on Vue3 and designed for Vite bundler.

NPM

You can install HopeKit through npm with the command:

bash

$ npm i @deeepvision/hope-component-kit --save

Use HopeKit base components

We use individual components installation. You can choose and install what you need:

/plugins/hope-component-kit.ts


/* Hope Component Kit */
import { Plugin } from 'vue';

import {
  HcAvatar,
  HcIcon,
  HcButton,
  HcCheckbox,
  HcCheckboxGroup,
  HcIconButton,
  HcContenteditableInput,
  HcNumberInput,
  HcInput,
  HcSwitch,
  HcTextarea,
  HcSelect,
  HcImage,
  HcTooltip,
  HcTags,
  HcPagination,
  HcPopup,
  HcTabs,
  HcTiptap,
  HcTiptapView,
  HcLoader,
} from '@deeepvision/hope-component-kit';

export default {
  install(app) {
    app.component('HcIcon', HcIcon)
      .component('HcAvatar', HcAvatar)
      .component('HcCheckbox', HcCheckbox)
      .component('HcCheckboxGroup', HcCheckboxGroup)
      .component('HcButton', HcButton)
      .component('HcIconButton', HcIconButton)
      .component('HcContenteditableInput', HcContenteditableInput)
      .component('HcNumberInput', HcNumberInput)
      .component('HcInput', HcInput)
      .component('HcSwitch', HcSwitch)
      .component('HcTextarea', HcTextarea)
      .component('HcSelect', HcSelect)
      .component('HcImage', HcImage)
      .component('HcTooltip', HcTooltip)
      .component('HcTags', HcTags)
      .component('HcPagination', HcPagination)
      .component('HcPopup', HcPopup)
      .component('HcTabs', HcTabs)
      .component('HcTiptap', HcTiptap)
      .component('HcTiptapView', HcTiptapView)
      .component('HcLoader', HcLoader);
  },
} as Plugin;

Install Tailwind Theme

HopeKit uses Tailwind framework. You need to import default theme to tailwind.config.js:

const hopeKitTheme = require('@deeepvision/hope-component-kit/tailwind.theme.js');

module.exports = {
  darkMode: 'class',
  content: [
    './node_modules/@deeepvision/hope-component-kit/dist/hope-component-kit.es.js',
    './index.html',
    './src/**/*.vue',
  ],

  theme: {
    fontFamily: {
      ...hopeKitTheme.fontFamily,
    },
    extend: {
      colors: {
        ...hopeKitTheme.colors,
      },
      textColor: {
        ...hopeKitTheme.textColor,
      },
      fontSize: {
        ...hopeKitTheme.fontSize,
      },
      fontWeight: {
        ...hopeKitTheme.fontWeight,
      },
      borderRadius: {
        ...hopeKitTheme.borderRadius,
      },
    },
  },
};

Import HopeKit CSS

You need to import HopeKit CSS in your main.ts file:

css

/* /styles/main.pcss */

/* Element Plus */
@import 'element-plus/dist/index.css';

/* CropperJS */
@import 'cropperjs/dist/cropper.css';

/* HopeKit */
@import '@deeepvision/hope-component-kit/dist/style.css';

CSS theme variables

Add css variables to your main.css:

HEX Format Numbers Only

It is important that the colors are in HEX format and only the numerical value for example: rgb (17,78,246) is equivalent to 17,78,246

css

/* /styles/main.pcss */

/* Theme Vars */

:root {
  --color-primary: 17, 78, 246;
  --color-primary-dark: 6, 70, 165;
  --color-primary-light: 74, 156, 255;

  --color-accent: 255, 208, 54;
  --color-accent-dark:  255, 169, 40;
  --color-accent-light: 255, 229, 111;

  --color-accent2: 255, 92, 122;
  --color-accent2-dark: 217, 76, 99;
  --color-accent2-light: 255, 128, 149;

  --color-info: 6, 70, 165;
  --color-warning: 255, 208, 54;
  --color-danger: 255, 128, 149;
  --color-error: var(--color-danger);
  --color-success: 98, 217, 132;
  --color-success-dark: 8, 165, 52;

  --color-text-info: 255, 255, 255;
  --color-text-warning: 0, 0, 0;
  --color-text-danger: 255, 255, 255;
  --color-text-error: var(--color-text-danger);
  --color-overline: 127, 137, 172;
  --color-inactive: 167, 177, 204;
  --color-text-success: 255, 255, 255;
  --color-text-success-dark: 255, 255, 255;

  --color-gray: 193, 201, 222;
  --color-gray-light: 222, 226, 235;
  --color-gray-dark: 0, 19, 86;

  --color-text-default: 0, 19, 86;

  --color-link: 17, 78, 246;
}

Install i18n messages

HopeKit uses vue-i18n. You can import messages to your plugins/i18n.ts ant customize them when you need:

// @/i18n/messages.ts
import { HopeComponentsI18nMessages } from '@deeepvision/hope-component-kit';
import { merge } from '@corex/deepmerge';

export default merge([HopeComponentsI18nMessages, {
  en: {
    ...
  }
}]);

// @/plugins/i18n.ts
import { Plugin } from 'vue';
import i18nMessages from '@/i18n/messages';
import { createI18n } from 'vue-i18n';

export const i18nPlugin = {
  install(app) {
    const i18n = createI18n({
      locale: lang,
      legacy: false,
      allowComposition: true,
      fallbackLocale: 'en',
      messages: i18nMessages,
      globalInjection: true,
    });

    app.use(i18n);
  },
} as Plugin;

Getting started #

NPM #

Use HopeKit base components #

Install Tailwind Theme #

Import HopeKit CSS #

CSS theme variables #

Install i18n messages #