optimatica-meters-vue

Vue 3 компонент MeterPhotoAnalyzer — загрузка, камера, отправка и отображение результата. Поддерживает несколько фото за один раз (до 10): мультивыбор файлов, drag-and-drop пачкой и дозапись кадров с камеры.

Playground

Попробуйте компонент в браузере: Vue SDK Playground.

Установка

npm install optimatica-meters-vue optimatica-meters

Peer dependency: Vue ^3.5

Подключение

// main.ts
import { createApp } from 'vue'
import { configureZhkhSdk } from 'optimatica-meters-vue'
import App from './App.vue'

configureZhkhSdk({ apiKey: 'eyJhbGci...' })

createApp(App).mount('#app')

<script setup lang="ts">
import { MeterPhotoAnalyzer } from 'optimatica-meters-vue'
import 'optimatica-meters-vue/style.css'
</script>

<template>
  <MeterPhotoAnalyzer api-key="eyJhbGci..." />
</template>

Vue plugin

import { createZhkhSdkPlugin } from 'optimatica-meters-vue'

app.use(createZhkhSdkPlugin({
  apiKey: 'eyJhbGci...',
}))
// регистрирует глобально <ZhkhMeterPhotoAnalyzer />

Props

Prop	Тип	По умолчанию	Описание
apiKey	string	—	API-ключ (JWT)
showApiKeyInput	boolean	auto	Поле ввода ключа
showRawJson	boolean	false	Показать сырой JSON-ответ
disabled	boolean	false	Отключить UI
theme	'light' | 'dark' | 'auto'	'auto'	Цветовая тема. auto следует prefers-color-scheme
loadFonts	boolean	false	Подгрузить шрифты дизайна (Space Grotesk, IBM Plex) с Google Fonts

Темы и шрифты

Виджет поставляется в двух темах из дизайна — тёмной и светлой. theme="auto" (по умолчанию) следует prefers-color-scheme:

<MeterPhotoAnalyzer :api-key="apiKey" theme="dark" />

Типографика построена на Space Grotesk (заголовки) и IBM Plex Mono/Sans. По умолчанию используется системный стек со шрифтовыми фолбэками без внешних запросов. Для точного вида макета подключите шрифты на своей странице либо передайте load-fonts — виджет один раз добавит <link> на Google Fonts.

Events

Event	Payload
analyze-start	File (по разу на каждое отправленное фото)
success	{ success: true, meter } (по разу на каждый распознанный счётчик)
error	string
complete	(response, error) — response есть только при единственном фото
results	AnalyzeMeterResponse[] — массив результатов по всем фото

Composable

import { useMeterAnalyze } from 'optimatica-meters-vue'

const { isLoading, response, responses, error, analyze, analyzeMany, reset } =
  useMeterAnalyze()

// одно фото
await analyze(file)
// несколько фото
await analyzeMany([file1, file2])

responses — массив результатов по всем фото; response хранит единственный результат (или null при пакетной отправке).

Стили

import 'optimatica-meters-vue/style.css'

Компонент использует scoped CSS с префиксом zhkh-analyzer__* и CSS-переменными — работает без Tailwind.