@olares/lares-mobile 0.15.5 → 0.15.7

package/src/desktop/DesktopTodos.vue

@@ -0,0 +1,52 @@
+<template>
+  <Transition name="lares-panel">
+    <div v-if="rows.length" class="desktop-todos">
+      <button type="button" class="desktop-todos__header" :aria-expanded="open" @click="open = !open">
+        <span>{{ t("todo.progress", { done, total: rows.length }) }}</span>
+        <span class="desktop-todos__chevron" :data-open="open ? 'true' : 'false'" aria-hidden="true">⌄</span>
+      </button>
+      <ul class="desktop-todos__list" :data-open="open ? 'true' : 'false'">
+        <li v-for="(row, index) in rows" :key="`${index}-${row.content}`" :data-status="row.status">
+          <span aria-hidden="true">{{ row.status === "completed" ? "✓" : row.status === "in_progress" ? "●" : "○" }}</span>
+          <span>{{ row.content }}</span>
+        </li>
+      </ul>
+    </div>
+  </Transition>
+</template>
+
+<script>
+export default {
+  name: "LaresDesktopTodos",
+  props: {
+    rows: { type: Array, default: () => [] },
+    t: { type: Function, required: true },
+  },
+  data() {
+    return { open: true };
+  },
+  computed: {
+    done() {
+      return this.rows.filter((row) => row.status === "completed").length;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.desktop-todos { box-sizing:border-box; width:calc(100% - 24px); margin:0 auto -3px; border:1px solid var(--q-separator); border-bottom:0; border-radius:12px 12px 0 0; padding:3px 0 6px; background:var(--q-background-3); color:var(--q-ink-2); font-size:13px; }
+.desktop-todos__header { display:flex; width:100%; height:32px; align-items:center; justify-content:space-between; border:0; padding:0 12px; background:transparent; color:inherit; font:inherit; font-weight:500; cursor:pointer; }
+.desktop-todos__chevron { display:inline-block; transition:transform var(--lares-duration-fast, 120ms) var(--lares-ease-out, ease); }
+.desktop-todos__chevron[data-open="false"] { transform:rotate(180deg); }
+.desktop-todos__list { max-height:0; overflow:hidden; margin:0; padding:0 12px; list-style:none; opacity:0; transition:max-height var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)), opacity var(--lares-duration-normal, 220ms) var(--lares-ease-out, cubic-bezier(0.32, 0.72, 0, 1)); }
+.desktop-todos__list[data-open="true"] { max-height:120px; overflow:auto; opacity:1; }
+@media (prefers-reduced-motion: reduce) {
+  .desktop-todos__chevron,
+  .desktop-todos__list { transition:none; }
+  .desktop-todos__list[data-open="false"] { opacity:1; }
+}
+.desktop-todos li { display:flex; min-height:25px; align-items:flex-start; gap:8px; }
+.desktop-todos li > span:first-child { color:var(--q-ink-3); }
+.desktop-todos li[data-status="in_progress"] > span:first-child { color:var(--q-blue-default); }
+.desktop-todos li[data-status="completed"] { color:var(--q-ink-3); text-decoration:line-through; }
+</style>

package/src/desktop/DirectoryBrowser.vue

@@ -0,0 +1,231 @@
+<template>
+  <LaresPcDialog
+    :open="state.open"
+    :title="t('desktop.selectWorkspaceDirectory')"
+    :close-label="t('desktop.close')"
+    :busy="state.creating || state.creatingFolder"
+    :width="620"
+    variant="directory"
+    @close="$emit('close')"
+  >
+    <template #header="{ titleId }">
+      <div class="directory-browser__header">
+        <h2 :id="titleId">{{ t("desktop.selectWorkspaceDirectory") }}</h2>
+        <div class="directory-browser__location">
+          <input
+            v-if="editingPath"
+            ref="pathInput"
+            v-model="pathDraft"
+            :aria-label="t('desktop.folderPath')"
+            @keydown.enter.prevent="submitPath"
+            @keydown.esc.prevent="editingPath = false"
+            @blur="editingPath = false"
+          />
+          <nav v-else-if="state.listing" :aria-label="t('desktop.folderPath')">
+            <template v-for="(crumb, index) in homeCrumbs" :key="crumb.path">
+              <span v-if="index" aria-hidden="true">/</span>
+              <button type="button" @click="$emit('browse', crumb.path)">
+                {{ crumb.path === state.listing.home ? t("desktop.home") : crumb.name }}
+              </button>
+            </template>
+          </nav>
+          <button
+            v-if="!editingPath"
+            type="button"
+            class="directory-browser__edit"
+            :aria-label="t('desktop.folderPath')"
+            @click="beginPathEdit"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="m4 16-.75 4.25L7.5 19.5 18.4 8.6a2.1 2.1 0 0 0-3-3Z" />
+              <path d="m13.8 7.2 3 3M3 21h18" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </template>
+    <div class="directory-browser">
+      <div class="directory-browser__body">
+        <p v-if="state.loading" class="directory-browser__status">{{ t("desktop.loadingFolders") }}</p>
+        <p v-else-if="state.error" class="directory-browser__error">{{ state.error }}</p>
+        <template v-else-if="state.listing">
+          <div
+            v-for="entry in visibleEntries"
+            :key="entry.path"
+            class="directory-browser__row"
+            role="button"
+            tabindex="0"
+            @dblclick="$emit('browse', entry.path)"
+            @click="selected = entry.path"
+            @keydown.enter="$emit('browse', entry.path)"
+            :data-selected="selected === entry.path"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 7.5h6l1.6 2H20.5v9H3.5z" /></svg>
+            <span>{{ entry.name }}</span>
+            <button type="button" class="directory-browser__open" @click.stop="$emit('browse', entry.path)">
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6" /></svg>
+            </button>
+          </div>
+          <p v-if="visibleEntries.length === 0" class="directory-browser__status">{{ t("desktop.noFolders") }}</p>
+        </template>
+      </div>
+    </div>
+    <template #footer>
+      <div class="directory-browser__footer">
+        <div class="directory-browser__footer-left">
+            <button
+              type="button"
+              class="directory-browser__new-folder"
+              :disabled="!state.listing?.path || state.loading || state.creatingFolder"
+              @click="newFolderOpen = true"
+            >
+              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
+              <span>{{ t("desktop.newFolder") }}</span>
+            </button>
+            <label class="directory-browser__hidden">
+              <input
+                type="checkbox"
+                :checked="state.showHidden"
+                @change="$emit('toggle-hidden', $event.target.checked)"
+              />
+              <span>{{ t("desktop.showHiddenFiles") }}</span>
+            </label>
+        </div>
+        <div class="directory-browser__footer-right">
+            <button type="button" class="directory-browser__cancel" :disabled="state.creating" @click="$emit('close')">
+              {{ t("desktop.cancel") }}
+            </button>
+            <button
+              type="button"
+              class="directory-browser__choose"
+              :disabled="state.loading || state.creating || !(selected || state.listing?.path)"
+              @click="$emit('choose', selected || state.listing.path)"
+            >
+              {{ state.creating ? t("desktop.addingWorkspace") : t("desktop.open") }}
+            </button>
+        </div>
+      </div>
+    </template>
+  </LaresPcDialog>
+  <LaresDirectoryNewFolder
+    :open="newFolderOpen"
+    :busy="state.creatingFolder"
+    :t="t"
+    @close="newFolderOpen = false"
+    @create="onCreateFolder"
+  />
+</template>
+
+<script>
+import LaresPcDialog from "./ui/PcDialog.vue";
+import LaresDirectoryNewFolder from "./DirectoryNewFolder.vue";
+
+export default {
+  name: "LaresDirectoryBrowser",
+  components: { LaresPcDialog, LaresDirectoryNewFolder },
+  props: {
+    state: { type: Object, required: true },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "browse", "choose", "create-folder", "toggle-hidden"],
+  data() {
+    return { selected: "", newFolderOpen: false, editingPath: false, pathDraft: "" };
+  },
+  computed: {
+    visibleEntries() {
+      const entries = this.state.listing?.entries ?? [];
+      return this.state.showHidden ? entries : entries.filter((entry) => !entry.hidden);
+    },
+    homeCrumbs() {
+      const crumbs = this.state.listing?.crumbs ?? [];
+      const home = this.state.listing?.home;
+      const homeIndex = crumbs.findIndex((crumb) => crumb.path === home);
+      return homeIndex >= 0 ? crumbs.slice(homeIndex) : crumbs;
+    },
+  },
+  watch: {
+    "state.listing.path"() {
+      this.selected = this.state.selectPath || "";
+      this.pathDraft = this.state.listing?.path || "";
+      this.editingPath = false;
+    },
+    "state.selectPath"(path) {
+      if (path) this.selected = path;
+    },
+    "state.creatingFolder"(busy, was) {
+      if (was && !busy && !this.state.error) this.newFolderOpen = false;
+    },
+    "state.open"(open) {
+      if (!open) {
+        this.newFolderOpen = false;
+        this.selected = "";
+      }
+    },
+  },
+  methods: {
+    onCreateFolder(name) {
+      this.$emit("create-folder", name);
+    },
+    beginPathEdit() {
+      this.pathDraft = this.state.listing?.path || "";
+      this.editingPath = true;
+      this.$nextTick(() => {
+        this.$refs.pathInput?.focus();
+        this.$refs.pathInput?.select();
+      });
+    },
+    submitPath() {
+      const path = this.pathDraft.trim();
+      if (!path) return;
+      this.editingPath = false;
+      this.$emit("browse", path);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.directory-browser__header { height:76px; }
+.directory-browser__header h2 { height:42px; margin:0; padding:19px 22px 0; font-size:16px; font-weight:500; line-height:22px; }
+.directory-browser__location { display:flex; height:34px; align-items:center; gap:8px; padding:0 20px 7px 22px; }
+.directory-browser__location nav { display:flex; min-width:0; flex:1; align-items:center; gap:7px; overflow:hidden; color:var(--q-ink-2); }
+.directory-browser__location nav button { min-width:0; overflow:hidden; border:0; padding:0; background:transparent; color:inherit; font:inherit; font-size:14px; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
+.directory-browser__location nav button:hover { color:var(--q-ink-1); }
+.directory-browser__location input { box-sizing:border-box; min-width:0; height:27px; flex:1; border:1px solid var(--q-input-stroke); border-radius:5px; padding:0 8px; outline:none; background:var(--q-background-2); color:var(--q-ink-1); font:inherit; font-size:13px; }
+.directory-browser__edit { display:grid; width:30px; height:30px; flex-shrink:0; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--q-ink-2); cursor:pointer; }
+.directory-browser__edit:hover { background:var(--q-background-hover); color:var(--q-ink-1); }
+.directory-browser__edit svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser { display:flex; height:min(316px, calc(100vh - 186px)); flex-direction:column; }
+.directory-browser svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser__body { flex:1; min-height:0; overflow:auto; padding:13px 20px; }
+.directory-browser__row { display:flex; width:100%; height:28px; align-items:center; gap:7px; border:0; border-radius:6px; padding:0 6px; background:transparent; color:var(--q-ink-1); font-size:14px; text-align:left; }
+.directory-browser__row:hover { background:var(--q-background-hover); }
+.directory-browser__row[data-selected="true"] { background:var(--q-background-selected); }
+.directory-browser__row > span { min-width:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.directory-browser__open { display:grid; width:26px; height:26px; place-items:center; border:0; background:transparent; color:var(--q-ink-3); }
+.directory-browser__status,
+.directory-browser__error { margin:20px; color:var(--q-ink-3); font-size:14px; text-align:center; }
+.directory-browser__error { color:var(--q-orange-default); }
+.directory-browser__footer { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; }
+.directory-browser__footer-left { display:flex; min-width:0; flex:1; align-items:center; gap:12px; }
+.directory-browser__footer-right { display:flex; flex-shrink:0; align-items:center; gap:8px; }
+.directory-browser__new-folder { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--q-btn-stroke); border-radius:999px; padding:0 14px; height:34px; background:transparent; color:var(--q-ink-1); font:inherit; font-size:14px; white-space:nowrap; }
+/* The footer is a dialog slot, outside `.directory-browser`, so it misses the shared icon rule. */
+.directory-browser__new-folder svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
+.directory-browser__hidden { display:inline-flex; align-items:center; color:var(--q-ink-2); font-size:13px; white-space:nowrap; cursor:pointer; }
+.directory-browser__hidden input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
+.directory-browser__hidden:has(input:checked) { color:var(--q-ink-1); }
+.directory-browser__cancel,
+.directory-browser__choose { min-width:67px; height:34px; border-radius:999px; padding:0 14px; font-size:14px; }
+.directory-browser__cancel { border:1px solid var(--q-btn-stroke); background:transparent; color:var(--q-ink-1); }
+.directory-browser__new-folder:hover:not(:disabled),
+.directory-browser__cancel:hover:not(:disabled) { background:var(--q-btn-bg-hover); border-color:var(--q-btn-stroke-hover); }
+/* The confirm button is the inverse surface: white on dark, dark on light. */
+.directory-browser__choose { border:0; background:var(--q-background-9); color:var(--q-background-1); }
+.directory-browser button,
+.directory-browser__cancel,
+.directory-browser__choose { cursor:pointer; font:inherit; }
+.directory-browser button:disabled,
+.directory-browser__cancel:disabled,
+.directory-browser__choose:disabled { opacity:.5; cursor:default; }
+</style>

package/src/desktop/DirectoryNewFolder.vue

@@ -0,0 +1,124 @@
+<template>
+  <LaresPcDialog
+    :open="open"
+    :title="t('desktop.newFolder')"
+    :close-label="t('desktop.close')"
+    :busy="busy"
+    :width="420"
+    @close="$emit('close')"
+  >
+    <div class="directory-new-folder">
+      <input
+        ref="input"
+        v-model="value"
+        class="directory-new-folder__input"
+        :placeholder="t('desktop.untitledFolder')"
+        :disabled="busy"
+        @keydown.enter.prevent="submit"
+      />
+    </div>
+    <template #footer>
+      <button type="button" class="directory-new-folder__cancel" :disabled="busy" @click="$emit('close')">
+        {{ t("desktop.cancel") }}
+      </button>
+      <button
+        type="button"
+        class="directory-new-folder__create"
+        :disabled="busy || !value.trim()"
+        @click="submit"
+      >
+        {{ t("desktop.createFolder") }}
+      </button>
+    </template>
+  </LaresPcDialog>
+</template>
+
+<script>
+import LaresPcDialog from "./ui/PcDialog.vue";
+
+export default {
+  name: "LaresDirectoryNewFolder",
+  components: { LaresPcDialog },
+  props: {
+    open: { type: Boolean, default: false },
+    busy: { type: Boolean, default: false },
+    t: { type: Function, required: true },
+  },
+  emits: ["close", "create"],
+  data() {
+    return { value: "" };
+  },
+  watch: {
+    open(value) {
+      if (!value) {
+        this.value = "";
+        return;
+      }
+      this.value = this.t("desktop.untitledFolder");
+      this.$nextTick(() => {
+        this.$refs.input?.focus();
+        this.$refs.input?.select();
+      });
+    },
+  },
+  methods: {
+    submit() {
+      const name = this.value.trim();
+      if (!name || this.busy) return;
+      this.$emit("create", name);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.directory-new-folder {
+  padding-inline: 12px;
+}
+
+.directory-new-folder__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  border: 1px solid var(--q-input-stroke, var(--q-separator));
+  border-radius: 999px;
+  padding: 0 14px;
+  background: transparent;
+  color: var(--q-ink-1);
+  font: inherit;
+  font-size: 15px;
+}
+
+.directory-new-folder__input:focus {
+  outline: none;
+  border-color: var(--q-blue-default);
+}
+
+.directory-new-folder__cancel,
+.directory-new-folder__create {
+  min-width: 76px;
+  height: 32px;
+  border-radius: 999px;
+  padding: 0 14px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.directory-new-folder__cancel {
+  border: 1px solid var(--q-separator);
+  background: transparent;
+  color: var(--q-ink-2);
+}
+
+.directory-new-folder__create {
+  border: 0;
+  background: var(--q-blue-default);
+  color: var(--q-ink-on-brand);
+}
+
+.directory-new-folder__cancel:disabled,
+.directory-new-folder__create:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+</style>

package/src/desktop/ui/PcDialog.vue

@@ -0,0 +1,100 @@
+<template>
+  <Teleport to="body">
+    <Transition name="lares-dialog">
+      <div
+        v-if="open"
+        class="lares-pc-dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-labelledby="titleId"
+        :data-variant="variant || undefined"
+      >
+        <button class="lares-pc-dialog__backdrop" type="button" :aria-label="closeLabel" @click="close" />
+        <section class="lares-pc-dialog__surface" :style="{ width: surfaceWidth }">
+        <header class="lares-pc-dialog__header">
+          <slot name="header" :title-id="titleId">
+            <div class="lares-pc-dialog__title">
+              <h2 :id="titleId">{{ title }}</h2>
+              <button type="button" class="lares-pc-dialog__close" :aria-label="closeLabel" @click="close">
+                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 7 10 10M17 7 7 17" /></svg>
+              </button>
+            </div>
+            <p v-if="description">{{ description }}</p>
+          </slot>
+        </header>
+        <div class="lares-pc-dialog__body">
+          <slot />
+        </div>
+        <footer v-if="$slots.footer" class="lares-pc-dialog__footer">
+          <slot name="footer" />
+        </footer>
+        </section>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script>
+let dialogId = 0;
+
+export default {
+  name: "LaresPcDialog",
+  props: {
+    open: { type: Boolean, default: false },
+    title: { type: String, required: true },
+    description: { type: String, default: "" },
+    closeLabel: { type: String, default: "Close" },
+    width: { type: [Number, String], default: 440 },
+    busy: { type: Boolean, default: false },
+    variant: { type: String, default: "" },
+  },
+  emits: ["close"],
+  data() {
+    dialogId += 1;
+    return { titleId: `lares-pc-dialog-${dialogId}` };
+  },
+  computed: {
+    surfaceWidth() {
+      return typeof this.width === "number" ? `${this.width}px` : this.width;
+    },
+  },
+  watch: {
+    open(value) {
+      if (value) window.addEventListener("keydown", this.onKey);
+      else window.removeEventListener("keydown", this.onKey);
+    },
+  },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.onKey);
+  },
+  methods: {
+    close() {
+      if (!this.busy) this.$emit("close");
+    },
+    onKey(event) {
+      if (event.key === "Escape") this.close();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-pc-dialog { position:fixed; z-index:10000; inset:0; display:grid; place-items:center; color:var(--q-ink-1); }
+.lares-pc-dialog__backdrop { position:absolute; inset:0; border:0; background:rgb(0 0 0 / 46%); }
+.lares-pc-dialog__surface { position:relative; display:flex; max-width:calc(100vw - 48px); max-height:calc(100vh - 48px); flex-direction:column; overflow:hidden; border:1px solid var(--q-separator); border-radius:12px; background:var(--q-background-1); box-shadow:0 18px 60px rgb(0 0 0 / 32%); }
+/* 12px + the 30px close button + 12px keeps a title-only header at 54px. */
+.lares-pc-dialog__header { display:flex; flex-shrink:0; flex-direction:column; padding:12px 16px; border-bottom:1px solid var(--q-separator); }
+.lares-pc-dialog__title { display:flex; min-height:30px; align-items:center; justify-content:space-between; gap:16px; }
+.lares-pc-dialog__header h2 { margin:0; font-size:17px; font-weight:600; line-height:22px; }
+.lares-pc-dialog__header p { margin:2px 0 0; color:var(--q-ink-3); font-size:13px; line-height:18px; }
+.lares-pc-dialog__close { display:grid; width:30px; height:30px; flex-shrink:0; place-items:center; border:0; border-radius:7px; background:transparent; color:var(--q-ink-2); cursor:pointer; }
+.lares-pc-dialog__close:hover { background:var(--q-background-hover); }
+.lares-pc-dialog__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
+.lares-pc-dialog__body { min-height:0; overflow:auto; padding:16px; }
+.lares-pc-dialog__footer { display:flex; min-height:58px; flex-shrink:0; align-items:center; justify-content:flex-end; gap:8px; padding:0 16px; border-top:1px solid var(--q-separator); }
+/* The directory variant only changes geometry; colors stay on the shared tokens. */
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__surface { border-radius:20px; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__header { padding:0; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__body { padding:0; }
+.lares-pc-dialog[data-variant="directory"] .lares-pc-dialog__footer { min-height:62px; padding:0 22px; }
+</style>

package/src/desktop/ui/PcPopover.vue

@@ -0,0 +1,110 @@
+<template>
+  <span ref="anchor" class="lares-pc-popover">
+    <slot name="trigger" :open="modelValue" :toggle="toggle" :close="close" />
+    <Teleport to="body">
+      <Transition name="lares-popover">
+        <div v-if="modelValue" class="lares-pc-popover__layer" @mousedown.self="close">
+          <div
+            ref="panel"
+            class="lares-pc-popover__panel"
+            :style="panelStyle"
+            role="menu"
+            @mousedown.stop
+          >
+            <slot :close="close" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </span>
+</template>
+
+<script>
+import { placePanel } from "./place.js";
+
+export default {
+  name: "LaresPcPopover",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    width: { type: [Number, String], default: 220 },
+    placement: { type: String, default: "bottom-end" },
+    minPanelHeight: { type: Number, default: 120 },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      panel: { top: "", bottom: "", left: "0px", width: "220px", maxHeight: "320px" },
+    };
+  },
+  computed: {
+    panelStyle() {
+      return this.panel;
+    },
+  },
+  watch: {
+    modelValue(open) {
+      if (open) {
+        window.addEventListener("resize", this.place);
+        window.addEventListener("scroll", this.place, true);
+        window.addEventListener("keydown", this.onKey);
+        this.$nextTick(this.place);
+      } else {
+        this.unlisten();
+      }
+    },
+  },
+  beforeUnmount() {
+    this.unlisten();
+  },
+  methods: {
+    toggle() {
+      this.$emit("update:modelValue", !this.modelValue);
+    },
+    close() {
+      this.$emit("update:modelValue", false);
+    },
+    unlisten() {
+      window.removeEventListener("resize", this.place);
+      window.removeEventListener("scroll", this.place, true);
+      window.removeEventListener("keydown", this.onKey);
+    },
+    onKey(event) {
+      if (event.key === "Escape") this.close();
+    },
+    place() {
+      const anchor = this.$refs.anchor;
+      if (!anchor) return;
+      const box = anchor.getBoundingClientRect();
+      const width = this.width === "anchor"
+        ? box.width
+        : typeof this.width === "number"
+          ? this.width
+          : Number.parseFloat(this.width) || box.width;
+      this.panel = placePanel({
+        box,
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        width,
+        placement: this.placement,
+        minHeight: this.minPanelHeight,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.lares-pc-popover { display:inline-flex; min-width:0; }
+.lares-pc-popover__layer { position:fixed; z-index:9000; inset:0; }
+.lares-pc-popover__panel {
+  position:fixed;
+  box-sizing:border-box;
+  overflow-x:hidden;
+  overflow-y:auto;
+  border:1px solid var(--q-separator);
+  border-radius:8px;
+  padding:6px;
+  background:var(--q-background-1);
+  color:var(--q-ink-1);
+  box-shadow:0 8px 28px rgb(0 0 0 / 20%);
+}
+</style>