_pdata Лotion

npm i @dashibase/lotion

<template>
  <Lotion :page="page" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import { Lotion, registerBlock } from '@dashibase/lotion'
``````markdown
### 3. Создание пользовательских компонентов

Увидеть пример создания пользовательского блока в `examples/CustomBlock.vue`.

Компонент пользовательского блока может принимать следующие свойства:
- `block`: Объект типа `Block`. Подробнее см. `src/utils/types.ts`.
- `readonly`: Логическое значение, которое указывает, находится ли блок/редактор в режиме только для чтения. Кастомный компонент блока также может опционально выдавать следующие методы (не забудьте вызвать `defineExpose`):

- `onSet`: Этот метод срабатывает, когда пользователь преобразует любой блок в этот тип блока. Вызывается до изменения типа блока.
- `onUnset`: Этот метод срабатывает, когда пользователь преобразует этот блock в любой другой тип блока. Вызывается до изменения типа блока.

```javascript
<template>
  <div>
    🧴
  </div>
</template>
<script setup lang="ts">
import { PropType } from 'vue'
import { types } from '../src'

const props = defineProps({
  block: {
    type: Object as PropType<types.Block>,
    required: true,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
})

function onSet() {
  alert('Увлажнение...')
}

function onUnset() {
  alert('Увлажнено!')
}

defineExpose({
  onSet,
  onUnset,
})
</script>

import CustomBlock from './CustomBlock.vue';
import { addIcons } from "oh-vue-icons";
import { FaPumpSoap } from "oh-vue-icons/icons";
import { registerBlock } from '@dashibase/lotion';

// Добавление иконки (из oh-vue-icons.js.org/)
addIcons(FaPumpSoap);
// Регистрация блока
// registerBlock('<BLOCK_TYPE_ID>', '<BLOCK_TYPE_LABEL>', <BLOCK_COMPONENT>, 'BLOCK_ICON')
registerBlock('LOTION', 'Увлажнение', CustomBlock, 'fa-pump-soap');
</script>
```

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

## Вклад

**1. Клонируйте это хранилище, перейдите в корневую директорию и установите пакеты**

```bash
git clone https://github.com/dashibase/lotion
cd lotion
npm i
```

**2. Запустите разработку**

```bash
npm run dev
```

Если вы перейдете по адресу http://localhost:5173 в вашем браузере, вы должны увидеть то, что похоже на скриншот выше.

**3. Принимайте участие!**

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

Мы будем рады сделать Lotion более расширяемой и приветствуем любые предложения или вклады!

См. CONTRIBUTING.md для подробностей.

## Отзывы

Это стало возможным благодаря следующим библиотекам и фреймворкам, спасибо им за это! - [vue-draggable-next](https://github.com/anish2690/vue-draggable-next)  
- [tiptap](https://tiptap.dev/) и [ProseMirror](https://prosemirror.net/)  
- [Vue 3](https://vuejs.org/)  
- [Vite](https://vitejs.dev/)  
- [TypeScript](https://www.typescriptlang.org/)  
- [Tailwind CSS](https://tailwindcss.com/)  
- [Headless UI](https://headlessui.dev/)  
- [Oh, Vue Icons!](https://oh-vue-icons.js.org/)  
- [Vitest](https://vitest.dev/)  
- [Playwright](https://playwright.dev/)