@abraca/nuxt 0.3.0 → 1.5.0

package/dist/runtime/components/editor/AFileGlbViewer.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { ref, computed, shallowRef, watch, onMounted, onUnmounted } from "vue";
+import { Raycaster, Vector2 } from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
+const props = defineProps({
+  url: { type: String, required: true },
+  objectId: { type: String, required: true },
+  autoRotate: { type: Boolean, required: false }
+});
+const colorMode = ref("light");
+if (typeof window !== "undefined") {
+  colorMode.value = document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+const clearColor = computed(() => colorMode.value === "dark" ? "#1e1e24" : "#f4f4f5");
+const isDragging = ref(false);
+const dragMode = ref("rotate");
+const lastPointerX = ref(0);
+const lastPointerY = ref(0);
+const rotX = ref(0);
+const rotY = ref(0);
+const velX = ref(0);
+const velY = ref(0);
+const zoom = ref(4);
+const panX = ref(0);
+const panY = ref(0);
+const ZOOM_MIN = 1.5;
+const ZOOM_MAX = 12;
+const loadedModel = shallowRef(null);
+async function loadGLTF(url) {
+  const loader = new GLTFLoader();
+  const dracoLoader = new DRACOLoader();
+  dracoLoader.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/");
+  loader.setDRACOLoader(dracoLoader);
+  const gltf = await loader.loadAsync(url);
+  loadedModel.value = gltf.scene;
+}
+watch(() => props.url, (url) => {
+  if (url) loadGLTF(url);
+}, { immediate: true });
+const autoRotateEnabled = ref(props.autoRotate !== false);
+const wireframe = ref(false);
+function resetView() {
+  rotX.value = 0;
+  rotY.value = 0;
+  zoom.value = 4;
+  panX.value = 0;
+  panY.value = 0;
+  velX.value = 0;
+  velY.value = 0;
+}
+defineExpose({ autoRotateEnabled, wireframe, resetView });
+const camPos = computed(() => [panX.value, 1.5 + panY.value, zoom.value]);
+const camTarget = computed(() => [panX.value, panY.value, 0]);
+const sceneCamera = shallowRef(null);
+const raycaster = new Raycaster();
+const ndc = new Vector2();
+const wrapEl = ref(null);
+function hitsModel(ev) {
+  const cam = sceneCamera.value;
+  if (!cam || !wrapEl.value || !loadedModel.value) return true;
+  const rect = wrapEl.value.getBoundingClientRect();
+  ndc.x = (ev.clientX - rect.left) / rect.width * 2 - 1;
+  ndc.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1;
+  raycaster.setFromCamera(ndc, cam);
+  return raycaster.intersectObject(loadedModel.value, true).length > 0;
+}
+function onPointerDown(ev) {
+  if (ev.button !== 0) return;
+  dragMode.value = hitsModel(ev) ? "rotate" : "pan";
+  isDragging.value = true;
+  lastPointerX.value = ev.clientX;
+  lastPointerY.value = ev.clientY;
+  velX.value = 0;
+  velY.value = 0;
+}
+function onPointerMove(ev) {
+  if (!isDragging.value) return;
+  const dx = ev.clientX - lastPointerX.value;
+  const dy = ev.clientY - lastPointerY.value;
+  lastPointerX.value = ev.clientX;
+  lastPointerY.value = ev.clientY;
+  if (dragMode.value === "pan") {
+    const panSensitivity = 5e-3 * zoom.value;
+    panX.value -= dx * panSensitivity;
+    panY.value += dy * panSensitivity;
+  } else {
+    const sensitivity = 8e-3;
+    rotY.value += dx * sensitivity;
+    rotX.value += dy * sensitivity;
+    velX.value = dy * sensitivity;
+    velY.value = dx * sensitivity;
+  }
+}
+function onPointerUp() {
+  isDragging.value = false;
+}
+let wheelDragTimeout = null;
+function onWheel(ev) {
+  ev.preventDefault();
+  const zoomSensitivity = 3e-3 * zoom.value;
+  zoom.value = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoom.value + ev.deltaY * zoomSensitivity));
+  if (!isDragging.value) {
+    isDragging.value = true;
+  }
+  if (wheelDragTimeout) clearTimeout(wheelDragTimeout);
+  wheelDragTimeout = setTimeout(() => {
+    isDragging.value = false;
+    wheelDragTimeout = null;
+  }, 200);
+}
+onMounted(() => {
+  const handleGlobalMove = (ev) => onPointerMove(ev);
+  const handleGlobalUp = () => {
+    if (isDragging.value) onPointerUp();
+  };
+  window.addEventListener("pointermove", handleGlobalMove);
+  window.addEventListener("pointerup", handleGlobalUp);
+  const friction = 0.985;
+  const autoRotateSpeed = 3e-3;
+  const minVelocity = 5e-5;
+  let frame;
+  const loop = () => {
+    if (!isDragging.value) {
+      const hasMomentum = Math.abs(velX.value) > minVelocity || Math.abs(velY.value) > minVelocity;
+      if (hasMomentum) {
+        rotX.value += velX.value;
+        rotY.value += velY.value;
+        velX.value *= friction;
+        velY.value *= friction;
+        if (Math.abs(velX.value) <= minVelocity) velX.value = 0;
+        if (Math.abs(velY.value) <= minVelocity) velY.value = 0;
+      } else if (autoRotateEnabled.value) {
+        rotY.value += autoRotateSpeed;
+      }
+    }
+    frame = requestAnimationFrame(loop);
+  };
+  loop();
+  onUnmounted(() => {
+    window.removeEventListener("pointermove", handleGlobalMove);
+    window.removeEventListener("pointerup", handleGlobalUp);
+    cancelAnimationFrame(frame);
+  });
+});
+</script>
+
+<template>
+  <div
+    ref="wrapEl"
+    class="glb-wrap"
+    :class="{ dragging: isDragging }"
+    @pointerdown="onPointerDown"
+    @wheel.prevent="onWheel"
+  >
+    <TresCanvas :clear-color="clearColor">
+      <TresPerspectiveCamera
+        :position="camPos"
+        :look-at="camTarget"
+      />
+      <TresAmbientLight :intensity="1.5" />
+      <TresDirectionalLight
+        :position="[5, 8, 5]"
+        :intensity="2"
+        cast-shadow
+      />
+      <TresDirectionalLight
+        :position="[-5, 2, -3]"
+        :intensity="1"
+      />
+      <TresDirectionalLight
+        :position="[0, -5, 5]"
+        :intensity="0.5"
+      />
+      <TresGroup :rotation="[rotX, rotY, 0]">
+        <primitive
+          v-if="loadedModel"
+          :object="loadedModel"
+        />
+      </TresGroup>
+    </TresCanvas>
+  </div>
+</template>
+
+<style scoped>
+.glb-wrap{cursor:grab;height:100%;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.glb-wrap.dragging{cursor:grabbing}
+</style>

package/dist/runtime/components/editor/AFileGlbViewer.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    url: string;
+    objectId: string;
+    autoRotate?: boolean;
+};
+declare function resetView(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    autoRotateEnabled: import("vue").Ref<boolean, boolean>;
+    wireframe: import("vue").Ref<boolean, boolean>;
+    resetView: typeof resetView;
+}, {}, {}, {}, 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/editor/AFileVideoPlayer.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    src: string;
+    filename: string;
+};
+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/editor/AFileVideoPlayer.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from "vue";
+defineProps({
+  src: { type: String, required: true },
+  filename: { type: String, required: true }
+});
+const videoRef = ref(null);
+function requestFullscreen() {
+  videoRef.value?.requestFullscreen();
+}
+</script>
+
+<template>
+  <div>
+    <div class="fv-header">
+      <span class="fv-icon-btn">
+        <UIcon
+          name="i-lucide-film"
+          class="size-3.5"
+        />
+      </span>
+      <span class="fv-title">{{ filename }}</span>
+      <div class="fv-controls">
+        <UTooltip text="Download">
+          <a
+            :href="src"
+            :download="filename"
+            class="fv-ctrl-btn fv-ctrl-download"
+            @click.stop
+          >
+            <UIcon
+              name="i-lucide-download"
+              class="size-3.5"
+            />
+          </a>
+        </UTooltip>
+        <UTooltip text="Fullscreen">
+          <button
+            class="fv-ctrl-btn fv-ctrl-expand"
+            @click.stop="requestFullscreen"
+          >
+            <UIcon
+              name="i-lucide-maximize"
+              class="size-3.5"
+            />
+          </button>
+        </UTooltip>
+      </div>
+    </div>
+    <video
+      ref="videoRef"
+      :src="src"
+      controls
+      class="fv-video"
+      :aria-label="filename"
+    />
+  </div>
+</template>
+
+<style scoped>
+.fv-header{align-items:center;background:var(--ui-bg-elevated);border-bottom:1px solid var(--ui-border);cursor:grab;display:flex;flex-shrink:0;gap:6px;height:34px;padding:0 4px 0 10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.fv-header:active{cursor:grabbing}.fv-title{color:var(--ui-text-muted);flex:1;font-size:12px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fv-controls{align-items:center;display:flex;flex-shrink:0;gap:2px}.fv-ctrl-btn,.fv-icon-btn{align-items:center;border-radius:50%;color:var(--ui-text-dimmed);cursor:pointer;display:flex;height:22px;justify-content:center;transition:background .12s,color .12s;width:22px}.fv-ctrl-btn:hover,.fv-icon-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.fv-ctrl-download:hover,.fv-ctrl-expand:hover{background:rgba(34,197,94,.15);color:#148f3e}.fv-video{display:block;width:100%}
+</style>

package/dist/runtime/components/editor/AFileVideoPlayer.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    src: string;
+    filename: string;
+};
+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/editor/ALinkPopover.d.vue.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+    autoOpen?: boolean;
+};
+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/editor/ALinkPopover.vue

@@ -0,0 +1,149 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+const props = defineProps({
+  editor: { type: Object, required: true },
+  autoOpen: { type: Boolean, required: false }
+});
+const open = ref(false);
+const url = ref("");
+const active = computed(() => props.editor.isActive("link"));
+const disabled = computed(() => {
+  if (!props.editor.isEditable) return true;
+  const { selection } = props.editor.state;
+  return selection.empty && !props.editor.isActive("link");
+});
+watch(() => props.editor, (editor, _, onCleanup) => {
+  if (!editor) return;
+  const updateUrl = () => {
+    const { href } = editor.getAttributes("link");
+    url.value = href || "";
+  };
+  updateUrl();
+  editor.on("selectionUpdate", updateUrl);
+  onCleanup(() => {
+    editor.off("selectionUpdate", updateUrl);
+  });
+}, { immediate: true });
+watch(active, (isActive) => {
+  if (isActive && props.autoOpen) {
+    open.value = true;
+  }
+});
+function setLink() {
+  if (!url.value) return;
+  const { selection } = props.editor.state;
+  const isEmpty = selection.empty;
+  const hasCode = props.editor.isActive("code");
+  let chain = props.editor.chain().focus();
+  if (hasCode && !isEmpty) {
+    chain = chain.extendMarkRange("code").setLink({ href: url.value });
+  } else {
+    chain = chain.extendMarkRange("link").setLink({ href: url.value });
+    if (isEmpty) {
+      chain = chain.insertContent({ type: "text", text: url.value });
+    }
+  }
+  chain.run();
+  open.value = false;
+}
+function removeLink() {
+  props.editor.chain().focus().extendMarkRange("link").unsetLink().setMeta("preventAutolink", true).run();
+  url.value = "";
+  open.value = false;
+}
+async function openLink() {
+  if (!url.value) return;
+  if (url.value.startsWith("/")) {
+    const { navigateTo: nav } = await import("#imports");
+    await nav(url.value);
+    return;
+  }
+  window.open(url.value, "_blank", "noopener,noreferrer");
+}
+function handleKeyDown(event) {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    setLink();
+  }
+}
+</script>
+
+<template>
+  <UPopover
+    v-model:open="open"
+    :ui="{ content: 'p-0.5' }"
+  >
+    <UTooltip text="Link">
+      <UButton
+        icon="i-lucide-link"
+        color="neutral"
+        active-color="primary"
+        variant="ghost"
+        active-variant="soft"
+        size="sm"
+        :active="active"
+        :disabled="disabled"
+      />
+    </UTooltip>
+
+    <template #content>
+      <UInput
+        v-model="url"
+        autofocus
+        name="url"
+        type="url"
+        variant="none"
+        placeholder="Paste a link..."
+        @keydown="handleKeyDown"
+      >
+        <div class="flex items-center mr-0.5">
+          <UTooltip
+            text="Apply link"
+            :content="{ side: 'bottom' }"
+          >
+            <UButton
+              icon="i-lucide-corner-down-left"
+              variant="ghost"
+              size="sm"
+              :disabled="!url && !active"
+              @click="setLink"
+            />
+          </UTooltip>
+
+          <USeparator
+            orientation="vertical"
+            class="h-6 mx-1"
+          />
+
+          <UTooltip
+            text="Open in new window"
+            :content="{ side: 'bottom' }"
+          >
+            <UButton
+              icon="i-lucide-external-link"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="!url && !active"
+              @click="openLink"
+            />
+          </UTooltip>
+
+          <UTooltip
+            text="Remove link"
+            :content="{ side: 'bottom' }"
+          >
+            <UButton
+              icon="i-lucide-trash"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              :disabled="!url && !active"
+              @click="removeLink"
+            />
+          </UTooltip>
+        </div>
+      </UInput>
+    </template>
+  </UPopover>
+</template>

package/dist/runtime/components/editor/ALinkPopover.vue.d.ts

@@ -0,0 +1,8 @@
+import type { Editor } from '@tiptap/vue-3';
+type __VLS_Props = {
+    editor: Editor;
+    autoOpen?: boolean;
+};
+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/editor/ALocationPickerPopover.d.vue.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    latValue?: number;
+    lngValue?: number;
+    open: boolean;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    "update:open": (args_0: boolean) => any;
+    "update:lat": (args_0: number) => any;
+    "update:lng": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    "onUpdate:open"?: ((args_0: boolean) => any) | undefined;
+    "onUpdate:lat"?: ((args_0: number) => any) | undefined;
+    "onUpdate:lng"?: ((args_0: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};