bfg-common 1.5.18 → 1.5.20

package/CODE_STYLE.md

@@ -0,0 +1,109 @@
+![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)
+## Javascript
+
+### Название переменных
+
+Используем camelCase:
+```javascript
+const theExample = 0
+```
+
+Название переменных должно быть содержательным:
+```javascript
+const desc = 'some description' // Плохо
+
+const description = 'some description' // Хорошо
+```
+
+Если переменная типа boolean, используем префиксы is или has:
+```javascript
+const isDisabled = true
+
+const hasName = false
+```
+
+Приоритетно используем стрелочные функции:
+```javascript
+const example = () => {...}
+```
+
+---
+
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+## Typescript
+
+### Interface
+Название интерфейсов начинаем с префикса **I_** (также есть **API_**, **UI_**, подробно об этом написано в файле PROJECT_STRUCTURE.md):
+```typescript
+interface I_Example
+```
+
+### Type
+Название типов начинаем с префикса **T_**:
+```typescript
+type T_Example
+```
+
+### Enum
+Название enum начинаем с префикса **E_**:
+```typescript
+enum E_Example
+```
+
+P.S. Нужно писать как можно более понятные типы.
+
+---
+
+![Vue.js](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D)
+## Vue
+
+### Название тегов
+Используем kebab-case:
+```html
+<the-button>Button</the-button>
+```
+
+### Название тега
+Название тега не должно состоять из одного слова:
+```html
+<example></example> // Плохо
+
+<the-example></the-example> // Хорошо
+```
+
+### Использование "the" в названии тега 
+Если название тега, к примеру, icon, должно быть так:
+```html
+<the-icon></the-icon>
+```
+
+### Использование самозакрывающихся тегов
+Если в тег ничего не передаем, то используем его как самозакрывающийся:
+```html
+<the-icon/>
+```
+
+### Props / Emits
+Props пишем в kebab-case:
+```html
+<the-example my-name="Name"/>
+```
+
+Emits пишем в kebab-case, ключ первого аргумента всегда "event", а второго - "value":
+```javascript
+const emits = defineEmits<{
+  (event: 'change-name', value: string): void
+}>()
+``` 
+
+### Composition API
+Так как у нас используется Composition API, нужно весь код группировать по блокам:
+```javascript
+const isShowModal = ref<boolean>(false)
+const toggleModal = (): void => isShowModal.value = !isShowModal.value
+
+const errors = ref<string[]>([])
+const updateErrors = (newErrors: string[]): void => {
+    errors.value = newErrors
+}
+``` 

package/PROJECT_STRUCTURE.md

@@ -26,8 +26,35 @@
 
 ---
 
-## models
-Папка в которой хронятся interfaces, types и enums глобальные и к примеру те которые нельзя создавать в plugins и т.п.
+## lib
+Папка содержит глобальные утилиты, конфигурации и модели:
+
+### config
+В папке config хранятся файлы типа *.ts, в них находятся конфигурации.
+Название переменных в конфигурации заканчивается на Func, если это функция.
+```typescript
+const exempleFunc = (localization: UI_I_localization): I_Exemple => {...}
+
+const steps = [0, 1, 2, 3]
+```
+
+### models
+Содержит interfaces, types и enums, глобальные и те, которые нельзя создавать в pages, store, plugins и т.п.
+
+### utils
+Содержит вспомогательные утилиты и функции общего назначения
+
+Структура папки lib:
+```
+lib
+ |-config
+ |  |-someConfig.ts
+ |-models
+ |  |-interfaces.ts
+ |  |-types.ts
+ |  |-enums.ts
+ |-utils.ts
+```
 
 ---
 
@@ -40,3 +67,64 @@
 Можно ознакомится по документации nuxt 3
 
 ---
+
+## store (Vuex)
+Стор у нас модульный, модули создаются как минимум по роутингу.
+
+Основная структура такая:
+
+```
+lib
+ |-config
+ |  |-someConfig.ts
+ |-models
+ |  |-interfaces.ts
+ |  |-types.ts
+ |  |-enums.ts
+ |-utils.ts
+mappers
+ |-someMapper.ts
+actions.ts
+getters.ts
+mutations.ts
+state.ts
+store.ts
+```
+
+#### lib
+В папке lib находятся:
+- config - конфигурации store
+- models - интерфейсы и типы для store
+- utils.ts - вспомогательные функции
+
+#### mappers
+В папке mappers хранятся файлы .ts формата, в которых есть функции (мапперы), обрабатывающие ответ от бэка так, чтобы было удобно использовать на фронте.
+
+Мапперы вызываются только из файла actions.ts и после обработки через mutations.ts попадают в state.
+
+#### actions.ts
+В этом файле в основном делаются запросы на бэк и обработка данных.
+
+#### getters.ts
+В этом файле есть методы, которые возвращают данные из state.
+
+#### mutations.ts
+В этом файле изменяем/обновляем данные из state.
+
+#### state.ts
+В этом файле хранятся переменные.
+
+#### store.ts
+В этом файле все собирается воедино.
+
+---
+
+## Название папок/файлов
+
+Название всех папок пишем в camelCase.
+
+Название всех файлов кроме *.vue(компонент) пишем camelCase
+
+Название всех файлов в pages *.vue (компонент) пишем в kebab-case.
+
+Название всех файлов вне pages *.vue (компонент) пишем в PascalCase.

package/components/common/chartOptionsModal/counters/timespan/form/Form.vue

@@ -1,43 +1,43 @@
 <template>
   <common-chart-options-modal-counters-timespan-form-new
-      v-if="isNewView"
-      v-model:local-selected-timespan="localSelectedTimespan"
-      v-model:local-period-type="localPeriodType"
-      v-model:local-last="localLast"
-      v-model:local-selected-custom-time="localSelectedCustomTime"
-      v-model:local-current-date-from="localCurrentDateFrom"
-      v-model:current-time-from="currentTimeFrom"
-      v-model:current-time-to="currentTimeTo"
-      v-model:current-date-to="currentDateTo"
-      :timespan-options="timespanOptions"
-      :custom-time-options="customTimeOptions"
-      :language="props.language"
-      :error-last-input="props.errorLastInput"
-      :error-date-from="props.errorDateFrom"
-      :error-time-from="props.errorTimeFrom"
-      :error-date-to="props.errorDateTo"
-      :error-time-to="props.errorTimeTo"
+    v-if="isNewView"
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:current-date-to="currentDateTo"
+    :timespan-options="timespanOptions"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :error-last-input="props.errorLastInput"
+    :error-date-from="props.errorDateFrom"
+    :error-time-from="props.errorTimeFrom"
+    :error-date-to="props.errorDateTo"
+    :error-time-to="props.errorTimeTo"
   />
   <common-chart-options-modal-counters-timespan-form-old
-      v-else
-      v-model:local-selected-timespan="localSelectedTimespan"
-      v-model:local-period-type="localPeriodType"
-      v-model:local-last="localLast"
-      v-model:local-selected-custom-time="localSelectedCustomTime"
-      v-model:local-current-date-from="localCurrentDateFrom"
-      v-model:date-from="dateFrom"
-      v-model:current-date-to="currentDateTo"
-      v-model:date-to="dateTo"
-      v-model:current-time-to="currentTimeTo"
-      v-model:chart-type="chartType"
-      :timespan-options="timespanOptions"
-      :period-type-text="periodTypeText"
-      :custom-time-options="customTimeOptions"
-      :language="props.language"
-      :current-time-from="currentTimeFrom"
-      :chart-type-options="chartTypeOptions"
-      @update-date-from="onUpdateDateFrom"
-      @update-date-to="onUpdateDateTo"
+    v-else
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:date-from="dateFrom"
+    v-model:current-date-to="currentDateTo"
+    v-model:date-to="dateTo"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:chart-type="chartType"
+    :timespan-options="timespanOptions"
+    :period-type-text="periodTypeText"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :chart-type-options="chartTypeOptions"
+    @update-date-from="onUpdateDateFrom"
+    @update-date-to="onUpdateDateTo"
   />
 </template>
 
@@ -83,64 +83,64 @@ const emits = defineEmits<{
 }>()
 
 const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
-    useNuxtApp()
+  useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const timespanOptions = computed<UI_I_OptionItem[]>(() =>
-    timespanFunc(localization.value)
+  timespanFunc(localization.value)
 )
 const localSelectedTimespan = ref<string>(
-    props.selectedTimespanType || timespanOptions.value[0].value
+  props.selectedTimespanType || timespanOptions.value[0].value
 )
 watch(
-    () => props.selectedTimespanType,
-    (newValue) => {
-      localSelectedTimespan.value = newValue || timespanOptions.value[0].value
-    }
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
 )
 const localPeriodType = ref<string>('last')
 watch(
-    () => props.periodType,
-    (newValue) => {
-      localPeriodType.value = newValue || 'last'
-    },
-    { immediate: true }
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
 )
 
 watch(
-    localSelectedTimespan,
-    (newValue) => {
-      emits('update-timespan-type', newValue)
-    },
-    { immediate: true }
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
 )
 
 watch(
-    localPeriodType,
-    (newValue) => {
-      const currentValue = newValue || 'period'
-      emits('update-period-type', currentValue)
-    },
-    { immediate: true }
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
 )
 
 const localLast = ref<number>(1)
 watch(
-    localLast,
-    (newValue) => {
-      emits('update-unit-count', newValue)
-    },
-    { immediate: true }
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
 )
 watch(
-    () => props.unitsCount,
-    (newValue) => {
-      localLast.value = newValue > 0 ? newValue : 1
-    },
-    { immediate: true }
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
 )
 
 const localSelectedCustomTime = ref<string>('hours')
@@ -150,23 +150,23 @@ const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
   return customTimeFunc(localization.value, localLast.value, lang)
 })
 watch(
-    () => props.selectedCustomTime,
-    (newValue) => {
-      localSelectedCustomTime.value = newValue || 'hours'
-    },
-    { immediate: true }
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
 )
 watch(
-    localSelectedCustomTime,
-    (newValue) => {
-      emits('update-custom-time', newValue)
-    },
-    { immediate: true }
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
 )
 
 const chartType = ref<string>('line_graph')
 const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
-    chartTypeFunc(localization.value)
+  chartTypeFunc(localization.value)
 )
 
 const periodTypeText = computed<string>(() => {
@@ -202,24 +202,24 @@ const setCurrentChartType = (): void => {
 }
 
 watch(
-    () => props.selectedChartType,
-    () => {
-      setCurrentChartType()
-    },
-    { immediate: true }
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
 )
 
 watch(
-    chartType,
-    (newValue) => {
-      let currentValue = 'spline'
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
 
-      if (newValue === 'line_graph') currentValue = 'spline'
-      else if (newValue === 'stacked_graph') currentValue = 'area'
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
 
-      emits('update-chart-type', currentValue)
-    },
-    { immediate: true }
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
 )
 
 const yesterday = new Date().setDate(new Date().getDate() - 1)
@@ -233,14 +233,14 @@ const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
   localCurrentDateFrom.value =
-      props.customDateFrom || $formattedDate(yesterday, '')
+    props.customDateFrom || $formattedDate(yesterday, '')
   currentDateTo.value =
-      props.customDateTo || $formattedDate(props.validDateEnd, '')
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
 
   currentTimeFrom.value =
-      props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
   currentTimeTo.value =
-      props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
 }
 
 const onUpdateDateFrom = (value: number): void => {

package/components/common/chartOptionsModal/counters/timespan/form/Form.vue~

@@ -0,0 +1,281 @@
+<template>
+  <common-chart-options-modal-counters-timespan-form-new
+    v-if="isNewView"
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:current-date-to="currentDateTo"
+    :timespan-options="timespanOptions"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :error-last-input="props.errorLastInput"
+    :error-date-from="props.errorDateFrom"
+    :error-time-from="props.errorTimeFrom"
+    :error-date-to="props.errorDateTo"
+    :error-time-to="props.errorTimeTo"
+  />
+  <common-chart-options-modal-counters-timespan-form-old
+    v-else
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:date-from="dateFrom"
+    v-model:current-date-to="currentDateTo"
+    v-model:date-to="dateTo"
+    v-model:current-time-to="currentTimeTo"
+    v-model:chart-type="chartType"
+    :timespan-options="timespanOptions"
+    :period-type-text="periodTypeText"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :current-time-from="currentTimeFrom"
+    :chart-type-options="chartTypeOptions"
+    @update-date-from="onUpdateDateFrom"
+    @update-date-to="onUpdateDateTo"
+  />
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import {
+  timespanFunc,
+  customTimeFunc,
+  chartTypeFunc,
+} from '~/components/common/chartOptionsModal/counters/timespan/form/lib/config/dateForm'
+
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', value: string): void
+  (event: 'update-timespan-type', value: string): void
+  (event: 'update-unit-count', value: number): void
+  (event: 'update-period-type', value: string): void
+  (event: 'update-custom-date-from', value: string): void
+  (event: 'update-custom-date-to', value: string): void
+  (event: 'update-custom-time-from', value: string): void
+  (event: 'update-custom-time-to', value: string): void
+}>()
+
+const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
+  useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const timespanOptions = computed<UI_I_OptionItem[]>(() =>
+  timespanFunc(localization.value)
+)
+const localSelectedTimespan = ref<string>(
+  props.selectedTimespanType || timespanOptions.value[0].value
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
+)
+const localPeriodType = ref<string>('last')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
+)
+
+watch(
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
+)
+
+watch(
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const localLast = ref<number>(1)
+watch(
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
+)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
+)
+
+const localSelectedCustomTime = ref<string>('hours')
+const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
+  const lang = useLocalStorage('lang')
+
+  return customTimeFunc(localization.value, localLast.value, lang)
+})
+watch(
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
+)
+
+const chartType = ref<string>('line_graph')
+const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
+  chartTypeFunc(localization.value)
+)
+
+const periodTypeText = computed<string>(() => {
+  let text = ''
+  const lang = useLocalStorage('lang')
+
+  if (lang !== 'ru_RU') text = localization.value.common.last
+  else text = getCorrectRuPeriodTypeText(localLast.value)
+
+  return text
+})
+
+const getCorrectRuPeriodTypeText = (hours: number): string => {
+  let prefix: string
+
+  if (!hours) return getCorrectRuPeriodTypeText.prefix
+
+  if (hours % 10 === 1 && hours % 100 !== 11) prefix = 'Последний'
+  else prefix = 'Последние'
+
+  getCorrectRuPeriodTypeText.prefix = prefix
+  return prefix
+}
+
+const setCurrentChartType = (): void => {
+  const selected = props.selectedChartType
+  let result = 'line_graph'
+
+  if (selected === 'spline') result = 'line_graph'
+  else if (selected === 'area') result = 'stacked_graph'
+
+  chartType.value = result
+}
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
+)
+
+watch(
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
+
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
+
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const yesterday = new Date().setDate(new Date().getDate() - 1)
+const dateFrom = ref<number>(yesterday)
+const dateTo = ref<number>(new Date().getTime())
+
+const localCurrentDateFrom = ref<string>('')
+const currentDateTo = ref<string>('')
+const currentTimeFrom = ref<string>('')
+const currentTimeTo = ref<string>('')
+
+const getCurrentTime = (): void => {
+  localCurrentDateFrom.value =
+    props.customDateFrom || $formattedDate(yesterday, '')
+  currentDateTo.value =
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
+
+  currentTimeFrom.value =
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+  currentTimeTo.value =
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+}
+
+const onUpdateDateFrom = (value: number): void => {
+  if (!value) return
+
+  localCurrentDateFrom.value = $formattedDate(new Date(value), '')
+}
+watch(localCurrentDateFrom, (newValue) => {
+  emits('update-custom-date-from', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
+})
+
+const onUpdateDateTo = (value: number): void => {
+  if (!value) return
+
+  currentDateTo.value = $formattedDate(new Date(value), '')
+}
+watch(currentDateTo, (newValue) => {
+  emits('update-custom-date-to', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
+})
+watch(currentTimeFrom, (newValue) => {
+  emits('update-custom-time-from', newValue)
+})
+watch(currentTimeTo, (newValue) => {
+  emits('update-custom-time-to', newValue)
+})
+
+onMounted(() => {
+  getCurrentTime()
+})
+</script>
+
+<style scoped lang="scss"></style>

package/composables/useLocalStorage.ts

@@ -1,4 +1,4 @@
-const lastTimestamp = 1740651960445
+const lastTimestamp = 1744866033269
 
 export const useLocalStorage = (
   name: string,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.18",
+  "version": "1.5.20",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.21",
-    "bfg-uikit": "1.0.375",
+    "bfg-uikit": "1.0.377",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }

package/package.json~

@@ -0,0 +1,42 @@
+{
+  "name": "bfg-common",
+  "private": false,
+  "version": "1.5.19",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev --port=3002",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "minify": "node minify.js",
+    "prepublishOnly": "node minify.js"
+  },
+  "devDependencies": {
+    "@novnc/novnc": "1.4.0",
+    "@vueuse/core": "10.1.2",
+    "@vueuse/nuxt": "10.1.2",
+    "eslint-config-prettier": "^8.5.0",
+    "nuxt": "3.11.2",
+    "prettier": "2.7.1",
+    "sass": "^1.54.9",
+    "sass-loader": "^10.3.1",
+    "terser": "^5.22.0",
+    "vite-plugin-eslint": "^1.8.1",
+    "xterm": "^5.1.0",
+    "xterm-addon-attach": "^0.8.0",
+    "xterm-addon-fit": "^0.7.0",
+    "xterm-addon-serialize": "^0.9.0",
+    "xterm-addon-unicode11": "^0.5.0",
+    "xterm-addon-web-links": "^0.8.0",
+    "eslint-plugin-myrules": "file:./eslint"
+  },
+  "dependencies": {
+    "@nuxtjs/eslint-config-typescript": "^12.0.0",
+    "@vueuse/components": "^10.1.2",
+    "date-fns": "^2.29.3",
+    "bfg-nuxt-3-graph": "1.0.21",
+    "bfg-uikit": "1.0.377",
+    "html2canvas": "^1.4.1",
+    "prettier-eslint": "^15.0.1"
+  }
+}