0.2.1 • Published 11 months ago

mechtaui-shop v0.2.1

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

Getting Started

Добро пожаловать! Эта инструкция поможет тебе начать работу с mechtaui-shop aka Mistral UI Kit

Содержание


Введение

Установка

  • Выполните команду pnpm add mechtaui-shop@latest

  • Импортируйте стили import 'mechtaui-shop/dist/style.css'

Автоимпорт

По желанию можно использовать unplugin-vue-components для автоимпорта компонентов из библиотеки.

  • pnpm add -D unplugin-vue-components

Чтобы все работало корректно, нужно добавить custom resolver в vite.config.ts:

{/* vite.config.ts */}

import Components from 'unplugin-vue-components/vite';

export default defineConfig({
  plugins: [
    Components({
      dts: 'src/components.d.ts',
      resolvers: [
        (componentName) => {
          if (componentName.startsWith('MT')) {
            return {
              name: componentName,
              from: 'mechtaui-shop',
            };
          }
        },
      ],
    })
  ]})

Префиксы

Стоит учесть, что все компоненты из библиотеки делятся на два типа, это основные и вспомогательные:

  • Основные:

    К ним относятся уже готовые к использованию компоненты, которые содержат в себе прописанную логику. Основные компоненты помечены префиксами MT и автоимпортируются (при использовании Автоимпортов).

    Пример:

      <MTInput
      v-model="login"
      :is-error="$props.errorStatus"
      :label="$t('auth.login')"
      />
  • Вспомогательные:

    К ним относятся части, из которых можно собрать один основной компонент. Они не автоимпортируются (это нужно делать вручную) и не помечены префиксами.

Используются для построения своих компонентов. Бывают случаи, когда какой-либо компонент нужно сделать только на вашем проекте, с этим помогут вспомогательные компоненты.

Пример:

<template>
   <AccordionRoot
     v-bind="forwarded"
     class="w-full"
     collapsible
   >
     <AccordionItem
       v-for="item in items"
       :key="item.value"
       :value="item.value"
     >
       <AccordionTrigger>{{ item.title }}</AccordionTrigger>
       <AccordionContent>
         {{ item.content }}
       </AccordionContent>
     </AccordionItem>
   </AccordionRoot> 
 </template>

 <script setup lang="ts"> 
 import { AccordionItem, AccordionTrigger, AccordionTrigger, AccordionContent, AccordionRoot } from 'mechtaui-shop';
 </script>

Ссылки