mikuru 1.0.34 → 1.0.36

package/components/MikuruCodeBlock.mikuru

@@ -4,7 +4,7 @@
       <span>{{ languageLabel }}</span>
       <button type="button" @click="copyCode">{{ copyLabel }}</button>
     </figcaption>
-    <pre><code><span m-for="line in lines" :key="line.number" class="code-line"><span m-if="showLineNumbers" class="line-number">{{ line.number }}</span><span>{{ line.text }}</span>
+    <pre><code><span m-for="line in lines" :key="line.number" class="code-line"><span m-if="showLineNumbers" class="line-number">{{ line.number }}</span><span m-html="line.html"></span>
 </span></code></pre>
   </figure>
 </template>
@@ -27,10 +27,10 @@ const lines = ref([]);
 const languageLabel = computed(() => language.value || "text");
 const copyLabel = computed(() => copied.value ? "Copied" : "Copy");
 
-watch(code, () => {
+watch([code, language], () => {
   lines.value = code.value.split("\n").map((text, index) => ({
     number: index + 1,
-    text
+    html: highlightLine(text, language.value)
   }));
 }, { immediate: true });
 
@@ -42,6 +42,207 @@ async function copyCode() {
     copied.value = false;
   }, 1400);
 }
+
+function highlightLine(line, lang) {
+  const normalizedLanguage = String(lang || "text").toLowerCase();
+  if (["mikuru", "html", "xml", "svg"].includes(normalizedLanguage)) {
+    return highlightMarkup(line);
+  }
+  if (["css", "scss"].includes(normalizedLanguage)) {
+    return highlightCss(line);
+  }
+  if (["json"].includes(normalizedLanguage)) {
+    return highlightJson(line);
+  }
+  if (["js", "jsx", "javascript", "ts", "tsx", "typescript"].includes(normalizedLanguage)) {
+    return highlightScript(line);
+  }
+  return escapeHtml(line);
+}
+
+function highlightScript(line) {
+  const keywords = new Set([
+    "async", "await", "break", "case", "catch", "class", "const", "continue", "default", "do", "else",
+    "export", "extends", "finally", "for", "from", "function", "if", "import", "in", "let", "new",
+    "of", "return", "switch", "throw", "try", "typeof", "var", "while"
+  ]);
+  const literals = new Set(["false", "null", "true", "undefined"]);
+  let output = "";
+  let index = 0;
+
+  while (index < line.length) {
+    const rest = line.slice(index);
+    const comment = rest.match(/^\/\/.*/);
+    if (comment) {
+      output += token("comment", comment[0]);
+      break;
+    }
+    const blockComment = rest.match(/^\/\*.*?\*\//);
+    if (blockComment) {
+      output += token("comment", blockComment[0]);
+      index += blockComment[0].length;
+      continue;
+    }
+    const string = readString(line, index);
+    if (string) {
+      output += token("string", string);
+      index += string.length;
+      continue;
+    }
+    const number = rest.match(/^\b\d+(?:\.\d+)?\b/);
+    if (number) {
+      output += token("number", number[0]);
+      index += number[0].length;
+      continue;
+    }
+    const word = rest.match(/^[A-Za-z_$][\w$]*/);
+    if (word) {
+      const value = word[0];
+      const after = line.slice(index + value.length).trimStart();
+      if (keywords.has(value)) {
+        output += token("keyword", value);
+      } else if (literals.has(value)) {
+        output += token("literal", value);
+      } else if (after.startsWith("(")) {
+        output += token("function", value);
+      } else {
+        output += escapeHtml(value);
+      }
+      index += value.length;
+      continue;
+    }
+    const operator = rest.match(/^[{}()[\].,;:+\-*/%=!<>?&|]+/);
+    if (operator) {
+      output += token("operator", operator[0]);
+      index += operator[0].length;
+      continue;
+    }
+    output += escapeHtml(line[index]);
+    index += 1;
+  }
+
+  return output;
+}
+
+function highlightJson(line) {
+  return escapeHtml(line)
+    .replace(/(&quot;[^&]*?&quot;)(\s*:)?/g, (_, value, colon) => {
+      return colon ? `${tokenEscaped("property", value)}${colon}` : tokenEscaped("string", value);
+    })
+    .replace(/\b(true|false|null)\b/g, (_, value) => token("literal", value))
+    .replace(/\b\d+(?:\.\d+)?\b/g, (_, value) => token("number", value));
+}
+
+function highlightCss(line) {
+  return escapeHtml(line)
+    .replace(/\/\*.*?\*\//g, (_, value) => token("comment", value))
+    .replace(/(@[\w-]+)/g, (_, value) => token("keyword", value))
+    .replace(/(#(?:[0-9a-fA-F]{3}){1,2})\b/g, (_, value) => token("number", value))
+    .replace(/([\w-]+)(\s*:)/g, (_, name, colon) => `${token("property", name)}${colon}`)
+    .replace(/(&quot;[^&]*?&quot;|'[^']*?')/g, (_, value) => tokenEscaped("string", value));
+}
+
+function highlightMarkup(line) {
+  let output = "";
+  let index = 0;
+  const tagPattern = /<!--.*?-->|<\/?[A-Za-z][^>]*?>/g;
+  let match;
+
+  while ((match = tagPattern.exec(line)) !== null) {
+    output += highlightScript(line.slice(index, match.index));
+    output += match[0].startsWith("<!--") ? token("comment", match[0]) : highlightTag(match[0]);
+    index = match.index + match[0].length;
+  }
+
+  output += highlightScript(line.slice(index));
+  return output;
+}
+
+function highlightTag(tagSource) {
+  let output = "";
+  let index = 0;
+  const open = tagSource.match(/^<\/?/);
+  if (open) {
+    output += token("operator", open[0]);
+    index += open[0].length;
+  }
+
+  const tagName = tagSource.slice(index).match(/^[A-Za-z][\w:-]*/);
+  if (tagName) {
+    output += token("tag", tagName[0]);
+    index += tagName[0].length;
+  }
+
+  while (index < tagSource.length) {
+    const rest = tagSource.slice(index);
+    const close = rest.match(/^\/?>/);
+    if (close) {
+      output += token("operator", close[0]);
+      index += close[0].length;
+      continue;
+    }
+    const whitespace = rest.match(/^\s+/);
+    if (whitespace) {
+      output += escapeHtml(whitespace[0]);
+      index += whitespace[0].length;
+      continue;
+    }
+    const attribute = rest.match(/^[:@#]?[A-Za-z_][\w:.-]*/);
+    if (attribute) {
+      output += token("property", attribute[0]);
+      index += attribute[0].length;
+      continue;
+    }
+    if (tagSource[index] === "=") {
+      output += token("operator", "=");
+      index += 1;
+      continue;
+    }
+    const string = readString(tagSource, index);
+    if (string) {
+      output += token("string", string);
+      index += string.length;
+      continue;
+    }
+    output += escapeHtml(tagSource[index]);
+    index += 1;
+  }
+
+  return output;
+}
+
+function readString(line, start) {
+  const quote = line[start];
+  if (quote !== "\"" && quote !== "'" && quote !== "`") return "";
+  let index = start + 1;
+  while (index < line.length) {
+    if (line[index] === "\\") {
+      index += 2;
+      continue;
+    }
+    if (line[index] === quote) {
+      return line.slice(start, index + 1);
+    }
+    index += 1;
+  }
+  return line.slice(start);
+}
+
+function token(kind, value) {
+  return `<span class="syntax-${kind}">${escapeHtml(value)}</span>`;
+}
+
+function tokenEscaped(kind, value) {
+  return `<span class="syntax-${kind}">${value}</span>`;
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
 </script>
 
 <style scoped>
@@ -78,7 +279,7 @@ pre {
   margin: 0;
   overflow: auto;
   padding: 12px 0;
-  color: #e5e7eb;
+  color: #d4d4d4;
   font: 0.9rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
 }
 
@@ -97,4 +298,37 @@ pre {
   text-align: right;
   user-select: none;
 }
+
+:deep(.syntax-comment) {
+  color: #6a9955;
+}
+
+:deep(.syntax-function) {
+  color: #dcdcaa;
+}
+
+:deep(.syntax-keyword) {
+  color: #c586c0;
+}
+
+:deep(.syntax-literal),
+:deep(.syntax-number) {
+  color: #b5cea8;
+}
+
+:deep(.syntax-operator) {
+  color: #d4d4d4;
+}
+
+:deep(.syntax-property) {
+  color: #9cdcfe;
+}
+
+:deep(.syntax-string) {
+  color: #ce9178;
+}
+
+:deep(.syntax-tag) {
+  color: #569cd6;
+}
 </style>

package/components/MikuruCombobox.mikuru

@@ -0,0 +1,226 @@
+<template>
+  <div class="mikuru-combobox" ref="rootEl" @keydown="handleKeydown">
+    <label class="field-label">{{ label }}</label>
+    <input
+      class="combo-input"
+      type="text"
+      :value="query"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      role="combobox"
+      aria-autocomplete="list"
+      :aria-label="label"
+      :aria-expanded="open ? 'true' : 'false'"
+      @focus="openList"
+      @input="updateQuery($event)"
+    />
+    <div m-if="open" class="combo-list" role="listbox">
+      <button
+        m-for="item in filteredOptions"
+        :key="item.value"
+        class="combo-option"
+        :class="{ active: Object.is(item.value, modelValue) }"
+        type="button"
+        role="option"
+        :aria-selected="Object.is(item.value, modelValue) ? 'true' : 'false'"
+        :disabled="item.disabled"
+        @click="selectOption(item)"
+      >
+        <span>{{ item.label }}</span>
+        <small>{{ item.description }}</small>
+      </button>
+      <p m-if="filteredOptions.length === 0" class="combo-empty">{{ emptyText }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref, watch } from "mikuru";
+
+const {
+  label = "Combobox",
+  modelValue = "",
+  options = [],
+  placeholder = "Search...",
+  emptyText = "No options",
+  disabled = false
+} = defineProps();
+
+const emit = defineEmits(["update:modelValue", "change", "query"]);
+const rootEl = ref(null);
+const open = ref(false);
+const query = ref("");
+const normalizedOptions = ref([]);
+let optionsSignature = "";
+
+watch(options, syncOptions, { immediate: true });
+watch(modelValue, syncQuery, { immediate: true });
+
+const filteredOptions = computed(() => {
+  const needle = query.value.trim().toLowerCase();
+  if (!needle) return normalizedOptions.value;
+  return normalizedOptions.value.filter((item) => {
+    return item.label.toLowerCase().includes(needle) || item.description.toLowerCase().includes(needle);
+  });
+});
+
+onMounted(() => {
+  document.addEventListener("pointerdown", handleDocumentPointer);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", handleDocumentPointer);
+});
+
+function syncOptions() {
+  const source = Array.isArray(options.value) ? options.value : [];
+  const nextOptions = source.map((item, index) => {
+    if (typeof item === "string") {
+      return { label: item, value: item, description: "", disabled: false };
+    }
+    return {
+      label: item.label || `Option ${index + 1}`,
+      value: item.value ?? item.label ?? index,
+      description: item.description || "",
+      disabled: Boolean(item.disabled)
+    };
+  });
+  const nextSignature = nextOptions
+    .map((item) => `${item.value}\u0000${item.label}\u0000${item.description}\u0000${item.disabled}`)
+    .join("\u0001");
+  if (nextSignature === optionsSignature) return;
+  optionsSignature = nextSignature;
+  normalizedOptions.value = nextOptions;
+  syncQuery();
+}
+
+function syncQuery() {
+  const selected = normalizedOptions.value.find((item) => Object.is(item.value, modelValue.value));
+  if (selected) {
+    query.value = selected.label;
+  }
+}
+
+function openList() {
+  if (!disabled.value) {
+    open.value = true;
+  }
+}
+
+function closeList() {
+  open.value = false;
+}
+
+function updateQuery(event) {
+  query.value = event.target.value;
+  emit("query", query.value);
+  openList();
+}
+
+function selectOption(item) {
+  if (item.disabled) return;
+  query.value = item.label;
+  emit("update:modelValue", item.value);
+  emit("change", item.value);
+  closeList();
+}
+
+function handleDocumentPointer(event) {
+  const root = rootEl.value;
+  if (!root || root.contains(event.target)) return;
+  closeList();
+}
+
+function handleKeydown(event) {
+  if (event.key === "Escape") {
+    closeList();
+    return;
+  }
+  if (event.key !== "Enter") return;
+  if (!open.value || filteredOptions.value.length === 0) return;
+  event.preventDefault();
+  const firstEnabled = filteredOptions.value.find((item) => !item.disabled);
+  if (firstEnabled) {
+    selectOption(firstEnabled);
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-combobox {
+  position: relative;
+  display: grid;
+  gap: 6px;
+  color: #0f172a;
+  font: inherit;
+}
+
+.field-label {
+  font-weight: 650;
+}
+
+.combo-input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 10px 12px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+}
+
+.combo-input:focus {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+.combo-list {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 40;
+  display: grid;
+  max-height: 240px;
+  overflow: auto;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 16%);
+}
+
+.combo-option {
+  display: grid;
+  gap: 2px;
+  border: 0;
+  padding: 10px 12px;
+  color: #0f172a;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  cursor: pointer;
+}
+
+.combo-option:hover,
+.combo-option:focus-visible,
+.combo-option.active {
+  background: #eff6ff;
+  outline: none;
+}
+
+.combo-option:disabled {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+.combo-option small {
+  color: #64748b;
+}
+
+.combo-empty {
+  margin: 0;
+  padding: 12px;
+  color: #64748b;
+}
+</style>

package/components/MikuruFooter.mikuru

@@ -0,0 +1,121 @@
+<template>
+  <footer class="mikuru-footer">
+    <div>
+      <strong>{{ title }}</strong>
+      <p m-if="description">{{ description }}</p>
+    </div>
+
+    <nav m-if="normalizedLinks.length > 0" class="footer-links" :aria-label="navLabel">
+      <a
+        m-for="link in normalizedLinks"
+        :key="link.value"
+        :href="link.href"
+        @click="selectLink(link, $event)"
+      >
+        {{ link.label }}
+      </a>
+    </nav>
+
+    <small>{{ note }}</small>
+  </footer>
+</template>
+
+<script>
+import { ref, watch } from "mikuru";
+
+const {
+  title = "Mikuru",
+  description = "",
+  note = "",
+  navLabel = "Footer navigation",
+  links = []
+} = defineProps();
+
+const emit = defineEmits(["select"]);
+const normalizedLinks = ref([]);
+let linksSignature = "";
+
+watch(links, syncLinks, { immediate: true });
+
+function syncLinks() {
+  const source = Array.isArray(links.value) ? links.value : [];
+  const nextLinks = source.map((link, index) => {
+    if (typeof link === "string") {
+      return { label: link, value: link, href: "#" };
+    }
+    return {
+      label: link.label || `Link ${index + 1}`,
+      value: link.value ?? link.label ?? index,
+      href: link.href || "#"
+    };
+  });
+  const nextSignature = nextLinks
+    .map((link) => `${link.value}\u0000${link.label}\u0000${link.href}`)
+    .join("\u0001");
+  if (nextSignature === linksSignature) return;
+  linksSignature = nextSignature;
+  normalizedLinks.value = nextLinks;
+}
+
+function selectLink(link, event) {
+  if (link.href === "#") {
+    event.preventDefault();
+  }
+  emit("select", link.value);
+}
+</script>
+
+<style scoped>
+.mikuru-footer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px 18px;
+  align-items: center;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 14px;
+  color: #334155;
+  background: #ffffff;
+}
+
+.mikuru-footer strong {
+  color: #0f172a;
+}
+
+.mikuru-footer p {
+  margin: 4px 0 0;
+}
+
+.footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px 12px;
+}
+
+.footer-links a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+.footer-links a:hover,
+.footer-links a:focus-visible {
+  text-decoration: underline;
+  outline: none;
+}
+
+.mikuru-footer small {
+  grid-column: 1 / -1;
+  color: #64748b;
+}
+
+@media (max-width: 720px) {
+  .mikuru-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-links {
+    justify-content: flex-start;
+  }
+}
+</style>