mikuru 1.0.26 → 1.0.28

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>

package/components/MikuruToast.mikuru

@@ -0,0 +1,128 @@
+<template>
+  <section class="mikuru-toast-stack" :class="positionClass" aria-live="polite" aria-label="Notifications">
+    <article
+      class="toast"
+      m-for="toast in normalizedToasts"
+      :key="toast.id"
+      :class="toast.toneClass"
+      role="status"
+    >
+      <div class="toast-body">
+        <strong>{{ toast.title }}</strong>
+        <span>{{ toast.message }}</span>
+      </div>
+      <button type="button" @click="dismissToast(toast.id)" :aria-label="toast.dismissLabel">Close</button>
+    </article>
+  </section>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  toasts = [],
+  position = "bottom-right"
+} = defineProps({
+  toasts: Array,
+  position: String
+});
+
+const emit = defineEmits(["dismiss"]);
+const positionClass = computed(() => `position-${position.value}`);
+const normalizedToasts = computed(() => {
+  const source = Array.isArray(toasts.value) ? toasts.value : [];
+  return source.map((toast, index) => {
+    const id = toast.id ?? index;
+    const tone = toast.tone || "info";
+    return {
+      id,
+      title: toast.title || "Notification",
+      message: toast.message || "",
+      toneClass: `tone-${tone}`,
+      dismissLabel: `Dismiss ${toast.title || "notification"}`
+    };
+  });
+});
+
+function dismissToast(id) {
+  emit("dismiss", id);
+}
+</script>
+
+<style scoped>
+.mikuru-toast-stack {
+  position: fixed;
+  z-index: 60;
+  display: grid;
+  width: min(360px, calc(100vw - 32px));
+  gap: 10px;
+  pointer-events: none;
+}
+
+.position-bottom-right {
+  right: 16px;
+  bottom: 16px;
+}
+
+.position-bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+
+.position-top-right {
+  top: 16px;
+  right: 16px;
+}
+
+.position-top-left {
+  top: 16px;
+  left: 16px;
+}
+
+.toast {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid #e5e7eb;
+  border-left: 4px solid #2563eb;
+  border-radius: 8px;
+  padding: 12px;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 16px 44px rgb(15 23 42 / 18%);
+  pointer-events: auto;
+}
+
+.tone-success {
+  border-left-color: #059669;
+}
+
+.tone-warning {
+  border-left-color: #d97706;
+}
+
+.tone-danger {
+  border-left-color: #dc2626;
+}
+
+.toast-body {
+  display: grid;
+  gap: 3px;
+}
+
+.toast-body span {
+  color: #475569;
+  font-size: 0.92rem;
+}
+
+.toast button {
+  border: 0;
+  border-radius: 6px;
+  padding: 6px 8px;
+  color: #334155;
+  background: #f1f5f9;
+  font: inherit;
+  cursor: pointer;
+}
+</style>

package/components/MikuruToolTip.mikuru

@@ -0,0 +1,95 @@
+<template>
+  <span
+    class="mikuru-tooltip"
+    :class="placementClass"
+    @mouseenter="show"
+    @mouseleave="hide"
+    @focusin="show"
+    @focusout="hide"
+  >
+    <span class="tooltip-trigger" tabindex="0">
+      <slot>{{ label }}</slot>
+    </span>
+    <span m-if="visible" class="tooltip-bubble" role="tooltip">{{ text }}</span>
+  </span>
+</template>
+
+<script>
+import { computed, ref } from "mikuru";
+
+const {
+  text = "Tooltip",
+  label = "?",
+  placement = "top"
+} = defineProps({
+  text: String,
+  label: String,
+  placement: String
+});
+
+const visible = ref(false);
+const placementClass = computed(() => `placement-${placement.value}`);
+
+function show() {
+  visible.value = true;
+}
+
+function hide() {
+  visible.value = false;
+}
+</script>
+
+<style scoped>
+.mikuru-tooltip {
+  position: relative;
+  display: inline-flex;
+  width: max-content;
+}
+
+.tooltip-trigger {
+  display: inline-flex;
+  outline: none;
+}
+
+.tooltip-trigger:focus-visible {
+  box-shadow: 0 0 0 3px #38bdf8;
+}
+
+.tooltip-bubble {
+  position: absolute;
+  z-index: 45;
+  width: max-content;
+  max-width: 240px;
+  border-radius: 6px;
+  padding: 7px 9px;
+  color: #f8fafc;
+  background: #111827;
+  font-size: 0.82rem;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.placement-top .tooltip-bubble {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.placement-bottom .tooltip-bubble {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.placement-left .tooltip-bubble {
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.placement-right .tooltip-bubble {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+</style>