@redseed/redseed-ui-vue3 2.15.2 → 2.16.0

package/index.js

@@ -25,3 +25,4 @@ export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Toggle'
 export * from './src/components/TwoColumnLayout'
+export * from './src/components/LinkedList'

package/package.json

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

package/src/components/FormField/FormFieldSlot.vue

@@ -25,7 +25,7 @@ const formFieldSlotClass = computed(() => [
 const formFieldSlotLabelClass = computed(() => [
     'rsui-form-field-slot__label',
     {
-        'rsui-form-field-slot__label--required': attrs.required !== undefined,
+        'rsui-form-field-slot__label--required': attrs.required !== undefined && attrs.required !== false,
     },
 ])
 </script>

package/src/components/FormField/FormFieldText.vue

@@ -83,7 +83,7 @@ defineExpose({
         @apply w-full border rounded-md ring-0;
         @apply bg-white placeholder-rsui-light border-rsui-grey-200;
         @apply has-[:focus]:ring has-[:focus]:ring-highlight has-[:focus]:border-highlight;
-        @apply has-[:invalid]:border-danger has-[:invalid]:ring-0;
+        @apply has-[:user-invalid]:border-danger has-[:user-invalid]:ring-0;
         @apply has-[:disabled]:text-rsui-light has-[:disabled]:bg-rsui-grey-200 has-[:disbaled]:ring-0;
     }
     &__prefix {

package/src/components/LinkedList/LinkedList.vue

@@ -0,0 +1,21 @@
+<script setup>
+</script>
+
+<template>
+  <ul class="rsui-linked-list">
+    <slot></slot>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.rsui-linked-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+</style>
+
+
+
+
+

package/src/components/LinkedList/LinkedListCard.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: 'default',
+  }
+});
+
+const statusClass = computed(() => `rsui-linked-list-item__status--${props.status}`);
+</script>
+
+<template>
+  <li class="rsui-linked-list-item">
+    <div class="rsui-linked-list-item__line"></div>
+    <div class="rsui-linked-list-item__status" :class="statusClass"></div>
+    <div class="rsui-linked-list-item__content">
+      <div class="rsui-linked-list-item__title">
+        <slot name="title"></slot>
+      </div>
+      <div class="rsui-linked-list-item__body">
+        <slot name="body"></slot>
+      </div>
+    </div>
+  </li>
+</template>
+
+<style lang="scss" scoped>
+.rsui-linked-list-item {
+  @apply pl-[30px] pb-[30px] relative;
+  &__line {
+    @apply absolute top-[10px] left-[4px] bg-[#eee] w-[2px] h-[calc(100%-10px)];
+  }
+  &__status {
+    @apply absolute top-[6.5px] left-0 z-[1] w-[10px] h-[10px] bg-[#eee] rounded-full border-white;
+  }
+  &:last-child {
+    @apply pb-0;
+    .rsui-linked-list-item__line {
+      @apply h-[calc(100%-10px)];
+    }
+  }
+  &__title {
+    @apply font-bold mb-[5px];
+  }
+  &__body {
+    @apply font-normal;
+  }
+}
+</style>

package/src/components/LinkedList/index.js

@@ -0,0 +1,7 @@
+import LinkedList from './LinkedList.vue'
+import LinkedListCard from './LinkedListCard.vue'
+
+export {
+    LinkedList,
+    LinkedListCard
+}