@redseed/redseed-ui-vue3 2.10.5 → 2.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.10.5",
+  "version": "2.11.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Card/Card.vue

@@ -29,9 +29,10 @@ function clicked() {
 }
 </script>
 <template>
-<div :class="cardClass"
-    v-on="clickable ? { click: clicked } : {}"
->
+<div :class="cardClass">
+    <div class="rsui-card__action-layer"
+        v-on="clickable ? { click: clicked } : {}"
+    ></div>
     <div v-if="$slots.image"
         class="rsui-card__image"
     >
@@ -78,7 +79,7 @@ function clicked() {
 </template>
 <style lang="scss" scoped>
 .rsui-card {
-    @apply flex flex-col;
+    @apply relative flex flex-col;
     @apply select-none transition duration-200;
     @apply rounded-lg bg-white shadow-full-light;
     &--hoverable {
@@ -87,11 +88,14 @@ function clicked() {
     &--clickable {
         @apply cursor-pointer;
     }
+    &__action-layer {
+        @apply absolute inset-0 bg-transparent transition;
+    }
     &__image {
         @apply rounded-t-lg overflow-hidden;
     }
     &__content {
-        @apply min-h-14 p-3 flex-1;
+        @apply min-h-14 p-3 flex-1 relative pointer-events-none;
         &-top {
             @apply flex justify-between space-x-2 pb-2;
             &--action {
@@ -101,14 +105,17 @@ function clicked() {
     }
     &__title {
         @apply max-h-12 text-lg font-semibold leading-6 line-clamp-2;
+        &-action {
+            @apply pointer-events-auto;
+        }
     }
     &__meta {
         @apply grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-4;
     }
     &__actions {
-        @apply p-3;
+        @apply relative p-3 pointer-events-none;
         & > * {
-            @apply mr-2 mb-2;
+            @apply mr-2 mb-2 pointer-events-auto;
         }
     }
 }

package/src/components/Form/FormFieldsRegister.vue

@@ -81,7 +81,7 @@ const formRef = ref(props.form)
 
 <FormFieldCheckbox
     v-if="$slots.terms"
-    v-model:checked="formRef.terms"
+    v-model="formRef.terms"
     id="terms"
     name="terms"
 >

package/src/components/FormField/FormFieldTextarea.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { ref } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+import { useTextareaAutosize } from '@vueuse/core'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const emit = defineEmits(['input', 'select'])
+
+const { textarea, input } = useTextareaAutosize({ styleProp: 'minHeight' })
+
+const model = defineModel()
+
+function onInput(event) {
+    model.value = input.value
+    emit('input', event)
+}
+
+function onSelect(event) {
+    emit('select', event)
+}
+</script>
+<template>
+<FormFieldSlot
+    :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-textarea']"
+    :required="$attrs.required"
+    :compact="$attrs.compact"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+    <textarea ref="textarea"
+        v-model="input"
+        :id="$attrs.id"
+        :name="$attrs.name"
+        :placeholder="$attrs.placeholder"
+        :disabled="$attrs.disabled"
+        :required="$attrs.required"
+        :rows="$attrs.rows"
+        @input="onInput"
+        @select="onSelect"
+    ></textarea>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+.rsui-form-field-textarea {
+    @apply relative;
+
+    textarea {
+        @apply w-full border rounded-md ring-0 text-base transition resize-none;
+        @apply py-3 px-4 outline-none focus:outline-none;
+        @apply text-rsui-default bg-white placeholder-rsui-light border-rsui-grey-200;
+        @apply focus:ring focus:ring-highlight focus:border-highlight;
+        @apply invalid:border-danger invalid:ring-0;
+        @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:ring-0;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+            display: none;
+        }
+    }
+}
+</style>

package/src/components/FormField/index.js

@@ -8,6 +8,7 @@ import FormFieldSearch from './FormFieldSearch.vue'
 import FormFieldSelect from './FormFieldSelect.vue'
 import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldText from './FormFieldText.vue'
+import FormFieldTextarea from './FormFieldTextarea.vue'
 import FormFieldTextSuffix from './FormFieldTextSuffix.vue'
 
 export {
@@ -21,5 +22,6 @@ export {
     FormFieldSelect,
     FormFieldSlot,
     FormFieldText,
+    FormFieldTextarea,
     FormFieldTextSuffix,
 }