mikuru 1.0.38 → 1.0.39

package/components/MikuruCodeBlock.mikuru

@@ -4,13 +4,12 @@
       <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 m-html="line.html"></span>
-</span></code></pre>
+    <pre><code m-html="codeHtml"></code></pre>
   </figure>
 </template>
 
 <script>
-import { computed, ref, watch } from "mikuru";
+import { computed, ref } from "mikuru";
 
 const {
   code = "",
@@ -23,16 +22,9 @@ const {
 });
 
 const copied = ref(false);
-const lines = ref([]);
 const languageLabel = computed(() => language.value || "text");
 const copyLabel = computed(() => copied.value ? "Copied" : "Copy");
-
-watch([code, language], () => {
-  lines.value = code.value.split("\n").map((text, index) => ({
-    number: index + 1,
-    html: highlightLine(text, language.value)
-  }));
-}, { immediate: true });
+const codeHtml = computed(() => renderCodeHtml(code.value, language.value, showLineNumbers.value));
 
 async function copyCode() {
   if (!navigator.clipboard) return;
@@ -60,6 +52,13 @@ function highlightLine(line, lang) {
   return escapeHtml(line);
 }
 
+function renderCodeHtml(source, lang, withLineNumbers) {
+  return String(source || "").split("\n").map((text, index) => {
+    const lineNumber = withLineNumbers ? `<span class="line-number">${index + 1}</span>` : "";
+    return `<span class="code-line">${lineNumber}<span>${highlightLine(text, lang)}</span></span>`;
+  }).join("");
+}
+
 function highlightScript(line) {
   const keywords = new Set([
     "async", "await", "break", "case", "catch", "class", "const", "continue", "default", "do", "else",
@@ -283,7 +282,15 @@ pre {
   font: 0.9rem/1.55 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
 }
 
-.code-line {
+.mikuru-code-block pre code {
+  display: block;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  color: inherit;
+}
+
+:deep(.code-line) {
   display: grid;
   grid-template-columns: auto 1fr;
   min-width: max-content;
@@ -291,7 +298,7 @@ pre {
   white-space: pre;
 }
 
-.line-number {
+:deep(.line-number) {
   min-width: 3ch;
   margin-right: 14px;
   color: #64748b;

package/components/MikuruCodeView.mikuru

@@ -0,0 +1,21 @@
+<template>
+  <MikuruCodeBlock
+    :code="code"
+    :language="language"
+    :showLineNumbers="showLineNumbers"
+  />
+</template>
+
+<script>
+import MikuruCodeBlock from "./MikuruCodeBlock.mikuru";
+
+const {
+  code = "",
+  language = "text",
+  showLineNumbers = true
+} = defineProps({
+  code: String,
+  language: String,
+  showLineNumbers: Boolean
+});
+</script>

package/components/MikuruColorPicker.mikuru

@@ -0,0 +1,63 @@
+<template>
+  <label class="mikuru-color-picker">
+    <span>{{ label }}</span>
+    <span class="color-row">
+      <input type="color" :value="modelValue" :disabled="disabled" @input="updateValue($event)" />
+      <code>{{ modelValue }}</code>
+    </span>
+  </label>
+</template>
+
+<script>
+const {
+  label = "Color",
+  modelValue = "#2563eb",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+
+function updateValue(event) {
+  emit("update:modelValue", event.target.value);
+  emit("change", event.target.value);
+}
+</script>
+
+<style scoped>
+.mikuru-color-picker {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+.mikuru-color-picker > span:first-child {
+  font-weight: 650;
+}
+
+.color-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+input {
+  width: 44px;
+  height: 34px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 2px;
+  background: #ffffff;
+}
+
+code {
+  border-radius: 6px;
+  padding: 3px 7px;
+  color: #334155;
+  background: #f1f5f9;
+}
+</style>

package/components/MikuruCommandPalette.mikuru

@@ -0,0 +1,197 @@
+<template>
+  <Teleport to="body">
+    <section m-if="isOpen" class="command-layer" role="dialog" aria-modal="true" aria-label="Command palette">
+      <button class="command-backdrop" type="button" aria-label="Close command palette" @click="close"></button>
+      <div class="mikuru-command-palette">
+        <input
+          ref="inputEl"
+          :placeholder="placeholder"
+          :value="query"
+          @input="updateQuery($event)"
+          @keydown="handleInputKeydown"
+        />
+        <ul>
+          <li m-for="command in filteredCommands" :key="command.id || command.label">
+            <button type="button" @click="selectCommand(command)">
+              <span>{{ command.label }}</span>
+              <small m-if="command.description">{{ command.description }}</small>
+            </button>
+          </li>
+        </ul>
+        <p m-if="!filteredCommands.length">{{ emptyText }}</p>
+      </div>
+    </section>
+  </Teleport>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, queueJob, ref, watch } from "mikuru";
+
+const {
+  open = false,
+  commands = [],
+  placeholder = "Search commands...",
+  emptyText = "No commands found",
+  shortcut = true
+} = defineProps({
+  open: Boolean,
+  commands: Array,
+  placeholder: String,
+  emptyText: String,
+  shortcut: Boolean
+});
+
+const emit = defineEmits(["open", "close", "select", "update:open"]);
+const internalOpen = ref(false);
+const query = ref("");
+const inputEl = ref(null);
+const isOpen = computed(() => open.value || internalOpen.value);
+const filteredCommands = computed(() => {
+  const term = query.value.trim().toLowerCase();
+  if (!term) return commands.value;
+  return commands.value.filter((command) => {
+    return `${command.label || ""} ${command.description || ""} ${command.keywords || ""}`.toLowerCase().includes(term);
+  });
+});
+
+watch(open, () => {
+  if (open.value) focusInput();
+});
+
+onMounted(() => {
+  document.addEventListener("keydown", handleDocumentKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("keydown", handleDocumentKeydown);
+});
+
+function openPalette() {
+  internalOpen.value = true;
+  emit("update:open", true);
+  emit("open");
+  focusInput();
+}
+
+function close() {
+  internalOpen.value = false;
+  query.value = "";
+  emit("update:open", false);
+  emit("close");
+}
+
+function focusInput() {
+  queueJob(() => {
+    inputEl.value?.focus();
+  });
+}
+
+function updateQuery(event) {
+  query.value = event.target.value;
+}
+
+function handleDocumentKeydown(event) {
+  if (!shortcut.value) return;
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
+    event.preventDefault();
+    if (isOpen.value) {
+      close();
+    } else {
+      openPalette();
+    }
+  }
+}
+
+function handleInputKeydown(event) {
+  if (event.key === "Escape") close();
+  if (event.key === "Enter" && filteredCommands.value[0]) selectCommand(filteredCommands.value[0]);
+}
+
+function selectCommand(command) {
+  emit("select", command);
+  close();
+}
+</script>
+
+<style scoped>
+.command-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  place-items: start center;
+  padding-top: 12vh;
+}
+
+.command-backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(15 23 42 / 42%);
+}
+
+.mikuru-command-palette {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 8px;
+  width: min(560px, calc(100vw - 32px));
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px;
+  color: #111827;
+  background: #ffffff;
+  box-shadow: 0 24px 80px rgb(15 23 42 / 24%);
+}
+
+input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 11px 12px;
+  color: #111827;
+  font: inherit;
+}
+
+input:focus {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+ul {
+  display: grid;
+  gap: 4px;
+  max-height: 320px;
+  overflow: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li button {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  border: 0;
+  border-radius: 8px;
+  padding: 10px;
+  color: #111827;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+li button:hover,
+li button:focus-visible {
+  background: #eff6ff;
+  outline: none;
+}
+
+small,
+p {
+  margin: 0;
+  color: #64748b;
+}
+</style>

package/components/MikuruContextMenu.mikuru

@@ -0,0 +1,137 @@
+<template>
+  <span class="context-host" ref="rootEl" @contextmenu="openFromEvent">
+    <slot>{{ label }}</slot>
+    <Teleport to="body">
+      <div
+        m-if="isOpen"
+        class="mikuru-context-menu"
+        role="menu"
+        :style="menuStyle"
+      >
+        <button
+          m-for="item in items"
+          :key="itemKey(item)"
+          type="button"
+          role="menuitem"
+          :disabled="item.disabled"
+          @click="selectItem(item)"
+        >
+          <span>{{ item.label }}</span>
+          <small m-if="item.shortcut">{{ item.shortcut }}</small>
+        </button>
+      </div>
+    </Teleport>
+  </span>
+</template>
+
+<script>
+import { computed, onMounted, onUnmounted, ref } from "mikuru";
+
+const {
+  label = "Right click menu",
+  items = []
+} = defineProps({
+  label: String,
+  items: Array
+});
+
+const emit = defineEmits(["select", "open", "close"]);
+const rootEl = ref(null);
+const isOpen = ref(false);
+const x = ref(0);
+const y = ref(0);
+const menuStyle = computed(() => `left: ${x.value}px; top: ${y.value}px;`);
+
+onMounted(() => {
+  document.addEventListener("pointerdown", handlePointerDown);
+  document.addEventListener("keydown", handleKeydown);
+});
+
+onUnmounted(() => {
+  document.removeEventListener("pointerdown", handlePointerDown);
+  document.removeEventListener("keydown", handleKeydown);
+});
+
+function openFromEvent(event) {
+  event.preventDefault();
+  x.value = event.clientX;
+  y.value = event.clientY;
+  isOpen.value = true;
+  emit("open");
+}
+
+function close() {
+  if (!isOpen.value) return;
+  isOpen.value = false;
+  emit("close");
+}
+
+function selectItem(item) {
+  if (item.disabled) return;
+  emit("select", item);
+  close();
+}
+
+function handlePointerDown(event) {
+  if (!isOpen.value) return;
+  if (rootEl.value?.contains(event.target)) return;
+  close();
+}
+
+function handleKeydown(event) {
+  if (event.key === "Escape") close();
+}
+
+function itemKey(item) {
+  return item.id || item.value || item.label;
+}
+</script>
+
+<style scoped>
+.context-host {
+  display: inline-block;
+}
+
+.mikuru-context-menu {
+  position: fixed;
+  z-index: 90;
+  display: grid;
+  gap: 3px;
+  min-width: 180px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 6px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgb(15 23 42 / 18%);
+}
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 10px;
+  color: #111827;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+button:hover,
+button:focus-visible {
+  background: #eff6ff;
+  outline: none;
+}
+
+button:disabled {
+  color: #94a3b8;
+  cursor: not-allowed;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruDataList.mikuru

@@ -0,0 +1,61 @@
+<template>
+  <section class="mikuru-data-list" :aria-label="label">
+    <article m-for="item in items" :key="itemKey(item)" class="data-row">
+      <div>
+        <strong>{{ item.title }}</strong>
+        <p m-if="item.description">{{ item.description }}</p>
+      </div>
+      <span m-if="item.meta">{{ item.meta }}</span>
+    </article>
+  </section>
+</template>
+
+<script>
+const {
+  label = "Data list",
+  items = []
+} = defineProps({
+  label: String,
+  items: Array
+});
+
+function itemKey(item) {
+  return item.id || item.title;
+}
+</script>
+
+<style scoped>
+.mikuru-data-list {
+  display: grid;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.data-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px;
+}
+
+.data-row + .data-row {
+  border-top: 1px solid #e5e7eb;
+}
+
+strong {
+  color: #111827;
+}
+
+p {
+  margin: 3px 0 0;
+  color: #64748b;
+}
+
+.data-row > span {
+  flex: 0 0 auto;
+  color: #2563eb;
+  font-weight: 650;
+}
+</style>