mikuru 1.0.39 → 1.0.40

package/components/MikuruField.mikuru

@@ -0,0 +1,46 @@
+<template>
+  <label class="mikuru-field-shell" :data-required="required ? 'true' : 'false'">
+    <span class="field-heading">
+      <span>{{ label }}</span>
+      <span m-if="required" aria-hidden="true">*</span>
+    </span>
+    <slot></slot>
+    <MikuruFormMessage m-if="error" tone="error" :message="error" />
+    <MikuruFormMessage m-else-if="help" tone="neutral" :message="help" />
+  </label>
+</template>
+
+<script>
+import MikuruFormMessage from "./MikuruFormMessage.mikuru";
+
+const {
+  label = "Field",
+  help = "",
+  error = "",
+  required = false
+} = defineProps({
+  label: String,
+  help: String,
+  error: String,
+  required: Boolean
+});
+</script>
+
+<style scoped>
+.mikuru-field-shell {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+.field-heading {
+  display: inline-flex;
+  gap: 4px;
+  font-weight: 650;
+}
+
+.field-heading span:last-child {
+  color: #dc2626;
+}
+</style>

package/components/MikuruFilterBar.mikuru

@@ -0,0 +1,80 @@
+<template>
+  <section class="mikuru-filter-bar" :aria-label="label">
+    <MikuruSearchInput
+      :label="searchLabel"
+      :modelValue="search"
+      :placeholder="searchPlaceholder"
+      @input="setSearch"
+      @submit="submitSearch"
+      @clear="clearSearch"
+    />
+    <div class="filter-actions">
+      <MikuruChip
+        m-for="filter in filters"
+        :key="filter.value"
+        :label="filter.label"
+        :tone="filter.value === activeFilter ? 'info' : 'neutral'"
+        @click="selectFilter(filter)"
+      />
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<script>
+import MikuruChip from "./MikuruChip.mikuru";
+import MikuruSearchInput from "./MikuruSearchInput.mikuru";
+
+const {
+  label = "Filter bar",
+  search = "",
+  searchLabel = "Search",
+  searchPlaceholder = "Search...",
+  filters = [],
+  activeFilter = ""
+} = defineProps({
+  label: String,
+  search: String,
+  searchLabel: String,
+  searchPlaceholder: String,
+  filters: Array,
+  activeFilter: String
+});
+
+const emit = defineEmits(["update:search", "search", "filter", "clear"]);
+
+function setSearch(value) {
+  emit("update:search", value);
+  emit("search", value);
+}
+
+function submitSearch(value) {
+  emit("search", value);
+}
+
+function clearSearch() {
+  emit("update:search", "");
+  emit("clear");
+}
+
+function selectFilter(filter) {
+  emit("filter", filter.value, filter);
+}
+</script>
+
+<style scoped>
+.mikuru-filter-bar {
+  display: grid;
+  gap: 10px;
+}
+
+.filter-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+:deep(.mikuru-chip) {
+  cursor: pointer;
+}
+</style>

package/components/MikuruForm.mikuru

@@ -0,0 +1,67 @@
+<template>
+  <form class="mikuru-form" :aria-label="label" @submit="submitForm" @reset="resetForm">
+    <header m-if="title || description">
+      <h3 m-if="title">{{ title }}</h3>
+      <p m-if="description">{{ description }}</p>
+    </header>
+    <fieldset :disabled="disabled">
+      <slot></slot>
+    </fieldset>
+  </form>
+</template>
+
+<script>
+const {
+  label = "Form",
+  title = "",
+  description = "",
+  disabled = false
+} = defineProps({
+  label: String,
+  title: String,
+  description: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["submit", "reset"]);
+
+function submitForm(event) {
+  event.preventDefault();
+  emit("submit", event);
+}
+
+function resetForm(event) {
+  emit("reset", event);
+}
+</script>
+
+<style scoped>
+.mikuru-form {
+  display: grid;
+  gap: 12px;
+  color: #111827;
+  font: inherit;
+}
+
+header {
+  display: grid;
+  gap: 4px;
+}
+
+h3,
+p {
+  margin: 0;
+}
+
+p {
+  color: #64748b;
+}
+
+fieldset {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+</style>

package/components/MikuruFormMessage.mikuru

@@ -0,0 +1,33 @@
+<template>
+  <p class="mikuru-form-message" :data-tone="tone" role="status">{{ message }}</p>
+</template>
+
+<script>
+const {
+  message = "",
+  tone = "neutral"
+} = defineProps({
+  message: String,
+  tone: String
+});
+</script>
+
+<style scoped>
+.mikuru-form-message {
+  margin: 0;
+  color: #64748b;
+  font-size: 0.88rem;
+}
+
+.mikuru-form-message[data-tone="error"] {
+  color: #b91c1c;
+}
+
+.mikuru-form-message[data-tone="success"] {
+  color: #166534;
+}
+
+.mikuru-form-message[data-tone="warning"] {
+  color: #92400e;
+}
+</style>

package/components/MikuruInputOtp.mikuru

@@ -0,0 +1,91 @@
+<template>
+  <label class="mikuru-input-otp">
+    <span>{{ label }}</span>
+    <input
+      inputmode="numeric"
+      autocomplete="one-time-code"
+      :maxlength="length"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      @input="updateValue($event)"
+    />
+    <span class="otp-slots" aria-hidden="true">
+      <span m-for="slot in slots" :key="slot.index" :data-filled="slot.value ? 'true' : 'false'">{{ slot.value }}</span>
+    </span>
+  </label>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  label = "One-time code",
+  modelValue = "",
+  length = 6,
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  length: Number,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "input", "complete"]);
+const placeholder = computed(() => "0".repeat(length.value));
+const slots = computed(() => {
+  return Array.from({ length: length.value }, (_, index) => ({
+    index,
+    value: modelValue.value[index] || ""
+  }));
+});
+
+function updateValue(event) {
+  const nextValue = event.target.value.replace(/\D/g, "").slice(0, length.value);
+  emit("update:modelValue", nextValue);
+  emit("input", nextValue);
+  if (nextValue.length === length.value) emit("complete", nextValue);
+}
+</script>
+
+<style scoped>
+.mikuru-input-otp {
+  display: grid;
+  gap: 8px;
+  color: #111827;
+  font: inherit;
+}
+
+.mikuru-input-otp > span:first-child {
+  font-weight: 650;
+}
+
+input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+}
+
+.otp-slots {
+  display: flex;
+  gap: 8px;
+}
+
+.otp-slots span {
+  display: grid;
+  place-items: center;
+  width: 38px;
+  height: 42px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  color: #111827;
+  background: #ffffff;
+  font-weight: 800;
+}
+
+.otp-slots span[data-filled="true"] {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+</style>

package/components/MikuruNumberInput.mikuru

@@ -0,0 +1,103 @@
+<template>
+  <label class="mikuru-number-input">
+    <span>{{ label }}</span>
+    <span class="number-control">
+      <button type="button" :disabled="disabled" @click="stepDown">−</button>
+      <input
+        type="number"
+        :value="modelValue"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        @input="updateValue($event)"
+      />
+      <button type="button" :disabled="disabled" @click="stepUp">+</button>
+    </span>
+  </label>
+</template>
+
+<script>
+const {
+  label = "Number",
+  modelValue = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: Number,
+  min: Number,
+  max: Number,
+  step: Number,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "input", "change"]);
+
+function clamp(value) {
+  return Math.min(max.value, Math.max(min.value, value));
+}
+
+function emitValue(value) {
+  const nextValue = clamp(Number(value));
+  emit("update:modelValue", nextValue);
+  emit("input", nextValue);
+  emit("change", nextValue);
+}
+
+function updateValue(event) {
+  emitValue(event.target.value);
+}
+
+function stepDown() {
+  emitValue(modelValue.value - step.value);
+}
+
+function stepUp() {
+  emitValue(modelValue.value + step.value);
+}
+</script>
+
+<style scoped>
+.mikuru-number-input {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+.mikuru-number-input > span:first-child {
+  font-weight: 650;
+}
+
+.number-control {
+  display: inline-grid;
+  grid-template-columns: auto minmax(72px, 1fr) auto;
+  width: fit-content;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+input,
+button {
+  border: 0;
+  padding: 9px 11px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+}
+
+input {
+  width: 82px;
+  border-inline: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+button {
+  cursor: pointer;
+}
+</style>

package/components/MikuruPasswordInput.mikuru

@@ -0,0 +1,107 @@
+<template>
+  <label class="mikuru-password-input">
+    <span>{{ label }}</span>
+    <span class="password-control">
+      <input
+        :type="visible ? 'text' : 'password'"
+        :value="modelValue"
+        :placeholder="placeholder"
+        :autocomplete="autocomplete"
+        :disabled="disabled"
+        @input="updateValue($event)"
+      />
+      <button type="button" @click="toggleVisible">{{ visible ? hideLabel : showLabel }}</button>
+    </span>
+    <small m-if="strength">{{ strengthLabel }}</small>
+  </label>
+</template>
+
+<script>
+import { computed, ref } from "mikuru";
+
+const {
+  label = "Password",
+  modelValue = "",
+  placeholder = "",
+  autocomplete = "current-password",
+  disabled = false,
+  strength = true,
+  showLabel = "Show",
+  hideLabel = "Hide"
+} = defineProps({
+  label: String,
+  modelValue: String,
+  placeholder: String,
+  autocomplete: String,
+  disabled: Boolean,
+  strength: Boolean,
+  showLabel: String,
+  hideLabel: String
+});
+
+const emit = defineEmits(["update:modelValue", "input"]);
+const visible = ref(false);
+const strengthLabel = computed(() => {
+  const value = modelValue.value || "";
+  if (value.length >= 12) return "Strong password";
+  if (value.length >= 8) return "Medium password";
+  return "Weak password";
+});
+
+function toggleVisible() {
+  visible.value = !visible.value;
+}
+
+function updateValue(event) {
+  emit("update:modelValue", event.target.value);
+  emit("input", event.target.value);
+}
+</script>
+
+<style scoped>
+.mikuru-password-input {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+.mikuru-password-input > span:first-child {
+  font-weight: 650;
+}
+
+.password-control {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+}
+
+input {
+  min-width: 0;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+}
+
+input:focus {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+button {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruVirtualList.mikuru

@@ -0,0 +1,75 @@
+<template>
+  <section class="mikuru-virtual-list" :style="listStyle" @scroll="handleScroll">
+    <div :style="spacerStyle">
+      <article
+        m-for="item in visibleItems"
+        :key="item.key"
+        class="virtual-row"
+        :style="item.style"
+      >
+        <strong>{{ item.data.title || item.data.label || item.data.id }}</strong>
+        <span m-if="item.data.description">{{ item.data.description }}</span>
+      </article>
+    </div>
+  </section>
+</template>
+
+<script>
+import { computed, ref } from "mikuru";
+
+const {
+  items = [],
+  itemHeight = 48,
+  height = 240
+} = defineProps({
+  items: Array,
+  itemHeight: Number,
+  height: Number
+});
+
+const scrollTop = ref(0);
+const listStyle = computed(() => `height: ${height.value}px;`);
+const spacerStyle = computed(() => `height: ${items.value.length * itemHeight.value}px; position: relative;`);
+const visibleItems = computed(() => {
+  const start = Math.max(0, Math.floor(scrollTop.value / itemHeight.value) - 2);
+  const count = Math.ceil(height.value / itemHeight.value) + 5;
+  return items.value.slice(start, start + count).map((item, offset) => {
+    const index = start + offset;
+    return {
+      key: item.id || item.value || index,
+      data: item,
+      style: `height: ${itemHeight.value}px; transform: translateY(${index * itemHeight.value}px);`
+    };
+  });
+});
+
+function handleScroll(event) {
+  scrollTop.value = event.target.scrollTop;
+}
+</script>
+
+<style scoped>
+.mikuru-virtual-list {
+  overflow: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.virtual-row {
+  position: absolute;
+  inset-inline: 0;
+  display: grid;
+  align-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #f1f5f9;
+  padding: 7px 12px;
+  color: #111827;
+}
+
+span {
+  color: #64748b;
+  font-size: 0.86rem;
+}
+</style>