@redseed/redseed-ui-vue3 2.23.0 → 2.23.1

package/package.json

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

package/src/components/LinkedList/LinkedList.vue

@@ -1,36 +1,59 @@
 <script setup>
+import { computed } from 'vue'
 import LinkedListItem from './LinkedListItem.vue'
 
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () =>[],
-  }
-});
+defineOptions({
+    inheritAttrs: false,
+})
 
-function isLastItem(item) {
-  return props.items.indexOf(item) === props.items.length - 1;
-}
+const props = defineProps({
+    items: {
+        type: Array,
+        default: () =>[],
+    },
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    done: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const componentClass = computed(() => [
+    'rsui-linked-list',
+    {
+        'rsui-linked-list--active': props.active,
+        'rsui-linked-list--done': props.done,
+    }
+])
 </script>
 
 <template>
-  <ul class="rsui-linked-list">
-    <LinkedListItem v-for="item in props.items" :key="item.id" :status="item.status" :show-line="!isLastItem(item)">
-      <template #title>{{ item.title }}</template>
-      <template #body>{{ item.body }}</template>
-    </LinkedListItem>
-  </ul>
+<ul :class="componentClass" v-bind="$attrs">
+    <slot>
+        <LinkedListItem
+            v-for="item in props.items"
+            :key="item"
+            :active="!!item.active || props.active"
+            :done="!!item.done || props.done"
+        >
+            <template #title>{{ item.title }}</template>
+            <template #body>{{ item.body }}</template>
+        </LinkedListItem>
+    </slot>
+</ul>
 </template>
 
 <style lang="scss" scoped>
 .rsui-linked-list {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+    @apply list-none p-0 m-0;
+
+    &--active {
+        :deep(.rsui-linked-list-item--active) {
+            @apply before:bg-current;
+        }
+    }
 }
 </style>
-
-
-
-
-

package/src/components/LinkedList/LinkedListItem.vue

@@ -1,55 +1,114 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, watch, useAttrs } from 'vue'
+import { CheckIcon } from '@heroicons/vue/24/outline'
+
+defineOptions({
+    inheritAttrs: false,
+})
 
 const props = defineProps({
-  status: {
-    type: String,
-    default: 'default',
-  },
-  showLine: {
-    type: Boolean,
-    default: true,
-  }
-});
-
-const statusClass = computed(() => `rsui-linked-list-item--${props.status}`);
+    active: {
+        type: Boolean,
+        default: false,
+    },
+    done: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const isActive = ref(props.active)
+watch(() => props.active, () => { isActive.value = props.active })
+
+const isDone = ref(props.done)
+watch(() => props.done, () => { isDone.value = props.done })
+
+const componentClass = computed(() => [
+    'rsui-linked-list-item',
+    isActive.value || isDone.value ? useAttrs().class : '',
+    {
+        'rsui-linked-list-item--active': isActive.value,
+        'rsui-linked-list-item--done': isDone.value,
+    },
+])
+
+const statusClass = computed(() => [
+    'rsui-linked-list-item__status',
+    {
+        'rsui-linked-list-item__status--active': isActive.value,
+        'rsui-linked-list-item__status--done': isDone.value,
+    }
+])
 </script>
 
 <template>
-  <li class="rsui-linked-list-item" :class="statusClass">
-    <div v-if="showLine" class="rsui-linked-list-item__line"></div>
-    <div class="rsui-linked-list-item__status"></div>
-    <div class="rsui-linked-list-item__content">
-      <div class="rsui-linked-list-item__title">
+<li :class="componentClass">
+    <div :class="statusClass">
+        <div class="rsui-linked-list-item__active-icon"
+            v-if="$slots['active-icon']"
+        >
+            <slot name="active-icon" v-if="isActive" />
+        </div>
+        <div class="rsui-linked-list-item__done-icon"
+        >
+            <slot name="done-icon" v-if="isDone">
+                <CheckIcon />
+            </slot>
+        </div>
+    </div>
+    <div class="rsui-linked-list-item__title">
         <slot name="title"></slot>
-      </div>
-      <div class="rsui-linked-list-item__body">
+    </div>
+    <div class="rsui-linked-list-item__body" v-if="$slots.body">
         <slot name="body"></slot>
-      </div>
     </div>
-  </li>
+</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;
-  }
+    @apply pl-9 pr-3 pt-0 pb-2 relative text-rsui-light;
+
+    /** Line style */
+    @apply before:absolute before:content-[''] before:top-1.5 before:left-[17px] before:h-full;
+    @apply last:before:hidden before:transition;
+    @apply before:inline-block before:w-0.5 before:bg-current;
+
+    &--active {
+        @apply text-primary before:bg-rsui-light;
+    }
+
+    &--done {
+        @apply text-primary;
+    }
+
+    &__status {
+        @apply absolute top-1.5 left-3 size-3 border border-current bg-current rounded-full;
+        @apply flex items-center justify-center transition;
+
+        &--active {
+            @apply bg-white;
+        }
+    }
+
+    &__active-icon {
+        :deep(svg), svg {
+            @apply size-2 text-current;
+        }
+    }
+
+    &__done-icon {
+        :deep(svg), svg {
+            @apply size-2 text-white;
+        }
+    }
+
+    &__title {
+        @apply font-semibold text-base text-rsui-default leading-normal;
+    }
+
+    &__body {
+        @apply font-normal text-sm text-rsui-medium leading-normal;
+    }
 }
 </style>