mikuru 1.0.38 → 1.0.39

package/components/MikuruPopover.mikuru

@@ -0,0 +1,152 @@
+<template>
+  <span class="mikuru-popover" ref="rootEl" @keydown="handleKeydown">
+    <button
+      class="popover-trigger"
+      type="button"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      aria-haspopup="dialog"
+      @click="toggle"
+    >
+      {{ label }}
+    </button>
+
+    <span
+      m-if="isOpen"
+      class="popover-panel"
+      role="dialog"
+      :aria-label="title || label"
+      :data-side="side"
+    >
+      <strong m-if="title">{{ title }}</strong>
+      <slot>{{ body }}</slot>
+    </span>
+  </span>
+</template>
+
+<script>
+import { onMounted, onUnmounted, ref } from "mikuru";
+
+const {
+  label = "Open popover",
+  title = "",
+  body = "",
+  side = "bottom",
+  closeOnOutside = true
+} = defineProps({
+  label: String,
+  title: String,
+  body: String,
+  side: String,
+  closeOnOutside: Boolean
+});
+
+const emit = defineEmits(["open", "close"]);
+const rootEl = ref(null);
+const isOpen = ref(false);
+
+onMounted(() => {
+  document.addEventListener("pointerdown", handleDocumentPointer);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", handleDocumentPointer);
+});
+
+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 handleDocumentPointer(event) {
+  if (!closeOnOutside.value || !isOpen.value) return;
+  const root = rootEl.value;
+  if (!root || root.contains(event.target)) return;
+  close();
+}
+
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    close();
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-popover {
+  position: relative;
+  display: inline-block;
+}
+
+.popover-trigger {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 9px 12px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+.popover-trigger:hover,
+.popover-trigger:focus-visible {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 16%);
+}
+
+.popover-panel {
+  position: absolute;
+  z-index: 45;
+  display: grid;
+  gap: 8px;
+  width: max-content;
+  max-width: min(280px, 82vw);
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px;
+  color: #334155;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 16%);
+}
+
+.popover-panel,
+.popover-panel[data-side="bottom"] {
+  top: calc(100% + 8px);
+  left: 0;
+}
+
+.popover-panel[data-side="top"] {
+  top: auto;
+  bottom: calc(100% + 8px);
+  left: 0;
+}
+
+.popover-panel[data-side="right"] {
+  top: 0;
+  left: calc(100% + 8px);
+}
+
+.popover-panel[data-side="left"] {
+  top: 0;
+  left: auto;
+  right: calc(100% + 8px);
+}
+
+.popover-panel strong {
+  color: #111827;
+}
+</style>

package/components/MikuruRadioGroup.mikuru

@@ -0,0 +1,111 @@
+<template>
+  <fieldset class="mikuru-radio-group">
+    <legend>{{ label }}</legend>
+    <label
+      m-for="option in options"
+      :key="option.value"
+      class="radio-option"
+      :data-checked="isChecked(option) ? 'true' : 'false'"
+      :data-disabled="option.disabled || disabled ? 'true' : 'false'"
+    >
+      <input
+        type="radio"
+        :name="groupName"
+        :value="option.value"
+        :checked="isChecked(option)"
+        :disabled="option.disabled || disabled"
+        @change="selectOption(option)"
+      />
+      <span>
+        <strong>{{ option.label }}</strong>
+        <small m-if="option.description">{{ option.description }}</small>
+      </span>
+    </label>
+    <small m-if="help" class="group-help">{{ help }}</small>
+  </fieldset>
+</template>
+
+<script>
+const {
+  label = "Options",
+  modelValue = "",
+  options = [],
+  name = "",
+  help = "",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  options: Array,
+  name: String,
+  help: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const groupName = name.value || `mikuru-radio-${Math.random().toString(36).slice(2)}`;
+
+function isChecked(option) {
+  return option.value === modelValue.value;
+}
+
+function selectOption(option) {
+  if (disabled.value || option.disabled) return;
+  emit("update:modelValue", option.value);
+  emit("change", option.value, option);
+}
+</script>
+
+<style scoped>
+.mikuru-radio-group {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: #111827;
+  font: inherit;
+}
+
+legend {
+  margin-bottom: 2px;
+  padding: 0;
+  font-weight: 650;
+}
+
+.radio-option {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 10px;
+  align-items: start;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px;
+  background: #ffffff;
+  cursor: pointer;
+}
+
+.radio-option[data-checked="true"] {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.radio-option[data-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+input {
+  margin-top: 3px;
+  accent-color: #2563eb;
+}
+
+.radio-option span {
+  display: grid;
+  gap: 2px;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruRangeSlider.mikuru

@@ -0,0 +1,96 @@
+<template>
+  <section class="mikuru-range-slider">
+    <header>
+      <span>{{ label }}</span>
+      <output>{{ minValue }} - {{ maxValue }}</output>
+    </header>
+    <div class="range-controls">
+      <input type="range" :min="min" :max="max" :step="step" :value="minValue" @input="updateMin($event)" />
+      <input type="range" :min="min" :max="max" :step="step" :value="maxValue" @input="updateMax($event)" />
+    </div>
+    <small m-if="help">{{ help }}</small>
+  </section>
+</template>
+
+<script>
+import { ref, watch } from "mikuru";
+
+const {
+  label = "Range",
+  minValue: initialMinValue = 0,
+  maxValue: initialMaxValue = 100,
+  min = 0,
+  max = 100,
+  step = 1,
+  help = ""
+} = defineProps({
+  label: String,
+  minValue: Number,
+  maxValue: Number,
+  min: Number,
+  max: Number,
+  step: Number,
+  help: String
+});
+
+const emit = defineEmits(["change", "update:minValue", "update:maxValue"]);
+const minValue = ref(initialMinValue.value);
+const maxValue = ref(initialMaxValue.value);
+
+watch([initialMinValue, initialMaxValue], () => {
+  minValue.value = initialMinValue.value;
+  maxValue.value = initialMaxValue.value;
+});
+
+function updateMin(event) {
+  const nextValue = Math.min(Number(event.target.value), maxValue.value);
+  minValue.value = nextValue;
+  emitValues();
+}
+
+function updateMax(event) {
+  const nextValue = Math.max(Number(event.target.value), minValue.value);
+  maxValue.value = nextValue;
+  emitValues();
+}
+
+function emitValues() {
+  emit("update:minValue", minValue.value);
+  emit("update:maxValue", maxValue.value);
+  emit("change", { min: minValue.value, max: maxValue.value });
+}
+</script>
+
+<style scoped>
+.mikuru-range-slider {
+  display: grid;
+  gap: 8px;
+  color: #111827;
+  font: inherit;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  font-weight: 650;
+}
+
+output {
+  color: #2563eb;
+}
+
+.range-controls {
+  display: grid;
+  gap: 4px;
+}
+
+input {
+  width: 100%;
+  accent-color: #2563eb;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruRating.mikuru

@@ -0,0 +1,72 @@
+<template>
+  <div class="mikuru-rating" role="radiogroup" :aria-label="label">
+    <button
+      m-for="item in ratingItems"
+      :key="item"
+      type="button"
+      role="radio"
+      :aria-checked="item === modelValue ? 'true' : 'false'"
+      :data-active="item <= modelValue ? 'true' : 'false'"
+      :disabled="disabled"
+      @click="setRating(item)"
+    >{{ symbol }}</button>
+  </div>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  label = "Rating",
+  modelValue = 0,
+  max = 5,
+  symbol = "★",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: Number,
+  max: Number,
+  symbol: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const ratingItems = computed(() => Array.from({ length: Math.max(1, max.value) }, (_, index) => index + 1));
+
+function setRating(value) {
+  if (disabled.value) return;
+  emit("update:modelValue", value);
+  emit("change", value);
+}
+</script>
+
+<style scoped>
+.mikuru-rating {
+  display: inline-flex;
+  gap: 2px;
+}
+
+button {
+  border: 0;
+  padding: 2px;
+  color: #cbd5e1;
+  background: transparent;
+  font: inherit;
+  font-size: 1.35rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+button[data-active="true"] {
+  color: #f59e0b;
+}
+
+button:focus-visible {
+  border-radius: 6px;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+button:disabled {
+  cursor: not-allowed;
+}
+</style>

package/components/MikuruSearchInput.mikuru

@@ -0,0 +1,97 @@
+<template>
+  <form class="mikuru-search-input" role="search" @submit="submitSearch">
+    <label :for="inputId">{{ label }}</label>
+    <div class="search-control">
+      <span aria-hidden="true">⌕</span>
+      <input
+        :id="inputId"
+        type="search"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="updateValue($event)"
+      />
+      <button m-if="modelValue" type="button" @click="clear">Clear</button>
+    </div>
+  </form>
+</template>
+
+<script>
+const {
+  label = "Search",
+  modelValue = "",
+  placeholder = "Search...",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  placeholder: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "input", "submit", "clear"]);
+const inputId = `mikuru-search-${Math.random().toString(36).slice(2)}`;
+
+function updateValue(event) {
+  emit("update:modelValue", event.target.value);
+  emit("input", event.target.value);
+}
+
+function submitSearch(event) {
+  event.preventDefault();
+  emit("submit", modelValue.value);
+}
+
+function clear() {
+  emit("update:modelValue", "");
+  emit("input", "");
+  emit("clear");
+}
+</script>
+
+<style scoped>
+.mikuru-search-input {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+label {
+  font-weight: 650;
+}
+
+.search-control {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: #ffffff;
+}
+
+.search-control:focus-within {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+input {
+  min-width: 0;
+  border: 0;
+  padding: 0;
+  color: #111827;
+  background: transparent;
+  font: inherit;
+  outline: none;
+}
+
+button {
+  border: 0;
+  color: #2563eb;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+</style>

package/components/MikuruSegmentedControl.mikuru

@@ -0,0 +1,70 @@
+<template>
+  <div class="mikuru-segmented-control" role="radiogroup" :aria-label="label">
+    <button
+      m-for="option in options"
+      :key="option.value"
+      type="button"
+      role="radio"
+      :aria-checked="isSelected(option) ? 'true' : 'false'"
+      :disabled="option.disabled || disabled"
+      @click="selectOption(option)"
+    >{{ option.label }}</button>
+  </div>
+</template>
+
+<script>
+const {
+  label = "Segmented control",
+  modelValue = "",
+  options = [],
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  options: Array,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function isSelected(option) {
+  return option.value === modelValue.value;
+}
+
+function selectOption(option) {
+  if (disabled.value || option.disabled) return;
+  emit("update:modelValue", option.value);
+  emit("change", option.value, option);
+}
+</script>
+
+<style scoped>
+.mikuru-segmented-control {
+  display: inline-flex;
+  width: fit-content;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 3px;
+  background: #f8fafc;
+}
+
+button {
+  border: 0;
+  border-radius: 6px;
+  padding: 7px 11px;
+  color: #334155;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+button[aria-checked="true"] {
+  color: #ffffff;
+  background: #2563eb;
+}
+
+button:disabled {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+</style>

package/components/MikuruSkeleton.mikuru

@@ -0,0 +1,74 @@
+<template>
+  <div class="mikuru-skeleton" :data-animated="animated ? 'true' : 'false'" :data-shape="shape" aria-hidden="true">
+    <span
+      m-for="line in skeletonLines"
+      :key="line.key"
+      :style="line.style"
+    ></span>
+  </div>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  lines = 3,
+  width = "100%",
+  height = "12px",
+  shape = "text",
+  animated = true
+} = defineProps({
+  lines: Number,
+  width: String,
+  height: String,
+  shape: String,
+  animated: Boolean
+});
+
+const skeletonLines = computed(() => {
+  const count = Math.max(1, Number(lines.value || 1));
+  return Array.from({ length: count }, (_, index) => ({
+    key: index + 1,
+    style: `width: ${index === count - 1 && count > 1 ? "72%" : width.value}; height: ${height.value};`
+  }));
+});
+</script>
+
+<style scoped>
+.mikuru-skeleton {
+  display: grid;
+  gap: 8px;
+}
+
+span {
+  display: block;
+  border-radius: 999px;
+  background: #e2e8f0;
+}
+
+.mikuru-skeleton[data-shape="card"] span {
+  border-radius: 8px;
+}
+
+.mikuru-skeleton[data-shape="circle"] span {
+  width: var(--skeleton-size, 44px);
+  height: var(--skeleton-size, 44px);
+  border-radius: 999px;
+}
+
+.mikuru-skeleton[data-animated="true"] span {
+  background: linear-gradient(90deg, #e2e8f0 0%, #f8fafc 44%, #e2e8f0 88%);
+  background-size: 220% 100%;
+  animation: skeleton-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes skeleton-pulse {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+</style>