[Bug]: textarea widget doesn't support :v-model binding like classical vue

maelp commented 1 year ago

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

This is how to fix it

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
import { cn } from "../frameworkUtils";

const props = defineProps(["modelValue"]);
const emits = defineEmits(["update:modelValue"]);

const onInput = (event: Event) => {
  const value = (event.target as HTMLTextAreaElement).value;
  emits("update:modelValue", value);
};
</script>

<template>
  <textarea
    :value="props.modelValue"
    @input="onInput"
    :class="
      cn(
        'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
        $attrs.class ?? ''
      )
    "
  ></textarea>
</template>

Describe the bug

Otherwise doing a <Textarea v-model="someRef" /> will not work

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

zernonia commented 1 year ago

Thanks for the provided fix @maelp ! I realize Textarea for default is not as complete as new-york style. And we prefer using useVModel to standardize the usage of v-model.

This should be simple fix 😁

maelp commented 1 year ago

ah nice ! the widgets are different in both versions? then we might perhaps review them to have equivalent features?

maelp commented 1 year ago

Also I'm using the Popover and tooltip and other hover items from the "standard" lib (not new-york") and there are small bugs like:

if it opens near an edge of the screen, it goes out of the screen (rather than staying at most at left=0 or right=0 to be completely in screen)
similarly, if it opens near the bottom, the popover / tooltip / dropdown / select still opens below the widget (and therefore goes out of the screen) rather than opening on top (like it does in the radix-vue demo site)

is that a bug with the standard implementation? is it fixed in new-yrok? or should we work on a fix?

ahmedmayara commented 1 year ago

There's a prop called avoidCollisions I guess that this prop is not set to true by default in both styles (new-york and default). It's a simple fix you can open an issue and fix it if you want to.

maelp commented 1 year ago

Done (BTW did we fix the textarea in standard?)

ahmedmayara commented 1 year ago

The <Combobox /> component is built using a composition of the <Popover /> and the <Command /> components. That's why it is not implemented as seperate component in the registry folder.

ahmedmayara commented 1 year ago

Yes, the <Textarea /> component is fixed. I already did that so that's why I closed this issue.

unovue / shadcn-vue