mikuru 1.0.38 → 1.0.39

package/components/MikuruTagInput.mikuru

@@ -0,0 +1,127 @@
+<template>
+  <section class="mikuru-tag-input">
+    <label :for="inputId">{{ label }}</label>
+    <div class="tag-box">
+      <MikuruChip
+        m-for="tag in tags"
+        :key="tag"
+        :label="tag"
+        tone="info"
+        removable
+        @remove="removeTag(tag)"
+      />
+      <input
+        :id="inputId"
+        :value="draft"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="updateDraft($event)"
+        @keydown="handleKeydown"
+      />
+    </div>
+    <small m-if="help">{{ help }}</small>
+  </section>
+</template>
+
+<script>
+import { ref, watch } from "mikuru";
+import MikuruChip from "./MikuruChip.mikuru";
+
+const {
+  label = "Tags",
+  modelValue = [],
+  placeholder = "Add tag...",
+  help = "",
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: Array,
+  placeholder: String,
+  help: String,
+  disabled: Boolean
+});
+
+const emit = defineEmits(["update:modelValue", "change"]);
+const inputId = `mikuru-tags-${Math.random().toString(36).slice(2)}`;
+const tags = ref([]);
+const draft = ref("");
+
+watch(modelValue, () => {
+  tags.value = Array.from(modelValue.value || []);
+}, { immediate: true });
+
+function updateDraft(event) {
+  draft.value = event.target.value;
+}
+
+function handleKeydown(event) {
+  if (event.key === "Enter" || event.key === ",") {
+    event.preventDefault();
+    addTag();
+  }
+  if (event.key === "Backspace" && !draft.value && tags.value.length) {
+    removeTag(tags.value[tags.value.length - 1]);
+  }
+}
+
+function addTag() {
+  const nextTag = draft.value.trim().replace(/,$/, "");
+  if (!nextTag || tags.value.includes(nextTag)) return;
+  updateTags([...tags.value, nextTag]);
+  draft.value = "";
+}
+
+function removeTag(tag) {
+  updateTags(tags.value.filter((item) => item !== tag));
+}
+
+function updateTags(nextTags) {
+  tags.value = nextTags;
+  emit("update:modelValue", nextTags);
+  emit("change", nextTags);
+}
+</script>
+
+<style scoped>
+.mikuru-tag-input {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+label {
+  font-weight: 650;
+}
+
+.tag-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px;
+  background: #ffffff;
+}
+
+.tag-box:focus-within {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+input {
+  min-width: 120px;
+  flex: 1 1 120px;
+  border: 0;
+  padding: 5px;
+  color: #111827;
+  background: transparent;
+  font: inherit;
+  outline: none;
+}
+
+small {
+  color: #64748b;
+}
+</style>

package/components/MikuruTimePicker.mikuru

@@ -0,0 +1,61 @@
+<template>
+  <label class="mikuru-time-picker">
+    <span>{{ label }}</span>
+    <input
+      type="time"
+      :value="modelValue"
+      :step="step"
+      :disabled="disabled"
+      @input="updateValue($event)"
+    />
+  </label>
+</template>
+
+<script>
+const {
+  label = "Time",
+  modelValue = "09:00",
+  step = 60,
+  disabled = false
+} = defineProps({
+  label: String,
+  modelValue: String,
+  step: Number,
+  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-time-picker {
+  display: grid;
+  gap: 6px;
+  color: #111827;
+  font: inherit;
+}
+
+span {
+  font-weight: 650;
+}
+
+input {
+  width: fit-content;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 9px 10px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+}
+
+input:focus {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+</style>

package/components/MikuruTimeline.mikuru

@@ -0,0 +1,93 @@
+<template>
+  <ol class="mikuru-timeline">
+    <li m-for="item in items" :key="itemKey(item)" :data-tone="item.tone || 'neutral'">
+      <span class="timeline-dot" aria-hidden="true"></span>
+      <div class="timeline-content">
+        <time m-if="item.time">{{ item.time }}</time>
+        <strong>{{ item.title }}</strong>
+        <p m-if="item.description">{{ item.description }}</p>
+      </div>
+    </li>
+  </ol>
+</template>
+
+<script>
+const {
+  items = []
+} = defineProps({
+  items: Array
+});
+
+function itemKey(item) {
+  return item.id || item.title;
+}
+</script>
+
+<style scoped>
+.mikuru-timeline {
+  display: grid;
+  gap: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 12px;
+  padding-bottom: 14px;
+}
+
+li:not(:last-child)::before {
+  position: absolute;
+  top: 16px;
+  bottom: 0;
+  left: 6px;
+  width: 2px;
+  background: #e2e8f0;
+  content: "";
+}
+
+.timeline-dot {
+  position: relative;
+  z-index: 1;
+  width: 14px;
+  height: 14px;
+  margin-top: 4px;
+  border-radius: 999px;
+  background: #64748b;
+}
+
+li[data-tone="success"] .timeline-dot {
+  background: #16a34a;
+}
+
+li[data-tone="info"] .timeline-dot {
+  background: #2563eb;
+}
+
+li[data-tone="warning"] .timeline-dot {
+  background: #f59e0b;
+}
+
+.timeline-content {
+  display: grid;
+  gap: 2px;
+}
+
+time {
+  color: #64748b;
+  font-size: 0.82rem;
+}
+
+strong {
+  color: #111827;
+}
+
+p {
+  margin: 0;
+  color: #475569;
+}
+</style>

package/components/MikuruTreeView.mikuru

@@ -0,0 +1,72 @@
+<template>
+  <nav class="mikuru-tree-view" :aria-label="label">
+    <ul>
+      <li m-for="node in nodes" :key="nodeKey(node)">
+        <button type="button" @click="selectNode(node)">{{ node.label }}</button>
+        <ul m-if="node.children && node.children.length">
+          <li m-for="child in node.children" :key="nodeKey(child)">
+            <button type="button" @click="selectNode(child)">{{ child.label }}</button>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+const {
+  label = "Tree view",
+  nodes = []
+} = defineProps({
+  label: String,
+  nodes: Array
+});
+
+const emit = defineEmits(["select"]);
+
+function nodeKey(node) {
+  return node.id || node.value || node.label;
+}
+
+function selectNode(node) {
+  emit("select", node);
+}
+</script>
+
+<style scoped>
+.mikuru-tree-view {
+  color: #111827;
+  font: inherit;
+}
+
+ul {
+  display: grid;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+ul ul {
+  margin-top: 4px;
+  padding-left: 18px;
+}
+
+button {
+  width: 100%;
+  border: 0;
+  border-radius: 6px;
+  padding: 7px 8px;
+  color: #334155;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+button:hover,
+button:focus-visible {
+  background: #eff6ff;
+  outline: none;
+}
+</style>

package/components/MikuruWysiwygEditor.mikuru

@@ -0,0 +1,259 @@
+<template>
+  <section class="mikuru-wysiwyg-editor">
+    <header class="editor-header">
+      <label>{{ label }}</label>
+      <div class="toolbar" role="toolbar" aria-label="WYSIWYG formatting">
+        <button type="button" title="Bold" @click="format('bold')"><strong>B</strong></button>
+        <button type="button" title="Italic" @click="format('italic')"><em>I</em></button>
+        <button type="button" title="Heading" @click="toggleHeading">H</button>
+        <button type="button" title="Bulleted list" @click="format('insertUnorderedList')">•</button>
+        <button type="button" title="Link" @click="createLink">🔗</button>
+        <button type="button" title="Clear formatting" @click="format('removeFormat')">Tx</button>
+      </div>
+    </header>
+
+    <div
+      ref="editorEl"
+      class="wysiwyg-surface"
+      contenteditable="true"
+      role="textbox"
+      aria-multiline="true"
+      :aria-label="label"
+      :data-placeholder="placeholder"
+      @input="handleInput"
+      @blur="handleBlur"
+      @paste="handlePaste"
+    ></div>
+
+    <small m-if="help">{{ help }}</small>
+  </section>
+</template>
+
+<script>
+import { onMounted, ref, watch } from "mikuru";
+
+const {
+  label = "Editor",
+  modelValue = "",
+  placeholder = "Start writing...",
+  help = ""
+} = defineProps({
+  label: String,
+  modelValue: String,
+  placeholder: String,
+  help: String
+});
+
+const emit = defineEmits(["update:modelValue", "input", "change"]);
+const editorEl = ref(null);
+let internalUpdate = false;
+
+onMounted(() => {
+  syncHtml();
+});
+
+watch(modelValue, syncHtml);
+
+function syncHtml() {
+  if (internalUpdate) return;
+  const editor = editorEl.value;
+  if (!editor) return;
+  const nextHtml = sanitizeHtml(modelValue.value || "");
+  if (editor.innerHTML !== nextHtml) {
+    editor.innerHTML = nextHtml;
+  }
+}
+
+function emitInputHtml() {
+  const editor = editorEl.value;
+  if (!editor) return;
+  const nextHtml = sanitizeHtml(editor.innerHTML);
+  if (editor.innerHTML !== nextHtml) {
+    editor.innerHTML = nextHtml;
+  }
+  internalUpdate = true;
+  emit("update:modelValue", nextHtml);
+  emit("input", nextHtml);
+  internalUpdate = false;
+}
+
+function handleInput() {
+  emitInputHtml();
+}
+
+function handleBlur() {
+  emitChangeHtml();
+}
+
+function emitChangeHtml() {
+  const editor = editorEl.value;
+  if (!editor) return;
+  const nextHtml = sanitizeHtml(editor.innerHTML);
+  if (editor.innerHTML !== nextHtml) {
+    editor.innerHTML = nextHtml;
+  }
+  internalUpdate = true;
+  emit("update:modelValue", nextHtml);
+  emit("change", nextHtml);
+  internalUpdate = false;
+}
+
+function format(command) {
+  focusEditor();
+  document.execCommand(command, false);
+  emitInputHtml();
+}
+
+function toggleHeading() {
+  focusEditor();
+  document.execCommand("formatBlock", false, "h2");
+  emitInputHtml();
+}
+
+function createLink() {
+  focusEditor();
+  const url = window.prompt("Link URL");
+  if (!url) return;
+  const safeUrl = sanitizeUrl(url);
+  if (!safeUrl) return;
+  document.execCommand("createLink", false, safeUrl);
+  emitInputHtml();
+}
+
+function handlePaste(event) {
+  event.preventDefault();
+  const text = event.clipboardData?.getData("text/plain") || "";
+  document.execCommand("insertText", false, text);
+  emitInputHtml();
+}
+
+function focusEditor() {
+  editorEl.value?.focus();
+}
+
+function sanitizeHtml(html) {
+  const template = document.createElement("template");
+  template.innerHTML = String(html || "");
+  template.content.querySelectorAll("script, style, iframe, object, embed").forEach((node) => node.remove());
+  template.content.querySelectorAll("*").forEach((node) => {
+    for (const attribute of [...node.attributes]) {
+      const name = attribute.name.toLowerCase();
+      if (name.startsWith("on")) {
+        node.removeAttribute(attribute.name);
+        continue;
+      }
+      if ((name === "href" || name === "src") && !sanitizeUrl(attribute.value)) {
+        node.removeAttribute(attribute.name);
+      }
+    }
+    if (node.tagName === "A") {
+      node.setAttribute("rel", "noreferrer");
+      node.setAttribute("target", "_blank");
+    }
+  });
+  return template.innerHTML;
+}
+
+function sanitizeUrl(value) {
+  const trimmed = String(value || "").trim();
+  if (!trimmed) return "";
+  if (trimmed.startsWith("#") || trimmed.startsWith("/")) return trimmed;
+  try {
+    const parsed = new URL(trimmed);
+    return parsed.protocol === "http:" || parsed.protocol === "https:" || parsed.protocol === "mailto:"
+      ? parsed.toString()
+      : "";
+  } catch {
+    return "";
+  }
+}
+</script>
+
+<style scoped>
+.mikuru-wysiwyg-editor {
+  display: grid;
+  gap: 8px;
+  color: #111827;
+  font: inherit;
+}
+
+.editor-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+label {
+  font-weight: 650;
+}
+
+.toolbar {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 7px 9px;
+  color: #111827;
+  background: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}
+
+button:hover,
+button:focus-visible {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 16%);
+}
+
+.wysiwyg-surface {
+  min-height: 220px;
+  overflow: auto;
+  border: 1px solid #cbd5e1;
+  border-radius: 8px;
+  padding: 12px;
+  color: #111827;
+  background: #ffffff;
+  line-height: 1.6;
+  outline: none;
+}
+
+.wysiwyg-surface:focus {
+  border-color: #2563eb;
+  outline: 3px solid rgb(37 99 235 / 18%);
+}
+
+.wysiwyg-surface:empty::before {
+  content: attr(data-placeholder);
+  color: #94a3b8;
+}
+
+small {
+  color: #64748b;
+}
+
+:deep(.wysiwyg-surface h2),
+:deep(.wysiwyg-surface p),
+:deep(.wysiwyg-surface ul) {
+  margin: 0 0 10px;
+}
+
+:deep(.wysiwyg-surface a) {
+  color: #2563eb;
+}
+
+@media (max-width: 760px) {
+  .editor-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}
+</style>