eea-cron-picker

eeaCronPicker

Vue 3 компонент для визуального создания cron-расписаний через селект-боксы.
Пользователь выбирает параметры в удобном интерфейсе — компонент возвращает готовое cron-выражение.

Возможности

• 🕐 Два режима: в определённое время и с интервалом
• 📅 Поддержка: каждую минуту, каждый час, каждый день, каждую неделю, каждый месяц
• 👁 Превью расписания на человеческом языке
• 🌍 Встроенная локализация: ru, en + поддержка кастомных локалей
• 🎨 Кастомизация стилей через CSS-переменные
• 🔌 v-model — работает как обычный input
• 📦 Без внешних зависимостей (нативный HTML/CSS)

Установка

Скопируй файлы в свой проект:

src/
├── eeaCronPicker.vue
└── locales.js

Использование

<template>
  <eeaCronPicker v-model="cronExpression" locale="ru" />
  <p>Cron: {{ cronExpression }}</p>
</template>

<script>
import eeaCronPicker from './src/eeaCronPicker.vue'

export default {
  components: { eeaCronPicker },
  data() {
    return {
      cronExpression: '* * * * *',
    }
  },
}
</script>

Props

Events

Локализация

Компонент поддерживает три способа локализации — в порядке приоритета:

1. Внешний i18n-фреймворк через translator

Передай функцию перевода (key, params?) => string из любого фреймворка:

<!-- vue-i18n -->
<eeaCronPicker v-model="cron" :translator="$t" />

<!-- i18next -->
<eeaCronPicker v-model="cron" :translator="(key, p) => i18next.t(key, p)" />

<!-- кастомная функция -->
<eeaCronPicker v-model="cron" :translator="(key) => myDict[key]" />

Добавь ключи из файла src/i18n-keys.js в свои переводы:

// messages.ru.js
export default {
  eeaCronPicker: {
    modeAt:    'В определённое время',
    modeEvery: 'С интервалом',
    // ... полный список ключей в src/i18n-keys.js
  }
}

Файл src/i18n-keys.js содержит экспорт KEYS (все константы ключей) и messages (готовые переводы на ru и en для вставки в свой проект).

2. Встроенные локали через locale

<!-- Русский (по умолчанию) -->
<eeaCronPicker v-model="cron" locale="ru" />

<!-- Английский -->
<eeaCronPicker v-model="cron" locale="en" />

3. Кастомный объект локали

Передай объект со своими переводами:

<eeaCronPicker v-model="cron" :locale="myLocale" />

const myLocale = {
  modeAt: 'Zum bestimmten Zeitpunkt',
  modeEvery: 'Mit Intervall',
  repeatLabel: 'Wiederholen',
  timeLabel: 'Zeit',
  everyLabel: 'Alle',
  repeatOptions: [
    { value: 'minute', label: 'Jede Minute' },
    { value: 'hour',   label: 'Jede Stunde' },
    { value: 'day',    label: 'Jeden Tag' },
    { value: 'week',   label: 'Jede Woche' },
    { value: 'month',  label: 'Jeden Monat' },
  ],
  intervalUnits: [
    { value: 'minute', label: 'Minuten' },
    { value: 'hour',   label: 'Stunden' },
    { value: 'day',    label: 'Tage' },
  ],
  weekDays: [
    { value: 0, label: 'Sonntag' },
    { value: 1, label: 'Montag' },
    // ...
  ],
  monthDayLabel: 'Tag des Monats',
  previewEveryMinute: 'Jede Minute',
  previewAt: (repeat, extra, h, m) => `...`,
  previewEvery: (n, unit) => `Alle ${n} ${unit}`,
}

Кастомизация стилей

Переопредели CSS-переменные в своём проекте:

/* Светлая тема (по умолчанию) */
:root {
  --eea-cron-font-family: inherit;
  --eea-cron-font-size: 14px;
  --eea-cron-color: #303133;
  --eea-cron-bg: #ffffff;
  --eea-cron-border: #dcdfe6;
  --eea-cron-border-radius: 6px;
  --eea-cron-primary: #409eff;
  --eea-cron-preview-bg: #f4f4f5;
  --eea-cron-preview-color: #606266;
  --eea-cron-code-color: #409eff;
  --eea-cron-gap: 10px;
  --eea-cron-padding: 16px;
}

Пример тёмной темы

.my-dark-wrapper {
  --eea-cron-bg: #1e1e2e;
  --eea-cron-color: #cdd6f4;
  --eea-cron-border: #45475a;
  --eea-cron-primary: #89b4fa;
  --eea-cron-preview-bg: #181825;
  --eea-cron-preview-color: #a6adc8;
  --eea-cron-code-color: #89dceb;
}

<div class="my-dark-wrapper">
  <eeaCronPicker v-model="cron" />
</div>

Примеры cron-выражений

Демо

Открой demo.html в браузере — без сборщика, работает сразу.

Лицензия

MIT