mikuru 1.0.37 → 1.0.39

package/components/MikuruDatePicker.mikuru

@@ -0,0 +1,293 @@
+<template>
+  <div class="mikuru-date-picker" ref="rootEl" @keydown="handleKeydown">
+    <label>
+      <span>{{ label }}</span>
+      <button
+        class="date-trigger"
+        type="button"
+        :aria-expanded="isOpen ? 'true' : 'false'"
+        aria-haspopup="dialog"
+        @click="toggle"
+      >
+        {{ displayValue }}
+      </button>
+    </label>
+
+    <section m-if="isOpen" class="calendar-panel" role="dialog" :aria-label="label">
+      <header>
+        <button type="button" aria-label="Previous month" @click="previousMonth">‹</button>
+        <strong>{{ monthLabel }}</strong>
+        <button type="button" aria-label="Next month" @click="nextMonth">›</button>
+      </header>
+
+      <div class="weekday-row" aria-hidden="true">
+        <span m-for="day in weekdays" :key="day">{{ day }}</span>
+      </div>
+
+      <div class="day-grid">
+        <button
+          m-for="day in calendarDays"
+          :key="day.key"
+          type="button"
+          class="day-button"
+          :class="{ muted: !day.inMonth, selected: day.value === selectedValue, today: day.value === todayValue }"
+          @click="selectDate(day)"
+        >
+          {{ day.label }}
+        </button>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
+
+const {
+  label = "Date",
+  modelValue = "",
+  placeholder = "Select date",
+  locale = "en-US"
+} = defineProps({
+  label: String,
+  modelValue: String,
+  placeholder: String,
+  locale: String
+});
+
+const emit = defineEmits(["update:modelValue", "change", "open", "close"]);
+const rootEl = ref(null);
+const isOpen = ref(false);
+const selectedValue = ref("");
+const viewYear = ref(new Date().getFullYear());
+const viewMonth = ref(new Date().getMonth());
+const weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+const todayValue = formatDateValue(new Date());
+
+watch(modelValue, syncSelectedDate, { immediate: true });
+
+const displayValue = computed(() => {
+  if (!selectedValue.value) return placeholder.value;
+  return formatDateLabel(parseDateValue(selectedValue.value));
+});
+
+const monthLabel = computed(() => {
+  const date = new Date(viewYear.value, viewMonth.value, 1);
+  return date.toLocaleDateString(locale.value || "en-US", { month: "long", year: "numeric" });
+});
+
+const calendarDays = computed(() => {
+  const firstDay = new Date(viewYear.value, viewMonth.value, 1);
+  const startOffset = firstDay.getDay();
+  const startDate = new Date(viewYear.value, viewMonth.value, 1 - startOffset);
+  const days = [];
+  for (let index = 0; index < 42; index += 1) {
+    const date = new Date(startDate);
+    date.setDate(startDate.getDate() + index);
+    const value = formatDateValue(date);
+    days.push({
+      key: value,
+      value,
+      label: String(date.getDate()),
+      inMonth: date.getMonth() === viewMonth.value
+    });
+  }
+  return days;
+});
+
+onMounted(() => {
+  document.addEventListener("pointerdown", handleDocumentPointer);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", handleDocumentPointer);
+});
+
+function syncSelectedDate() {
+  selectedValue.value = normalizeDateValue(modelValue.value);
+  const selected = parseDateValue(selectedValue.value);
+  if (!selected) return;
+  viewYear.value = selected.getFullYear();
+  viewMonth.value = selected.getMonth();
+}
+
+function open() {
+  if (isOpen.value) return;
+  isOpen.value = true;
+  emit("open");
+}
+
+function close() {
+  if (!isOpen.value) return;
+  isOpen.value = false;
+  emit("close");
+}
+
+function toggle() {
+  if (isOpen.value) {
+    close();
+    return;
+  }
+  open();
+}
+
+function selectDate(day) {
+  selectedValue.value = day.value;
+  emit("update:modelValue", day.value);
+  emit("change", day.value);
+  close();
+}
+
+function previousMonth() {
+  const date = new Date(viewYear.value, viewMonth.value - 1, 1);
+  viewYear.value = date.getFullYear();
+  viewMonth.value = date.getMonth();
+}
+
+function nextMonth() {
+  const date = new Date(viewYear.value, viewMonth.value + 1, 1);
+  viewYear.value = date.getFullYear();
+  viewMonth.value = date.getMonth();
+}
+
+function handleDocumentPointer(event) {
+  const root = rootEl.value;
+  if (!root || root.contains(event.target)) return;
+  close();
+}
+
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    close();
+  }
+}
+
+function normalizeDateValue(value) {
+  const parsed = parseDateValue(value);
+  return parsed ? formatDateValue(parsed) : "";
+}
+
+function parseDateValue(value) {
+  if (!value || typeof value !== "string") return null;
+  const match = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (!match) return null;
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+function formatDateValue(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function formatDateLabel(date) {
+  if (!date) return placeholder.value;
+  return date.toLocaleDateString(locale.value || "en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+</script>
+
+<style scoped>
+.mikuru-date-picker {
+  position: relative;
+  display: inline-block;
+  color: #111827;
+  font: inherit;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  font-weight: 650;
+}
+
+.date-trigger {
+  min-width: 190px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #111827;
+  background: #ffffff;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.calendar-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 45;
+  display: grid;
+  gap: 10px;
+  width: 286px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 16%);
+}
+
+header,
+.weekday-row,
+.day-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 4px;
+}
+
+header {
+  grid-template-columns: 34px 1fr 34px;
+  align-items: center;
+}
+
+header strong {
+  text-align: center;
+}
+
+button {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+header button,
+.day-button {
+  min-height: 34px;
+}
+
+.weekday-row span {
+  color: #64748b;
+  text-align: center;
+  font-size: 0.82rem;
+}
+
+.day-button:hover,
+.day-button:focus-visible,
+.date-trigger:focus-visible {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 16%);
+}
+
+.day-button.muted {
+  color: #94a3b8;
+}
+
+.day-button.today {
+  border-color: #93c5fd;
+}
+
+.day-button.selected {
+  border-color: #2563eb;
+  color: #ffffff;
+  background: #2563eb;
+}
+</style>

package/components/MikuruDrawer.mikuru

@@ -0,0 +1,115 @@
+<template>
+  <Teleport to="body">
+    <div m-if="open" class="drawer-layer" :data-side="side">
+      <button
+        class="drawer-backdrop"
+        type="button"
+        aria-label="Close drawer"
+        @click="handleBackdrop"
+      ></button>
+      <aside class="mikuru-drawer" role="dialog" aria-modal="true" :aria-label="title || 'Drawer'">
+        <header class="drawer-header">
+          <strong>{{ title }}</strong>
+          <button type="button" class="drawer-close" @click="close">{{ closeLabel }}</button>
+        </header>
+        <div class="drawer-body">
+          <slot>{{ body }}</slot>
+        </div>
+      </aside>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+const {
+  open = false,
+  title = "Drawer",
+  body = "",
+  side = "right",
+  closeLabel = "Close",
+  closeOnBackdrop = true
+} = defineProps({
+  open: Boolean,
+  title: String,
+  body: String,
+  side: String,
+  closeLabel: String,
+  closeOnBackdrop: Boolean
+});
+
+const emit = defineEmits(["close"]);
+
+function close() {
+  emit("close");
+}
+
+function handleBackdrop() {
+  if (closeOnBackdrop.value) close();
+}
+</script>
+
+<style scoped>
+.drawer-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 70;
+  display: flex;
+}
+
+.drawer-layer[data-side="right"] {
+  justify-content: flex-end;
+}
+
+.drawer-layer[data-side="left"] {
+  justify-content: flex-start;
+}
+
+.drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(15 23 42 / 46%);
+  cursor: pointer;
+}
+
+.mikuru-drawer {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  width: min(420px, 92vw);
+  height: 100%;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 24%);
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 16px;
+}
+
+.drawer-close {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px 10px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawer-close:focus-visible {
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+.drawer-body {
+  overflow: auto;
+  padding: 16px;
+  line-height: 1.6;
+}
+</style>

package/components/MikuruEmptyState.mikuru

@@ -0,0 +1,72 @@
+<template>
+  <section class="mikuru-empty-state">
+    <div class="empty-icon" aria-hidden="true">{{ icon }}</div>
+    <h3>{{ title }}</h3>
+    <p>{{ description }}</p>
+    <button m-if="actionLabel" type="button" @click="emitAction">{{ actionLabel }}</button>
+  </section>
+</template>
+
+<script>
+const {
+  icon = "∅",
+  title = "No results",
+  description = "There is nothing to show yet.",
+  actionLabel = ""
+} = defineProps({
+  icon: String,
+  title: String,
+  description: String,
+  actionLabel: String
+});
+
+const emit = defineEmits(["action"]);
+
+function emitAction() {
+  emit("action");
+}
+</script>
+
+<style scoped>
+.mikuru-empty-state {
+  display: grid;
+  gap: 8px;
+  justify-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 24px;
+  color: #334155;
+  background: #ffffff;
+  text-align: center;
+}
+
+.empty-icon {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 999px;
+  color: #2563eb;
+  background: #eff6ff;
+  font-weight: 800;
+}
+
+h3,
+p {
+  margin: 0;
+}
+
+h3 {
+  color: #111827;
+}
+
+button {
+  border: 1px solid #2563eb;
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: #ffffff;
+  background: #2563eb;
+  font: inherit;
+  cursor: pointer;
+}
+</style>

package/components/MikuruFileUpload.mikuru

@@ -0,0 +1,161 @@
+<template>
+  <section class="mikuru-file-upload" :data-dragging="dragging ? 'true' : 'false'">
+    <label :for="inputId">{{ label }}</label>
+    <div
+      class="drop-zone"
+      @dragover="handleDragOver"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
+    >
+      <input
+        :id="inputId"
+        type="file"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        @change="handleInput"
+      />
+      <span>{{ prompt }}</span>
+      <small m-if="help">{{ help }}</small>
+    </div>
+    <ul m-if="fileItems.length">
+      <li m-for="file in fileItems" :key="file.name">
+        <span>{{ file.name }}</span>
+        <small>{{ file.size }}</small>
+      </li>
+    </ul>
+    <button m-if="fileItems.length" type="button" @click="clear">Clear files</button>
+  </section>
+</template>
+
+<script>
+import { ref } from "mikuru";
+
+const {
+  label = "Upload files",
+  prompt = "Choose files or drop them here",
+  help = "",
+  accept = "",
+  multiple = false,
+  disabled = false
+} = defineProps({
+  label: String,
+  prompt: String,
+  help: String,
+  accept: String,
+  multiple: Boolean,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["change", "clear"]);
+const inputId = `mikuru-file-${Math.random().toString(36).slice(2)}`;
+const dragging = ref(false);
+const fileItems = ref([]);
+
+function handleInput(event) {
+  setFiles(event.target.files || []);
+}
+
+function handleDragOver(event) {
+  if (disabled.value) return;
+  event.preventDefault();
+  dragging.value = true;
+}
+
+function handleDragLeave() {
+  dragging.value = false;
+}
+
+function handleDrop(event) {
+  if (disabled.value) return;
+  event.preventDefault();
+  dragging.value = false;
+  setFiles(event.dataTransfer?.files || []);
+}
+
+function setFiles(fileList) {
+  const files = Array.from(fileList);
+  fileItems.value = files.map((file) => ({
+    name: file.name,
+    size: formatSize(file.size)
+  }));
+  emit("change", files);
+}
+
+function clear() {
+  fileItems.value = [];
+  emit("clear");
+}
+
+function formatSize(size) {
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${Math.round(size / 102.4) / 10} KB`;
+  return `${Math.round(size / 1024 / 102.4) / 10} MB`;
+}
+</script>
+
+<style scoped>
+.mikuru-file-upload {
+  display: grid;
+  gap: 8px;
+  color: #111827;
+  font: inherit;
+}
+
+label {
+  font-weight: 650;
+}
+
+.drop-zone {
+  display: grid;
+  gap: 6px;
+  justify-items: center;
+  border: 1px dashed #94a3b8;
+  border-radius: 8px;
+  padding: 18px;
+  background: #f8fafc;
+  text-align: center;
+}
+
+.mikuru-file-upload[data-dragging="true"] .drop-zone {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+input {
+  max-width: 100%;
+}
+
+small {
+  color: #64748b;
+}
+
+ul {
+  display: grid;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: #ffffff;
+}
+
+button {
+  width: fit-content;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px 10px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+</style>

package/components/MikuruKbd.mikuru

@@ -0,0 +1,28 @@
+<template>
+  <kbd class="mikuru-kbd"><slot>{{ label }}</slot></kbd>
+</template>
+
+<script>
+const {
+  label = "Ctrl"
+} = defineProps({
+  label: String
+});
+</script>
+
+<style scoped>
+.mikuru-kbd {
+  display: inline-flex;
+  align-items: center;
+  min-width: 1.6em;
+  min-height: 1.55em;
+  border: 1px solid #cbd5e1;
+  border-bottom-color: #94a3b8;
+  border-radius: 6px;
+  padding: 1px 6px;
+  color: #111827;
+  background: #f8fafc;
+  box-shadow: inset 0 -1px 0 #cbd5e1;
+  font: 0.82em/1.2 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
+}
+</style>