mikuru 1.0.39 → 1.0.40

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## Unreleased
+
+## 1.0.40 - 2026-05-18
+
+- Added package-exported `MikuruForm`, `MikuruField`, `MikuruFormMessage`, `MikuruPasswordInput`, `MikuruNumberInput`, `MikuruInputOtp`, `MikuruComboboxMulti`, `MikuruFilterBar`, `MikuruDataToolbar`, and `MikuruVirtualList` components with typed exports and dogfood coverage.
+- Added package-exported `MikuruEmbedPlayer` for iframe-based hosted video embeds across YouTube, Vimeo, Dailymotion, Twitch, Niconico, TikTok, Bilibili, Wistia, and generic embed URLs.
+
 ## 1.0.39 - 2026-05-18
 
 - Added package-exported `MikuruPopover`, `MikuruAlertDialog`, `MikuruTable`, `MikuruPagination`, `MikuruDatePicker`, `MikuruMarkdownEditor`, and `MikuruWysiwygEditor` components with typed exports and dogfood coverage.

package/components/MikuruComboboxMulti.mikuru

@@ -0,0 +1,160 @@
+<template>
+  <section class="mikuru-combobox-multi" ref="rootEl">
+    <label :for="inputId">{{ label }}</label>
+    <div class="combo-box">
+      <MikuruChip
+        m-for="item in selectedItems"
+        :key="item.value"
+        :label="item.label"
+        tone="info"
+        removable
+        @remove="removeItem(item)"
+      />
+      <input
+        :id="inputId"
+        :value="query"
+        :placeholder="placeholder"
+        @focus="openList"
+        @input="updateQuery($event)"
+      />
+    </div>
+    <ul m-if="isOpen && filteredOptions.length" role="listbox">
+      <li m-for="option in filteredOptions" :key="option.value">
+        <button type="button" @click="selectOption(option)">{{ option.label }}</button>
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
+import MikuruChip from "./MikuruChip.mikuru";
+
+const {
+  label = "Multi select",
+  modelValue = [],
+  options = [],
+  placeholder = "Search options..."
+} = defineProps({
+  label: String,
+  modelValue: Array,
+  options: Array,
+  placeholder: String
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const inputId = `mikuru-combobox-multi-${Math.random().toString(36).slice(2)}`;
+const rootEl = ref(null);
+const isOpen = ref(false);
+const query = ref("");
+const values = ref([]);
+
+watch(modelValue, () => {
+  values.value = Array.from(modelValue.value || []);
+}, { immediate: true });
+
+onMounted(() => document.addEventListener("pointerdown", handlePointerDown));
+onUnmounted(() => document.removeEventListener("pointerdown", handlePointerDown));
+
+const selectedItems = computed(() => options.value.filter((option) => values.value.includes(option.value)));
+const filteredOptions = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  return options.value.filter((option) => {
+    return !values.value.includes(option.value) && (!term || option.label.toLowerCase().includes(term));
+  });
+});
+
+function openList() {
+  isOpen.value = true;
+}
+
+function updateQuery(event) {
+  query.value = event.target.value;
+  openList();
+}
+
+function selectOption(option) {
+  updateValues([...values.value, option.value]);
+  query.value = "";
+}
+
+function removeItem(item) {
+  updateValues(values.value.filter((value) => value !== item.value));
+}
+
+function updateValues(nextValues) {
+  values.value = nextValues;
+  emit("update:modelValue", nextValues);
+  emit("change", nextValues);
+}
+
+function handlePointerDown(event) {
+  if (!rootEl.value?.contains(event.target)) isOpen.value = false;
+}
+</script>
+
+<style scoped>
+.mikuru-combobox-multi {
+  position: relative;
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+label {
+  font-weight: 650;
+}
+
+.combo-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px;
+  background: #ffffff;
+}
+
+input {
+  min-width: 120px;
+  flex: 1 1 120px;
+  border: 0;
+  padding: 5px;
+  outline: none;
+  font: inherit;
+}
+
+ul {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  display: grid;
+  gap: 2px;
+  margin: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 6px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 16%);
+  list-style: none;
+}
+
+button {
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #eff6ff;
+}
+</style>

package/components/MikuruDataToolbar.mikuru

@@ -0,0 +1,75 @@
+<template>
+  <header class="mikuru-data-toolbar">
+    <div>
+      <strong>{{ title }}</strong>
+      <small m-if="description">{{ description }}</small>
+    </div>
+    <div class="toolbar-actions">
+      <button
+        m-for="action in actions"
+        :key="action.id || action.label"
+        type="button"
+        :disabled="action.disabled"
+        @click="selectAction(action)"
+      >{{ action.label }}</button>
+      <slot></slot>
+    </div>
+  </header>
+</template>
+
+<script>
+const {
+  title = "Data",
+  description = "",
+  actions = []
+} = defineProps({
+  title: String,
+  description: String,
+  actions: Array
+});
+
+const emit = defineEmits(["action"]);
+
+function selectAction(action) {
+  if (action.disabled) return;
+  emit("action", action);
+}
+</script>
+
+<style scoped>
+.mikuru-data-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px;
+  background: #ffffff;
+}
+
+.mikuru-data-toolbar > div:first-child {
+  display: grid;
+  gap: 2px;
+}
+
+small {
+  color: #64748b;
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+button {
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 8px 10px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+</style>

package/components/MikuruEmbedPlayer.mikuru

@@ -0,0 +1,429 @@
+<template>
+  <figure class="mikuru-embed-player" :style="playerStyle" :data-provider="resolvedProvider">
+    <div class="embed-frame" :style="frameStyle">
+      <iframe
+        m-if="embedSrc"
+        class="embed-iframe"
+        :src="embedSrc"
+        :title="resolvedTitle"
+        :loading="loading"
+        :allow="allowText"
+        :referrerpolicy="referrerPolicy"
+        :sandbox="sandboxValue"
+        allowfullscreen
+        @load="handleLoad"
+      ></iframe>
+      <div m-else class="embed-empty" role="status">
+        <strong>{{ emptyTitle }}</strong>
+        <span>{{ emptyMessage }}</span>
+      </div>
+    </div>
+
+    <figcaption m-if="showCaption" class="embed-caption">
+      <strong>{{ resolvedTitle }}</strong>
+      <span>{{ captionText }}</span>
+    </figcaption>
+  </figure>
+</template>
+
+<script>
+import { computed } from "mikuru";
+
+const {
+  url = "",
+  provider = "auto",
+  videoId = "",
+  title = "Embedded video",
+  caption = "",
+  width = "100%",
+  height = "",
+  aspectRatio = "16 / 9",
+  autoplay = false,
+  muted = false,
+  controls = true,
+  loop = false,
+  privacy = false,
+  start = 0,
+  end = 0,
+  playlist = "",
+  parent = "",
+  loading = "lazy",
+  allow = "",
+  referrerPolicy = "strict-origin-when-cross-origin",
+  sandbox = "",
+  emptyTitle = "Unsupported video URL",
+  emptyMessage = "Provide a supported video URL, or pass provider and videoId explicitly."
+} = defineProps();
+
+const emit = defineEmits(["load", "unsupported"]);
+
+const detected = computed(() => resolveVideo(url.value, provider.value, videoId.value));
+const resolvedProvider = computed(() => detected.value.provider || normalizeProvider(provider.value));
+const resolvedTitle = computed(() => title.value || providerLabel(resolvedProvider.value));
+const captionText = computed(() => caption.value || providerLabel(resolvedProvider.value));
+const showCaption = computed(() => Boolean(title.value || caption.value));
+const sandboxValue = computed(() => sandbox.value || null);
+
+const playerStyle = computed(() => {
+  return [
+    width.value ? `width: ${formatSize(width.value)}` : "",
+    height.value ? `height: ${formatSize(height.value)}` : ""
+  ].filter(Boolean).join("; ");
+});
+
+const frameStyle = computed(() => {
+  return [
+    `aspect-ratio: ${aspectRatio.value}`,
+    height.value ? "height: 100%" : ""
+  ].filter(Boolean).join("; ");
+});
+
+const allowText = computed(() => {
+  return allow.value || "accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture; web-share";
+});
+
+const embedSrc = computed(() => {
+  const info = detected.value;
+  if (!info.provider || !info.id) {
+    if (info.src) return info.src;
+    emit("unsupported", { url: url.value, provider: provider.value, videoId: videoId.value });
+    return "";
+  }
+  return buildEmbedSrc(info.provider, info.id, info);
+});
+
+function handleLoad(event) {
+  emit("load", {
+    provider: resolvedProvider.value,
+    videoId: detected.value.id || "",
+    src: embedSrc.value,
+    nativeEvent: event
+  });
+}
+
+function resolveVideo(sourceUrl, sourceProvider, sourceVideoId) {
+  const explicitProvider = normalizeProvider(sourceProvider);
+  if (sourceVideoId) {
+    return { provider: explicitProvider === "auto" ? "" : explicitProvider, id: sourceVideoId };
+  }
+
+  const parsed = parseUrl(sourceUrl);
+  if (!parsed) {
+    return explicitProvider && explicitProvider !== "auto"
+      ? { provider: explicitProvider, id: sourceUrl }
+      : { provider: "", id: "", src: "" };
+  }
+
+  if (explicitProvider && explicitProvider !== "auto" && explicitProvider !== "generic") {
+    return { provider: explicitProvider, id: idFromProvider(explicitProvider, parsed) || sourceUrl };
+  }
+
+  if (explicitProvider === "generic") return { provider: "generic", id: "", src: sourceUrl };
+
+  const host = parsed.hostname.replace(/^www\./, "");
+  if (host === "youtu.be" || host.endsWith("youtube.com") || host.endsWith("youtube-nocookie.com")) {
+    return { provider: "youtube", id: youtubeId(parsed) };
+  }
+  if (host === "vimeo.com" || host === "player.vimeo.com") {
+    return { provider: "vimeo", id: vimeoId(parsed) };
+  }
+  if (host === "dai.ly" || host.endsWith("dailymotion.com")) {
+    return { provider: "dailymotion", id: dailymotionId(parsed) };
+  }
+  if (host.endsWith("twitch.tv")) {
+    return twitchInfo(parsed);
+  }
+  if (host.endsWith("nicovideo.jp") || host.endsWith("nico.ms")) {
+    return { provider: "niconico", id: niconicoId(parsed) };
+  }
+  if (host.endsWith("tiktok.com")) {
+    return { provider: "tiktok", id: tiktokId(parsed) };
+  }
+  if (host.endsWith("bilibili.com") || host === "b23.tv") {
+    return { provider: "bilibili", id: bilibiliId(parsed) };
+  }
+  if (host.endsWith("wistia.com") || host.endsWith("wistia.net")) {
+    return { provider: "wistia", id: wistiaId(parsed) };
+  }
+  if (parsed.pathname.includes("/embed/")) {
+    return { provider: "generic", id: "", src: sourceUrl };
+  }
+  return { provider: "", id: "", src: "" };
+}
+
+function buildEmbedSrc(sourceProvider, id, info) {
+  if (sourceProvider === "generic") return info.src || url.value;
+
+  if (sourceProvider === "youtube") {
+    const base = privacy.value ? "https://www.youtube-nocookie.com/embed/" : "https://www.youtube.com/embed/";
+    const params = createParams({
+      autoplay: autoplay.value ? "1" : "",
+      mute: muted.value ? "1" : "",
+      controls: controls.value ? "" : "0",
+      start: start.value > 0 ? start.value : "",
+      end: end.value > 0 ? end.value : "",
+      loop: loop.value ? "1" : "",
+      playlist: loop.value ? playlist.value || id : playlist.value
+    });
+    return `${base}${encodeURIComponent(id)}${params}`;
+  }
+
+  if (sourceProvider === "vimeo") {
+    const params = createParams({
+      autoplay: autoplay.value ? "1" : "",
+      muted: muted.value ? "1" : "",
+      controls: controls.value ? "" : "0",
+      loop: loop.value ? "1" : ""
+    });
+    const hash = start.value > 0 ? `#t=${Math.floor(start.value)}s` : "";
+    return `https://player.vimeo.com/video/${encodeURIComponent(id)}${params}${hash}`;
+  }
+
+  if (sourceProvider === "dailymotion") {
+    const params = createParams({
+      autoplay: autoplay.value ? "1" : "",
+      mute: muted.value ? "1" : "",
+      controls: controls.value ? "" : "0",
+      start: start.value > 0 ? start.value : "",
+      "queue-enable": playlist.value ? "1" : ""
+    });
+    return `https://www.dailymotion.com/embed/video/${encodeURIComponent(id)}${params}`;
+  }
+
+  if (sourceProvider === "twitch") {
+    const twitchParent = parent.value || currentHost();
+    const params = createParams({
+      parent: twitchParent,
+      autoplay: autoplay.value ? "true" : "false",
+      muted: muted.value ? "true" : "",
+      time: start.value > 0 ? `${Math.floor(start.value)}s` : ""
+    });
+    if (info.kind === "clip") return `https://clips.twitch.tv/embed?clip=${encodeURIComponent(id)}${params ? `&${params.slice(1)}` : ""}`;
+    if (info.kind === "video") return `https://player.twitch.tv/?video=${encodeURIComponent(id)}${params ? `&${params.slice(1)}` : ""}`;
+    return `https://player.twitch.tv/?channel=${encodeURIComponent(id)}${params ? `&${params.slice(1)}` : ""}`;
+  }
+
+  if (sourceProvider === "niconico") {
+    const params = createParams({
+      autoplay: autoplay.value ? "1" : "",
+      start: start.value > 0 ? start.value : ""
+    });
+    return `https://embed.nicovideo.jp/watch/${encodeURIComponent(id)}${params}`;
+  }
+
+  if (sourceProvider === "tiktok") {
+    return `https://www.tiktok.com/embed/v2/${encodeURIComponent(id)}`;
+  }
+
+  if (sourceProvider === "bilibili") {
+    const key = /^av\d+$/i.test(id) ? "aid" : "bvid";
+    const params = createParams({
+      [key]: id,
+      autoplay: autoplay.value ? "1" : "0",
+      muted: muted.value ? "1" : "",
+      t: start.value > 0 ? start.value : ""
+    });
+    return `https://player.bilibili.com/player.html${params}`;
+  }
+
+  if (sourceProvider === "wistia") {
+    const params = createParams({
+      videoFoam: "true",
+      autoPlay: autoplay.value ? "true" : "",
+      muted: muted.value ? "true" : ""
+    });
+    return `https://fast.wistia.net/embed/iframe/${encodeURIComponent(id)}${params}`;
+  }
+
+  return "";
+}
+
+function normalizeProvider(value) {
+  return String(value || "auto").trim().toLowerCase();
+}
+
+function parseUrl(value) {
+  if (!value) return null;
+  try {
+    return new URL(value);
+  } catch {
+    try {
+      return new URL(`https://${value}`);
+    } catch {
+      return null;
+    }
+  }
+}
+
+function pathSegments(parsed) {
+  return parsed.pathname.split("/").filter(Boolean);
+}
+
+function idFromProvider(sourceProvider, parsed) {
+  const extractors = {
+    youtube: youtubeId,
+    vimeo: vimeoId,
+    dailymotion: dailymotionId,
+    niconico: niconicoId,
+    tiktok: tiktokId,
+    bilibili: bilibiliId,
+    wistia: wistiaId
+  };
+  return extractors[sourceProvider] ? extractors[sourceProvider](parsed) : "";
+}
+
+function youtubeId(parsed) {
+  const parts = pathSegments(parsed);
+  if (parsed.hostname.replace(/^www\./, "") === "youtu.be") return parts[0] || "";
+  if (parts[0] === "embed" || parts[0] === "shorts" || parts[0] === "live") return parts[1] || "";
+  return parsed.searchParams.get("v") || "";
+}
+
+function vimeoId(parsed) {
+  const parts = pathSegments(parsed);
+  if (parts[0] === "video") return parts[1] || "";
+  return parts.find((part) => /^\d+$/.test(part)) || "";
+}
+
+function dailymotionId(parsed) {
+  const parts = pathSegments(parsed);
+  if (parsed.hostname.replace(/^www\./, "") === "dai.ly") return parts[0] || "";
+  if (parts[0] === "embed" && parts[1] === "video") return parts[2] || "";
+  if (parts[0] === "video") return parts[1] || "";
+  return "";
+}
+
+function twitchInfo(parsed) {
+  const parts = pathSegments(parsed);
+  if (parsed.hostname === "clips.twitch.tv") return { provider: "twitch", id: parts[0] || "", kind: "clip" };
+  if (parts[0] === "videos") return { provider: "twitch", id: parts[1] || "", kind: "video" };
+  if (parts[0] === "clip") return { provider: "twitch", id: parts[1] || "", kind: "clip" };
+  return { provider: "twitch", id: parts[0] || "", kind: "channel" };
+}
+
+function niconicoId(parsed) {
+  const parts = pathSegments(parsed);
+  if (parsed.hostname.endsWith("nico.ms")) return parts[0] || "";
+  if (parts[0] === "watch") return parts[1] || "";
+  return "";
+}
+
+function tiktokId(parsed) {
+  const parts = pathSegments(parsed);
+  const videoIndex = parts.indexOf("video");
+  return videoIndex >= 0 ? parts[videoIndex + 1] || "" : "";
+}
+
+function bilibiliId(parsed) {
+  const parts = pathSegments(parsed);
+  return parts.find((part) => /^BV/i.test(part) || /^av\d+/i.test(part)) || "";
+}
+
+function wistiaId(parsed) {
+  const parts = pathSegments(parsed);
+  const iframeIndex = parts.indexOf("iframe");
+  if (iframeIndex >= 0) return parts[iframeIndex + 1] || "";
+  return parts[parts.length - 1] || "";
+}
+
+function createParams(values) {
+  const params = new URLSearchParams();
+  Object.entries(values).forEach(([key, value]) => {
+    if (value === "" || value === false || value === null || value === undefined) return;
+    params.set(key, String(value));
+  });
+  const serialized = params.toString();
+  return serialized ? `?${serialized}` : "";
+}
+
+function currentHost() {
+  if (typeof window !== "undefined" && window.location && window.location.hostname) {
+    return window.location.hostname;
+  }
+  return "localhost";
+}
+
+function formatSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+
+function providerLabel(value) {
+  const labels = {
+    youtube: "YouTube",
+    vimeo: "Vimeo",
+    dailymotion: "Dailymotion",
+    twitch: "Twitch",
+    niconico: "Niconico",
+    tiktok: "TikTok",
+    bilibili: "Bilibili",
+    wistia: "Wistia",
+    generic: "Embedded video"
+  };
+  return labels[value] || "Embedded video";
+}
+</script>
+
+<style scoped>
+.mikuru-embed-player {
+  display: grid;
+  gap: 9px;
+  margin: 0;
+  color: #0f172a;
+  font: inherit;
+}
+
+.embed-frame {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  min-height: 160px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  background: #020617;
+}
+
+.embed-iframe,
+.embed-empty {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.embed-iframe {
+  border: 0;
+  background: #020617;
+}
+
+.embed-empty {
+  display: grid;
+  place-content: center;
+  gap: 6px;
+  padding: 18px;
+  color: #e2e8f0;
+  text-align: center;
+}
+
+.embed-empty strong {
+  color: #ffffff;
+  font-size: 0.98rem;
+}
+
+.embed-empty span {
+  max-width: 34rem;
+  color: #cbd5e1;
+  font-size: 0.9rem;
+}
+
+.embed-caption {
+  display: grid;
+  gap: 2px;
+  color: #475569;
+  font-size: 0.9rem;
+}
+
+.embed-caption strong {
+  color: #0f172a;
+  font-size: 0.95rem;
+}
+</style>