Atsu Posts - Answer Overflow

Atsu

•Created by Atsu on 9/15/2024 in #❓・help

VueUse - useDraggable with dynamic list

I'm trying to achieve a dynamic list of draggable elements inside a container. I know can easily do this with one element. Though I have issues getting it to work with a dynamic list. I have something like this :

<script setup lang="ts">
const container = useTemplateRef < HTMLDivElement > ('containerRef')

type UIFragment = {
  name: string,
  classes?: string,
}

const fragments = ref <UIFragment[]> ([])
const fragmentRefs = useTemplateRefsList<HTMLDivElement>()

const draggables = computed( () => {
// wait for the next tick to ensure the DOM is updated
  return fragmentRefs.value.map((ref) => useDraggable(ref))
})


const addFragment = () => {
  fragments.value.push({
    name: `Fragment ${fragments.value.length + 1}`
  })
}

watch(draggables, async () => {
  await nextTick()

  console.log([...draggables.value])
}, {
  deep: true,
  flush: 'post',
})

</script>

<template>
  <div class="flex flex-col">
    <h1>Home</h1>
    <button @click="addFragment">
      Add Fragment
    </button>

    {{ fragments }}

    <div ref="containerRef" class="size-80 bg-green-300">
      <div v-for="(fragment, index) in fragments" :key="index" class="flex flex-col" :ref="fragmentRefs.set" :style="draggables[index]?.style">
            {{ index }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const container = useTemplateRef < HTMLDivElement > ('containerRef')

type UIFragment = {
  name: string,
  classes?: string,
}

const fragments = ref <UIFragment[]> ([])
const fragmentRefs = useTemplateRefsList<HTMLDivElement>()

const draggables = computed( () => {
// wait for the next tick to ensure the DOM is updated
  return fragmentRefs.value.map((ref) => useDraggable(ref))
})


const addFragment = () => {
  fragments.value.push({
    name: `Fragment ${fragments.value.length + 1}`
  })
}

watch(draggables, async () => {
  await nextTick()

  console.log([...draggables.value])
}, {
  deep: true,
  flush: 'post',
})

</script>

<template>
  <div class="flex flex-col">
    <h1>Home</h1>
    <button @click="addFragment">
      Add Fragment
    </button>

    {{ fragments }}

    <div ref="containerRef" class="size-80 bg-green-300">
      <div v-for="(fragment, index) in fragments" :key="index" class="flex flex-col" :ref="fragmentRefs.set" :style="draggables[index]?.style">
            {{ index }}
      </div>
    </div>
  </div>
</template>

First it seems that draggles access at style creates a circular dependency. Also this seems awfully inconvenient to do it something like this. The idea is that I would like to have something like in a design tool where users can add new UI elements themselves. Has anyone worked in such a way with useDraggable? I'm not even sure if i have the right idea. Any help would be much appreciated!

2 replies

NNuxt

•Created by Atsu on 8/23/2024 in #❓・help

Session and Tokens best practices - nuxt-auth-utils

I'm looking for advice on securely storing user credentials when using Discord as an OAuth provider. I need to check if a user is part of certain Discord servers to validate their access to some APIs. I'm not sure how to securely store the Discord tokens for this purpose. I know they shouldn't be stored in a session, but I'm considering using a KV database. I'm just looking for the best way to handle this. Any suggestions or pointers in the right direction would be really helpful. Thanks!

5 replies

NNuxt

•Created by Atsu on 7/29/2024 in #❓・help

Share zod schema with client and server

For a form I validate the input on the server for the correct query. For the frontend I want to reuse the same zod schema to validate the user input. I have not found any documentation about whether or not it's a security concern or if it is even possible. Does anyone have experience with this?

7 replies

Gaming

Programming