@redseed/redseed-ui-vue3 1.7.2 → 1.9.0

package/index.js

@@ -34,6 +34,14 @@ import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.
 import FormWrapperBuild from './src/components/Form/FormWrapperBuild.vue'
 import FormWrapperLMS from './src/components/Form/FormWrapperLMS.vue'
 import Image from './src/components/Image/Image.vue'
+import Image3By1 from './src/components/Image/Image3By1.vue'
+import Image3By1Rounded from './src/components/Image/Image3By1Rounded.vue'
+import Image9By16 from './src/components/Image/Image9By16.vue'
+import Image9By16Rounded from './src/components/Image/Image9By16Rounded.vue'
+import Image16By9 from './src/components/Image/Image16By9.vue'
+import Image16By9Rounded from './src/components/Image/Image16By9Rounded.vue'
+import ImageCircle from './src/components/Image/ImageCircle.vue'
+import ImageRounded from './src/components/Image/ImageRounded.vue'
 import LogoRedSeedBuild from './src/components/Logo/LogoRedSeedBuild.vue'
 import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
 import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
@@ -84,6 +92,14 @@ export {
     FormWrapperBuild,
     FormWrapperLMS,
     Image,
+    Image3By1,
+    Image3By1Rounded,
+    Image9By16,
+    Image9By16Rounded,
+    Image16By9,
+    Image16By9Rounded,
+    ImageCircle,
+    ImageRounded,
     LogoRedSeedBuild,
     LogoRedSeedCoach,
     LogoRedSeedCourses,

package/package.json

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

package/src/components/Card/Card.vue

@@ -53,12 +53,24 @@ function clicked() {
             </div>
         </div>
         <slot></slot>
+        <div v-if="$slots.meta"
+            class="rsui-card__meta"
+        >
+            <slot name="meta"></slot>
+        </div>
+    </div>
+    <div v-if="$slots.actions"
+        class="rsui-card__actions"
+    >
+        <slot name="actions"></slot>
     </div>
 </div>
 </template>
 <style lang="scss" scoped>
 .rsui-card {
-    @apply border border-gray-100 rounded-lg bg-white select-none overflow-hidden shadow-full-light transition duration-200;
+    @apply flex flex-col;
+    @apply select-none overflow-hidden transition duration-200;
+    @apply border border-gray-100 rounded-lg bg-white shadow-full-light;
     &--hoverable {
         @apply hover:shadow-md;
     }
@@ -66,10 +78,10 @@ function clicked() {
         @apply cursor-pointer;
     }
     &__image {
-        @apply aspect-video overflow-hidden;
+        // @apply aspect-video overflow-hidden;
     }
     &__content {
-        @apply min-h-14 p-3;
+        @apply min-h-14 p-3 flex-1;
         &-top {
             @apply flex justify-between space-x-2 pb-2;
         }
@@ -77,5 +89,14 @@ function clicked() {
             @apply h-12 text-lg font-semibold leading-6 line-clamp-2;
         }
     }
+    &__meta {
+        @apply grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-4;
+    }
+    &__actions {
+        @apply p-3;
+        & > * {
+            @apply mr-2 mb-2;
+        }
+    }
 }
 </style>

package/src/components/Image/Image16By9.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-16/9">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-16\/9 {
+    @apply aspect-video overflow-hidden;
+}
+</style>

package/src/components/Image/Image16By9Rounded.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-16/9">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-16\/9 {
+    @apply aspect-video rounded-lg overflow-hidden;
+}
+</style>

package/src/components/Image/Image3By1.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-3/1">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-3\/1 {
+    @apply aspect-3/1 overflow-hidden;
+}
+</style>

package/src/components/Image/Image3By1Rounded.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-3/1">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-3\/1 {
+    @apply aspect-3/1 rounded-lg overflow-hidden;
+}
+</style>

package/src/components/Image/Image9By16.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-9/16">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-9\/16 {
+    @apply aspect-9/16 overflow-hidden;
+}
+</style>

package/src/components/Image/Image9By16Rounded.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-9/16">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-9\/16 {
+    @apply aspect-9/16 rounded overflow-hidden;
+}
+</style>

package/src/components/Image/ImageCircle.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-circle">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-circle {
+    @apply aspect-square rounded-full overflow-hidden;
+}
+</style>

package/src/components/Image/ImageRounded.vue

@@ -0,0 +1,17 @@
+<script setup>
+import Image from './Image.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<div class="rsui-image-rounded">
+    <Image v-bind="$attrs"></Image>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-image-rounded {
+    @apply rounded-lg overflow-hidden;
+}
+</style>