@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/components/renderers/table/cells/ATableCellColor.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  value: { type: null, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const inputRef = ref();
+const popoverOpen = ref(false);
+const editValue = ref("");
+const colorStr = computed(() => {
+  if (typeof props.value === "string" && props.value) return props.value;
+  return "";
+});
+watch(popoverOpen, (v) => {
+  if (v) {
+    editValue.value = colorStr.value || "#6366f1";
+    emit("startEdit");
+  } else {
+    emit("stopEdit");
+  }
+});
+function commit() {
+  emit("update:modelValue", editValue.value);
+  popoverOpen.value = false;
+  emit("stopEdit");
+}
+</script>
+
+<template>
+  <div
+    class="min-h-5 flex items-center"
+    @click.stop
+  >
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ align: 'start' }"
+    >
+      <button class="flex items-center gap-1.5 cursor-pointer">
+        <span
+          class="size-4 rounded-full shrink-0 ring-1 ring-(--ui-border)"
+          :style="{ background: colorStr || '#d1d5db' }"
+        />
+        <span
+          v-if="colorStr"
+          class="text-xs text-(--ui-text-muted) font-mono"
+        >{{ colorStr }}</span>
+      </button>
+      <template #content>
+        <div class="p-3">
+          <input
+            ref="inputRef"
+            v-model="editValue"
+            type="color"
+            class="w-32 h-8 cursor-pointer"
+          >
+          <div class="flex justify-end mt-2">
+            <UButton
+              size="xs"
+              label="Apply"
+              @click="commit"
+            />
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellColor.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    value: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellDate.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    metaType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellDate.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { ref, watch, nextTick, computed } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  editing: { type: Boolean, required: true },
+  metaType: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const inputRef = ref();
+const editValue = ref("");
+watch(() => props.editing, (v) => {
+  if (v) {
+    editValue.value = typeof props.value === "string" ? props.value.slice(0, 10) : "";
+    nextTick(() => inputRef.value?.focus());
+  }
+});
+function commit() {
+  if (!editValue.value) {
+    emit("update:modelValue", void 0);
+  } else if (props.metaType === "datetime") {
+    const time = typeof props.value === "string" ? props.value.slice(11, 16) : "00:00";
+    emit("update:modelValue", `${editValue.value}T${time || "00:00"}:00.000Z`);
+  } else {
+    emit("update:modelValue", editValue.value);
+  }
+  emit("stopEdit");
+}
+const dateStr = computed(() => {
+  if (!props.value || typeof props.value !== "string") return "";
+  return props.value.slice(0, 10);
+});
+function isOverdue(s) {
+  return new Date(s) < new Date((/* @__PURE__ */ new Date()).toDateString());
+}
+function isDueSoon(s) {
+  const due = new Date(s);
+  const now = /* @__PURE__ */ new Date();
+  const twoDays = 2 * 24 * 60 * 60 * 1e3;
+  return due.getTime() - now.getTime() < twoDays && !isOverdue(s);
+}
+function formatRelativeDate(s) {
+  const date = new Date(s);
+  const now = /* @__PURE__ */ new Date();
+  const diffDays = Math.round((date.getTime() - now.getTime()) / (1e3 * 60 * 60 * 24));
+  if (diffDays === 0) return "Today";
+  if (diffDays === 1) return "Tomorrow";
+  if (diffDays === -1) return "Yesterday";
+  if (diffDays < -1) return `${Math.abs(diffDays)}d ago`;
+  if (diffDays <= 7) return `in ${diffDays}d`;
+  return date.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+const displayText = computed(() => {
+  if (!dateStr.value) return "";
+  return formatRelativeDate(dateStr.value);
+});
+const colorClass = computed(() => {
+  if (!dateStr.value) return "";
+  if (isOverdue(dateStr.value)) return "text-red-400";
+  if (isDueSoon(dateStr.value)) return "text-amber-400";
+  return "text-(--ui-text)";
+});
+</script>
+
+<template>
+  <div
+    class="min-h-5"
+    @click="emit('startEdit')"
+  >
+    <input
+      v-if="editing"
+      ref="inputRef"
+      v-model="editValue"
+      type="date"
+      class="w-full bg-transparent outline-none text-sm"
+      @blur="commit"
+      @keydown.enter="commit"
+      @keydown.escape="emit('stopEdit')"
+      @click.stop
+    >
+    <span
+      v-else-if="displayText"
+      class="block text-sm truncate whitespace-nowrap"
+      :class="colorClass"
+    >
+      <UIcon
+        name="i-lucide-calendar"
+        class="size-3 inline-block mr-1 align-[-2px]"
+      />{{ displayText }}
+    </span>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellDate.vue.d.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    metaType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellMembers.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellMembers.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  value: { type: null, required: true }
+});
+const members = computed(() => {
+  if (!Array.isArray(props.value)) return [];
+  return props.value;
+});
+</script>
+
+<template>
+  <div class="min-h-5 flex items-center">
+    <div
+      v-if="members.length"
+      class="flex items-center -space-x-1"
+    >
+      <UTooltip
+        v-for="m in members"
+        :key="m.id"
+        :text="m.label"
+      >
+        <UAvatar
+          :alt="m.label"
+          size="2xs"
+        />
+      </UTooltip>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellMembers.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    value: unknown;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellMultiSelect.d.vue.ts

@@ -0,0 +1,17 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellMultiSelect.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  editing: { type: Boolean, required: true },
+  column: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const popoverOpen = ref(false);
+const options = computed(() => props.column.options ?? []);
+const selected = computed(() => {
+  if (Array.isArray(props.value)) return props.value;
+  if (typeof props.value === "string" && props.value) return [props.value];
+  return [];
+});
+function toggle(opt) {
+  const current = selected.value;
+  const updated = current.includes(opt) ? current.filter((v) => v !== opt) : [...current, opt];
+  emit("update:modelValue", updated);
+}
+watch(popoverOpen, (v) => {
+  if (v) emit("startEdit");
+  else emit("stopEdit");
+});
+</script>
+
+<template>
+  <div class="min-h-5">
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ align: 'start' }"
+    >
+      <div
+        class="flex flex-wrap gap-0.5 cursor-pointer"
+        @click.stop
+      >
+        <UBadge
+          v-for="item in selected"
+          :key="item"
+          size="sm"
+          variant="subtle"
+          color="neutral"
+        >
+          {{ item }}
+        </UBadge>
+      </div>
+      <template #content>
+        <div class="flex flex-col w-44">
+          <div
+            v-for="opt in options"
+            :key="opt"
+            class="flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) cursor-pointer text-sm"
+            @click="toggle(opt)"
+          >
+            <UIcon
+              v-if="selected.includes(opt)"
+              name="i-lucide-check"
+              class="size-3.5 text-(--ui-primary) shrink-0"
+            />
+            <span
+              v-else
+              class="size-3.5 shrink-0"
+            />
+            {{ opt }}
+          </div>
+          <div
+            v-if="options.length === 0"
+            class="px-3 py-2 text-xs text-(--ui-text-dimmed)"
+          >
+            No options configured
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellMultiSelect.vue.d.ts

@@ -0,0 +1,17 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellNumber.d.vue.ts

@@ -0,0 +1,17 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellNumber.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ref, watch, nextTick, computed } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  editing: { type: Boolean, required: true },
+  column: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const inputRef = ref();
+const editValue = ref("");
+watch(() => props.editing, (v) => {
+  if (v) {
+    editValue.value = props.value != null ? String(props.value) : "";
+    nextTick(() => inputRef.value?.focus());
+  }
+});
+function commit() {
+  const parsed = editValue.value.trim() === "" ? void 0 : Number(editValue.value);
+  emit("update:modelValue", parsed != null && !Number.isNaN(parsed) ? parsed : void 0);
+  emit("stopEdit");
+}
+const displayValue = computed(() => {
+  if (props.value == null || props.value === "") return "";
+  const n = Number(props.value);
+  if (Number.isNaN(n)) return String(props.value);
+  const unit = props.column.unit;
+  return unit ? `${n}${unit}` : String(n);
+});
+</script>
+
+<template>
+  <div
+    class="min-h-5"
+    @click="emit('startEdit')"
+  >
+    <input
+      v-if="editing"
+      ref="inputRef"
+      v-model="editValue"
+      type="number"
+      class="w-full bg-transparent outline-none text-sm text-right tabular-nums"
+      @blur="commit"
+      @keydown.enter="commit"
+      @keydown.escape="emit('stopEdit')"
+      @click.stop
+    >
+    <span
+      v-else
+      class="block text-sm text-(--ui-text) text-right tabular-nums truncate"
+    >
+      {{ displayValue }}
+    </span>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellNumber.vue.d.ts

@@ -0,0 +1,17 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellRating.d.vue.ts

@@ -0,0 +1,16 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellRating.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { computed, nextTick } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  column: { type: Object, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const rating = computed(() => Number(props.value) || 0);
+const max = computed(() => props.column.sliderMax ?? 5);
+function setRating(i) {
+  emit("startEdit");
+  emit("update:modelValue", rating.value === i ? 0 : i);
+  nextTick(() => emit("stopEdit"));
+}
+</script>
+
+<template>
+  <div
+    class="min-h-5 flex items-center gap-0.5"
+    @click.stop
+  >
+    <button
+      v-for="i in max"
+      :key="i"
+      class="size-4 flex items-center justify-center transition-colors"
+      :class="rating >= i ? 'text-amber-400' : 'text-(--ui-text-dimmed) opacity-30 hover:opacity-60'"
+      @click="setRating(i)"
+    >
+      <UIcon
+        name="i-lucide-star"
+        class="size-3.5"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/components/renderers/table/cells/ATableCellRating.vue.d.ts

@@ -0,0 +1,16 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    column: TableColumnDef;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellSelect.d.vue.ts

@@ -0,0 +1,18 @@
+import type { TableColumnDef } from '../../../../composables/useChildTree.js';
+type __VLS_Props = {
+    value: unknown;
+    editing: boolean;
+    column: TableColumnDef;
+    metaType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+    startEdit: () => any;
+    stopEdit: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => any) | undefined;
+    onStartEdit?: (() => any) | undefined;
+    onStopEdit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/table/cells/ATableCellSelect.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  value: { type: null, required: true },
+  editing: { type: Boolean, required: true },
+  column: { type: Object, required: true },
+  metaType: { type: String, required: true }
+});
+const emit = defineEmits(["update:modelValue", "startEdit", "stopEdit"]);
+const popoverOpen = ref(false);
+const PRIORITY_OPTIONS = [
+  { label: "None", value: 0 },
+  { label: "Low", value: 1 },
+  { label: "Medium", value: 2 },
+  { label: "High", value: 3 },
+  { label: "Urgent", value: 4 }
+];
+const STATUS_OPTIONS = ["Todo", "In Progress", "Done", "Blocked"];
+const options = computed(() => {
+  if (props.metaType === "priority") return PRIORITY_OPTIONS.map((p) => p.label);
+  if (props.metaType === "status") return STATUS_OPTIONS;
+  return props.column.options ?? [];
+});
+const displayValue = computed(() => {
+  if (props.value == null || props.value === "") return "";
+  if (props.metaType === "priority") {
+    const p = PRIORITY_OPTIONS.find((o) => o.value === props.value);
+    return p?.label ?? String(props.value);
+  }
+  return String(props.value);
+});
+const priorityColor = computed(() => {
+  if (props.metaType !== "priority") return void 0;
+  const v = Number(props.value);
+  if (v === 4) return "error";
+  if (v === 3) return "warning";
+  if (v === 2) return "info";
+  if (v === 1) return "neutral";
+  return void 0;
+});
+function onSelect(opt) {
+  if (props.metaType === "priority") {
+    const p = PRIORITY_OPTIONS.find((o) => o.label === opt);
+    emit("update:modelValue", p?.value ?? opt);
+  } else {
+    emit("update:modelValue", opt);
+  }
+  popoverOpen.value = false;
+  emit("stopEdit");
+}
+watch(popoverOpen, (v) => {
+  if (v) emit("startEdit");
+  else emit("stopEdit");
+});
+</script>
+
+<template>
+  <div class="min-h-5">
+    <UPopover
+      v-model:open="popoverOpen"
+      :content="{ align: 'start' }"
+    >
+      <div
+        class="cursor-pointer"
+        @click.stop
+      >
+        <UBadge
+          v-if="displayValue"
+          size="sm"
+          variant="subtle"
+          :color="priorityColor ?? 'neutral'"
+          class="cursor-pointer"
+        >
+          <UIcon
+            v-if="metaType === 'priority' && Number(value) >= 2"
+            name="i-lucide-flag"
+            class="size-3 mr-0.5"
+          />
+          {{ displayValue }}
+        </UBadge>
+      </div>
+      <template #content>
+        <div class="flex flex-col w-44">
+          <div
+            v-for="opt in options"
+            :key="opt"
+            class="flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) cursor-pointer text-sm"
+            @click="onSelect(opt)"
+          >
+            <UIcon
+              v-if="displayValue === opt"
+              name="i-lucide-check"
+              class="size-3.5 text-(--ui-primary) shrink-0"
+            />
+            <span
+              v-else
+              class="size-3.5 shrink-0"
+            />
+            {{ opt }}
+          </div>
+          <div
+            v-if="options.length === 0"
+            class="px-3 py-2 text-xs text-(--ui-text-dimmed)"
+          >
+            No options configured
+          </div>
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>