mikuru 1.0.37 → 1.0.39

package/components/MikuruSlider.mikuru

@@ -0,0 +1,77 @@
+<template>
+  <label class="mikuru-slider">
+    <span class="slider-header">
+      <span>{{ label }}</span>
+      <output>{{ modelValue }}</output>
+    </span>
+    <input
+      type="range"
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :disabled="disabled"
+      @input="updateValue($event)"
+    />
+    <small m-if="help">{{ help }}</small>
+  </label>
+</template>
+
+<script>
+const {
+  label = "Slider",
+  modelValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  help = "",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: Number,
+  min: Number,
+  max: Number,
+  step: Number,
+  help: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change", "input"]);
+
+function updateValue(event) {
+  const nextValue = Number(event.target.value);
+  emit("update:modelValue", nextValue);
+  emit("input", nextValue);
+  emit("change", nextValue);
+}
+</script>
+
+<style scoped>
+.mikuru-slider {
+  display: grid;
+  gap: 8px;
+  color: #111827;
+  font: inherit;
+}
+
+.slider-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-weight: 650;
+}
+
+output {
+  color: #2563eb;
+}
+
+input {
+  width: 100%;
+  accent-color: #2563eb;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruStatCard.mikuru

@@ -0,0 +1,63 @@
+<template>
+  <article class="mikuru-stat-card" :data-tone="tone">
+    <span>{{ label }}</span>
+    <strong>{{ value }}</strong>
+    <small m-if="detail">{{ detail }}</small>
+  </article>
+</template>
+
+<script>
+const {
+  label = "Metric",
+  value = "0",
+  detail = "",
+  tone = "neutral"
+} = defineProps({
+  label: String,
+  value: String,
+  detail: String,
+  tone: String
+});
+</script>
+
+<style scoped>
+.mikuru-stat-card {
+  display: grid;
+  gap: 6px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 14px;
+  color: #334155;
+  background: #ffffff;
+}
+
+span {
+  font-size: 0.85rem;
+  font-weight: 650;
+}
+
+strong {
+  color: #111827;
+  font-size: 1.65rem;
+  line-height: 1.1;
+}
+
+small {
+  color: #64748b;
+}
+
+.mikuru-stat-card[data-tone="success"] {
+  border-color: #bbf7d0;
+  background: #f0fdf4;
+}
+
+.mikuru-stat-card[data-tone="info"] {
+  border-color: #bfdbfe;
+  background: #eff6ff;
+}
+
+.mikuru-stat-card[data-tone="warning"] {
+  border-color: #fde68a;
+  background: #fffbeb;
+}
+</style>

package/components/MikuruStepper.mikuru

@@ -0,0 +1,123 @@
+<template>
+  <ol class="mikuru-stepper" :data-orientation="orientation">
+    <li
+      m-for="step in steps"
+      :key="stepKey(step)"
+      :data-state="stepState(step)"
+    >
+      <button type="button" @click="selectStep(step)">
+        <span class="step-index">{{ step.index || stepNumber(step) }}</span>
+        <span class="step-copy">
+          <strong>{{ step.label }}</strong>
+          <small m-if="step.description">{{ step.description }}</small>
+        </span>
+      </button>
+    </li>
+  </ol>
+</template>
+
+<script>
+const {
+  steps = [],
+  current = "",
+  orientation = "horizontal"
+} = defineProps({
+  steps: Array,
+  current: String,
+  orientation: String
+});
+
+const emit = defineEmits(["change"]);
+
+function stepKey(step) {
+  return step.value || step.label;
+}
+
+function stepNumber(step) {
+  return steps.value.indexOf(step) + 1;
+}
+
+function stepState(step) {
+  if (step.value === current.value) return "current";
+  if (step.completed) return "complete";
+  return "pending";
+}
+
+function selectStep(step) {
+  emit("change", step.value, step);
+}
+</script>
+
+<style scoped>
+.mikuru-stepper {
+  display: flex;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mikuru-stepper[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+li {
+  flex: 1 1 0;
+}
+
+button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px;
+  color: #334155;
+  background: #ffffff;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+li[data-state="current"] button {
+  border-color: #2563eb;
+  color: #1e3a8a;
+  background: #eff6ff;
+}
+
+li[data-state="complete"] button {
+  border-color: #86efac;
+  color: #166534;
+  background: #f0fdf4;
+}
+
+.step-index {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  color: #ffffff;
+  background: #64748b;
+  font-weight: 800;
+}
+
+li[data-state="current"] .step-index {
+  background: #2563eb;
+}
+
+li[data-state="complete"] .step-index {
+  background: #16a34a;
+}
+
+.step-copy {
+  display: grid;
+  gap: 2px;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruSwitch.mikuru

@@ -0,0 +1,104 @@
+<template>
+  <label class="mikuru-switch" :data-disabled="disabled ? 'true' : 'false'">
+    <span class="switch-copy">
+      <span class="switch-label">{{ label }}</span>
+      <small m-if="help">{{ help }}</small>
+    </span>
+    <button
+      type="button"
+      role="switch"
+      class="switch-control"
+      :aria-checked="modelValue ? 'true' : 'false'"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <span></span>
+    </button>
+  </label>
+</template>
+
+<script>
+const {
+  label = "Switch",
+  modelValue = false,
+  help = "",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: Boolean,
+  help: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function toggle() {
+  if (disabled.value) return;
+  const nextValue = !modelValue.value;
+  emit("update:modelValue", nextValue);
+  emit("change", nextValue);
+}
+</script>
+
+<style scoped>
+.mikuru-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  color: #111827;
+  font: inherit;
+}
+
+.switch-copy {
+  display: grid;
+  gap: 3px;
+}
+
+.switch-label {
+  font-weight: 650;
+}
+
+small {
+  color: #64748b;
+}
+
+.switch-control {
+  position: relative;
+  width: 46px;
+  height: 26px;
+  flex: 0 0 auto;
+  border: 1px solid #cbd5e1;
+  border-radius: 999px;
+  padding: 2px;
+  background: #e2e8f0;
+  cursor: pointer;
+}
+
+.switch-control span {
+  display: block;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgb(15 23 42 / 24%);
+  transition: transform 140ms ease;
+}
+
+.switch-control[aria-checked="true"] {
+  border-color: #2563eb;
+  background: #2563eb;
+}
+
+.switch-control[aria-checked="true"] span {
+  transform: translateX(20px);
+}
+
+.switch-control:focus-visible {
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+.mikuru-switch[data-disabled="true"] {
+  opacity: 0.58;
+}
+</style>

package/components/MikuruTable.mikuru

@@ -0,0 +1,242 @@
+<template>
+  <div class="mikuru-table-wrap">
+    <table class="mikuru-table">
+      <caption m-if="caption">{{ caption }}</caption>
+      <thead>
+        <tr>
+          <th
+            m-for="column in normalizedColumns"
+            :key="column.key"
+            :style="columnStyle(column)"
+            :aria-sort="ariaSort(column)"
+          >
+            <button
+              m-if="column.sortable"
+              type="button"
+              class="sort-button"
+              @click="sortBy(column)"
+            >
+              <span>{{ column.label }}</span>
+              <span aria-hidden="true">{{ sortMark(column) }}</span>
+            </button>
+            <span m-else>{{ column.label }}</span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr m-if="loading">
+          <td :colspan="columnCount()">Loading...</td>
+        </tr>
+        <tr m-else-if="sortedRows.length === 0">
+          <td :colspan="columnCount()">{{ emptyText }}</td>
+        </tr>
+        <tr
+          m-for="row in sortedRows"
+          :key="rowKeyValue(row)"
+          @click="selectRow(row)"
+        >
+          <td
+            m-for="column in normalizedColumns"
+            :key="column.key"
+            :style="columnStyle(column)"
+          >
+            {{ cellValue(row, column) }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import { computed, ref, watch } from "mikuru";
+
+const {
+  columns = [],
+  rows = [],
+  caption = "",
+  emptyText = "No rows",
+  loading = false,
+  rowKey = "id",
+  sortKey = "",
+  sortDirection = "asc"
+} = defineProps({
+  columns: Array,
+  rows: Array,
+  caption: String,
+  emptyText: String,
+  loading: Boolean,
+  rowKey: String,
+  sortKey: String,
+  sortDirection: String
+});
+
+const emit = defineEmits(["row-click", "sort"]);
+const activeSortKey = ref("");
+const activeSortDirection = ref("asc");
+const normalizedColumns = ref([]);
+let columnsSignature = "";
+
+watch(columns, syncColumns, { immediate: true });
+watch(sortKey, syncSort, { immediate: true });
+watch(sortDirection, syncSort, { immediate: true });
+
+const sortedRows = computed(() => {
+  const source = Array.isArray(rows.value) ? rows.value.slice() : [];
+  const key = activeSortKey.value;
+  if (!key) return source;
+  const direction = activeSortDirection.value === "desc" ? -1 : 1;
+  return source.sort((left, right) => compareValues(left?.[key], right?.[key]) * direction);
+});
+
+function syncColumns() {
+  const source = Array.isArray(columns.value) ? columns.value : [];
+  const nextColumns = source.map((column, index) => {
+    if (typeof column === "string") {
+      return { key: column, label: column, sortable: false, align: "left", width: "" };
+    }
+    const key = String(column.key ?? column.value ?? index);
+    return {
+      key,
+      label: column.label || key,
+      sortable: Boolean(column.sortable),
+      align: column.align || "left",
+      width: column.width || ""
+    };
+  });
+  const nextSignature = nextColumns
+    .map((column) => `${column.key}\u0000${column.label}\u0000${column.sortable}\u0000${column.align}\u0000${column.width}`)
+    .join("\u0001");
+  if (nextSignature === columnsSignature) return;
+  columnsSignature = nextSignature;
+  normalizedColumns.value = nextColumns;
+}
+
+function syncSort() {
+  activeSortKey.value = sortKey.value || "";
+  activeSortDirection.value = sortDirection.value === "desc" ? "desc" : "asc";
+}
+
+function compareValues(left, right) {
+  if (left === right) return 0;
+  if (left == null) return -1;
+  if (right == null) return 1;
+  if (typeof left === "number" && typeof right === "number") {
+    return left - right;
+  }
+  return String(left).localeCompare(String(right), undefined, { numeric: true, sensitivity: "base" });
+}
+
+function sortBy(column) {
+  if (!column.sortable) return;
+  const nextDirection =
+    activeSortKey.value === column.key && activeSortDirection.value === "asc"
+      ? "desc"
+      : "asc";
+  activeSortKey.value = column.key;
+  activeSortDirection.value = nextDirection;
+  emit("sort", { key: column.key, direction: nextDirection });
+}
+
+function selectRow(row) {
+  emit("row-click", row);
+}
+
+function rowKeyValue(row) {
+  return row?.[rowKey.value] ?? JSON.stringify(row);
+}
+
+function cellValue(row, column) {
+  const value = row?.[column.key];
+  return value == null ? "" : String(value);
+}
+
+function columnStyle(column) {
+  const declarations = [];
+  if (column.align) declarations.push(`text-align: ${column.align}`);
+  if (column.width) declarations.push(`width: ${column.width}`);
+  return declarations.join("; ");
+}
+
+function columnCount() {
+  return Math.max(normalizedColumns.value.length, 1);
+}
+
+function sortMark(column) {
+  if (activeSortKey.value !== column.key) return "↕";
+  return activeSortDirection.value === "desc" ? "↓" : "↑";
+}
+
+function ariaSort(column) {
+  if (activeSortKey.value !== column.key) return "none";
+  return activeSortDirection.value === "desc" ? "descending" : "ascending";
+}
+</script>
+
+<style scoped>
+.mikuru-table-wrap {
+  width: 100%;
+  overflow: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.mikuru-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: #111827;
+  font: inherit;
+}
+
+caption {
+  padding: 12px;
+  color: #475569;
+  text-align: left;
+  font-weight: 650;
+}
+
+th,
+td {
+  border-bottom: 1px solid #e5e7eb;
+  padding: 11px 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+th {
+  color: #475569;
+  background: #f8fafc;
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+tbody tr {
+  cursor: pointer;
+}
+
+tbody tr:hover {
+  background: #f8fafc;
+}
+
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.sort-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 0;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sort-button:focus-visible {
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+</style>