mikuru 1.0.27 → 1.0.28

package/components/MikuruDropdown.mikuru

@@ -0,0 +1,153 @@
+<template>
+  <div class="mikuru-dropdown" ref="rootEl" @keydown="handleKeydown">
+    <button
+      class="dropdown-trigger"
+      type="button"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      aria-haspopup="menu"
+      @click="toggle"
+    >
+      <span>{{ label }}</span>
+      <span aria-hidden="true">⌄</span>
+    </button>
+
+    <div m-if="isOpen" class="dropdown-menu" role="menu">
+      <button
+        m-for="item in normalizedItems"
+        :key="item.value"
+        class="dropdown-item"
+        type="button"
+        role="menuitem"
+        :disabled="item.disabled"
+        @click="selectItem(item)"
+      >
+        <span>{{ item.label }}</span>
+        <small>{{ item.description }}</small>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref } from "mikuru";
+
+const {
+  label = "Menu",
+  items = []
+} = defineProps({
+  label: String,
+  items: Array
+});
+
+const emit = defineEmits(["select"]);
+const rootEl = ref(null);
+const isOpen = ref(false);
+const normalizedItems = computed(() => {
+  const source = Array.isArray(items.value) ? items.value : [];
+  return source.map((item, index) => {
+    if (typeof item === "string") {
+      return { label: item, value: item, description: "", disabled: false };
+    }
+    return {
+      label: item.label || `Item ${index + 1}`,
+      value: item.value ?? item.label ?? index,
+      description: item.description || "",
+      disabled: Boolean(item.disabled)
+    };
+  });
+});
+
+onMounted(() => {
+  document.addEventListener("pointerdown", handleDocumentPointer);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", handleDocumentPointer);
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+
+function close() {
+  isOpen.value = false;
+}
+
+function selectItem(item) {
+  if (item.disabled) return;
+  emit("select", item.value);
+  close();
+}
+
+function handleDocumentPointer(event) {
+  const root = rootEl.value;
+  if (!root || root.contains(event.target)) return;
+  close();
+}
+
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    close();
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 9px 12px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 40;
+  display: grid;
+  min-width: 220px;
+  overflow: hidden;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 16%);
+}
+
+.dropdown-item {
+  display: grid;
+  gap: 2px;
+  border: 0;
+  padding: 10px 12px;
+  color: #111827;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus-visible {
+  background: #f1f5f9;
+}
+
+.dropdown-item:disabled {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+.dropdown-item small {
+  color: #64748b;
+}
+</style>

package/components/MikuruImageViewer.mikuru

@@ -0,0 +1,269 @@
+<template>
+  <figure
+    class="mikuru-image-viewer"
+    :class="{ 'is-dragging': isDragging, 'is-fullscreen': isFullscreen }"
+    :aria-label="label"
+  >
+    <div
+      class="viewer-frame"
+      ref="frameEl"
+      tabindex="0"
+      role="img"
+      :aria-label="alt"
+      @dblclick="toggleZoom"
+      @keydown="handleKeydown"
+      @pointerdown="startPan"
+      @pointermove="panImage"
+      @pointerup="endPan"
+      @pointercancel="endPan"
+      @pointerleave="endPan"
+    >
+      <img
+        ref="imageEl"
+        :src="src"
+        :alt="alt"
+        :style="imageStyle"
+        draggable="false"
+      />
+    </div>
+
+    <figcaption class="viewer-caption">
+      <span>{{ captionText }}</span>
+      <strong>{{ zoomLabel }}</strong>
+    </figcaption>
+
+    <div class="viewer-controls" aria-label="Image controls">
+      <button type="button" @click="zoomOut" aria-label="Zoom out">-</button>
+      <button type="button" @click="resetView" aria-label="Reset view">Reset</button>
+      <button type="button" @click="zoomIn" aria-label="Zoom in">+</button>
+      <button type="button" @click="rotateLeft" aria-label="Rotate left">Left</button>
+      <button type="button" @click="rotateRight" aria-label="Rotate right">Right</button>
+      <button type="button" @click="toggleFullscreen" :aria-label="fullscreenLabel">
+        <span m-if="isFullscreen">Exit</span>
+        <span m-else>Full</span>
+      </button>
+    </div>
+  </figure>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref } from "mikuru";
+
+const {
+  src,
+  alt = "Mikuru image",
+  caption = "",
+  minZoom = 1,
+  maxZoom = 4,
+  zoomStep = 0.25
+} = defineProps({
+  src: String,
+  alt: String,
+  caption: String,
+  minZoom: Number,
+  maxZoom: Number,
+  zoomStep: Number
+});
+
+const frameEl = ref(null);
+const imageEl = ref(null);
+const zoom = ref(1);
+const rotation = ref(0);
+const offsetX = ref(0);
+const offsetY = ref(0);
+const startX = ref(0);
+const startY = ref(0);
+const startOffsetX = ref(0);
+const startOffsetY = ref(0);
+const isDragging = ref(false);
+const isFullscreen = ref(false);
+
+const label = computed(() => caption.value || alt.value);
+const captionText = computed(() => caption.value || alt.value);
+const zoomLabel = computed(() => `${Math.round(zoom.value * 100)}%`);
+const fullscreenLabel = computed(() => isFullscreen.value ? "Exit fullscreen" : "Enter fullscreen");
+const imageStyle = computed(() => ({
+  transform: `translate(${offsetX.value}px, ${offsetY.value}px) scale(${zoom.value}) rotate(${rotation.value}deg)`
+}));
+
+onMounted(() => {
+  document.addEventListener("fullscreenchange", syncFullscreen);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("fullscreenchange", syncFullscreen);
+});
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function setZoom(nextZoom) {
+  zoom.value = clamp(nextZoom, minZoom.value, maxZoom.value);
+  if (zoom.value === minZoom.value) {
+    offsetX.value = 0;
+    offsetY.value = 0;
+  }
+}
+
+function zoomIn() {
+  setZoom(zoom.value + zoomStep.value);
+}
+
+function zoomOut() {
+  setZoom(zoom.value - zoomStep.value);
+}
+
+function toggleZoom() {
+  if (zoom.value > minZoom.value) {
+    resetView();
+    return;
+  }
+  setZoom(Math.min(2, maxZoom.value));
+}
+
+function resetView() {
+  zoom.value = minZoom.value;
+  rotation.value = 0;
+  offsetX.value = 0;
+  offsetY.value = 0;
+}
+
+function rotateLeft() {
+  rotation.value -= 90;
+}
+
+function rotateRight() {
+  rotation.value += 90;
+}
+
+function startPan(event) {
+  if (zoom.value <= minZoom.value) return;
+  isDragging.value = true;
+  startX.value = event.clientX;
+  startY.value = event.clientY;
+  startOffsetX.value = offsetX.value;
+  startOffsetY.value = offsetY.value;
+  event.currentTarget.setPointerCapture(event.pointerId);
+}
+
+function panImage(event) {
+  if (!isDragging.value) return;
+  offsetX.value = startOffsetX.value + event.clientX - startX.value;
+  offsetY.value = startOffsetY.value + event.clientY - startY.value;
+}
+
+function endPan(event) {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+  if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+    event.currentTarget.releasePointerCapture(event.pointerId);
+  }
+}
+
+async function toggleFullscreen() {
+  const frame = frameEl.value;
+  if (!frame) return;
+  if (document.fullscreenElement) {
+    await document.exitFullscreen();
+    return;
+  }
+  await frame.requestFullscreen();
+}
+
+function syncFullscreen() {
+  isFullscreen.value = document.fullscreenElement === frameEl.value;
+}
+
+function handleKeydown(event) {
+  if (event.key === "+" || event.key === "=") {
+    zoomIn();
+    event.preventDefault();
+  } else if (event.key === "-") {
+    zoomOut();
+    event.preventDefault();
+  } else if (event.key === "0") {
+    resetView();
+    event.preventDefault();
+  } else if (event.key === "ArrowLeft") {
+    rotateLeft();
+    event.preventDefault();
+  } else if (event.key === "ArrowRight") {
+    rotateRight();
+    event.preventDefault();
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-image-viewer {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  color: #f8fafc;
+}
+
+.viewer-frame {
+  position: relative;
+  display: grid;
+  min-height: 280px;
+  overflow: hidden;
+  place-items: center;
+  border-radius: 8px;
+  background: #111827;
+  outline: none;
+  touch-action: none;
+}
+
+.viewer-frame:focus-visible {
+  box-shadow: 0 0 0 3px #38bdf8;
+}
+
+.viewer-frame img {
+  max-width: 100%;
+  max-height: 72vh;
+  user-select: none;
+  transition: transform 160ms ease;
+  transform-origin: center;
+}
+
+.is-dragging .viewer-frame img {
+  transition: none;
+  cursor: grabbing;
+}
+
+.viewer-caption,
+.viewer-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.viewer-caption {
+  justify-content: space-between;
+  color: #334155;
+  font-size: 0.9rem;
+}
+
+.viewer-controls button {
+  min-width: 44px;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: #f8fafc;
+  background: #1f2937;
+  font: inherit;
+  cursor: pointer;
+}
+
+.viewer-controls button:hover,
+.viewer-controls button:focus-visible {
+  background: #0f172a;
+}
+
+.is-fullscreen {
+  padding: 18px;
+  background: #020617;
+}
+</style>

package/components/MikuruModal.mikuru

@@ -0,0 +1,159 @@
+<template>
+  <Teleport to="body">
+    <div
+      m-if="open"
+      class="mikuru-modal-backdrop"
+      role="presentation"
+      @click="handleBackdrop"
+    >
+      <section
+        ref="dialogEl"
+        class="mikuru-modal"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title"
+        tabindex="-1"
+        @click="stopEvent"
+      >
+        <header class="modal-header">
+          <h2>{{ title }}</h2>
+          <button type="button" @click="requestClose" aria-label="Close modal">Close</button>
+        </header>
+
+        <div class="modal-body">
+          <slot>{{ body }}</slot>
+        </div>
+
+        <footer m-if="footer" class="modal-footer">
+          <span>{{ footer }}</span>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
+</template>
+
+<script>
+import { onMounted, onUnmounted, ref, watch } from "mikuru";
+
+const {
+  open = false,
+  title = "Mikuru Modal",
+  body = "",
+  footer = "",
+  closeOnBackdrop = true,
+  closeOnEscape = true
+} = defineProps({
+  open: Boolean,
+  title: String,
+  body: String,
+  footer: String,
+  closeOnBackdrop: Boolean,
+  closeOnEscape: Boolean
+});
+
+const emit = defineEmits(["close"]);
+const dialogEl = ref(null);
+
+onMounted(() => {
+  document.addEventListener("keydown", handleDocumentKeydown);
+  focusDialog();
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
+
+watch(open, () => {
+  focusDialog();
+});
+
+function focusDialog() {
+  requestAnimationFrame(() => {
+    if (open.value && dialogEl.value) {
+      dialogEl.value.focus();
+    }
+  });
+}
+
+function requestClose() {
+  emit("close");
+}
+
+function handleBackdrop() {
+  if (closeOnBackdrop.value) {
+    requestClose();
+  }
+}
+
+function handleDocumentKeydown(event) {
+  if (!open.value || !closeOnEscape.value) return;
+  if (event.key === "Escape") {
+    requestClose();
+  }
+}
+
+function stopEvent(event) {
+  event.stopPropagation();
+}
+</script>
+
+<style scoped>
+.mikuru-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  background: rgb(15 23 42 / 72%);
+}
+
+.mikuru-modal {
+  display: grid;
+  width: min(560px, 100%);
+  max-height: min(720px, 92vh);
+  overflow: hidden;
+  border-radius: 8px;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 34%);
+  outline: none;
+}
+
+.modal-header,
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px 18px;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-footer {
+  border-top: 1px solid #e5e7eb;
+  border-bottom: 0;
+  color: #475569;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.modal-header button {
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: #f8fafc;
+  background: #111827;
+  font: inherit;
+  cursor: pointer;
+}
+
+.modal-body {
+  overflow: auto;
+  padding: 18px;
+  color: #334155;
+}
+</style>

package/components/MikuruProgress.mikuru

@@ -0,0 +1,85 @@
+<template>
+  <div class="mikuru-progress" :class="{ indeterminate }">
+    <div class="progress-label">
+      <span>{{ label }}</span>
+      <strong m-if="!indeterminate">{{ percentLabel }}</strong>
+    </div>
+    <div
+      class="progress-track"
+      role="progressbar"
+      :aria-label="label"
+      aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="indeterminate ? undefined : clampedValue"
+    >
+      <span class="progress-fill" :style="fillStyle"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  value = 0,
+  max = 100,
+  label = "Progress",
+  indeterminate = false
+} = defineProps({
+  value: Number,
+  max: Number,
+  label: String,
+  indeterminate: Boolean
+});
+
+const safeMax = computed(() => max.value > 0 ? max.value : 100);
+const clampedValue = computed(() => Math.min(Math.max(value.value, 0), safeMax.value));
+const percent = computed(() => Math.round((clampedValue.value / safeMax.value) * 100));
+const percentLabel = computed(() => `${percent.value}%`);
+const fillStyle = computed(() => ({
+  width: indeterminate.value ? "45%" : `${percent.value}%`
+}));
+</script>
+
+<style scoped>
+.mikuru-progress {
+  display: grid;
+  gap: 7px;
+  color: #111827;
+}
+
+.progress-label {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 0.9rem;
+}
+
+.progress-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e2e8f0;
+}
+
+.progress-fill {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #2563eb;
+  transition: width 180ms ease;
+}
+
+.indeterminate .progress-fill {
+  animation: mikuru-progress-slide 1.2s ease-in-out infinite;
+}
+
+@keyframes mikuru-progress-slide {
+  0% {
+    transform: translateX(-120%);
+  }
+  100% {
+    transform: translateX(240%);
+  }
+}
+</style>