@redseed/redseed-ui-vue3 2.15.3 → 2.17.0

package/index.js

@@ -11,6 +11,7 @@ export * from './src/components/Form'
 export * from './src/components/FormField'
 export * from './src/components/Image'
 export * from './src/components/Link'
+export * from './src/components/LinkedList'
 export * from './src/components/List'
 export * from './src/components/Loader'
 export * from './src/components/Logo'
@@ -23,5 +24,6 @@ export * from './src/components/Progress'
 export * from './src/components/SectionHeading'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
+export * from './src/components/Switcher'
 export * from './src/components/Toggle'
-export * from './src/components/TwoColumnLayout'
+export * from './src/components/TwoColumnLayout'

package/package.json

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

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
+}

package/src/components/Switcher/Switcher.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+import SwitcherItem from './SwitcherItem.vue'
+
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true,
+    },
+    full: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['change'])
+
+const activeItem = ref(props.items.find(item => item.active) || props.items[0])
+
+function setActiveItem(item) {
+    if (activeItem.value == item) return
+    activeItem.value = item
+    emit('change', item)
+}
+</script>
+<template>
+<div class="rsui-switcher"
+    :class="{
+        'rsui-switcher--full': props.full,
+    }"
+>
+    <SwitcherItem v-for="item in items"
+        :key="item.id"
+        :active="activeItem.id == item.id"
+        @click="setActiveItem(item)"
+    >
+            <component v-if="item.icon"
+                :is="item.icon"
+            ></component>
+            {{ item.label }}
+    </SwitcherItem>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-switcher {
+    @apply w-fit flex flex-col sm:flex-row sm:items-center overflow-hidden;
+    @apply bg-rsui-grey-150 p-1 rounded-lg;
+    &--full {
+        @apply w-full;
+        :deep(.rsui-switcher-item) {
+            @apply flex-1;
+        }
+    }
+    :deep(.rsui-switcher-item) {
+        @apply w-full sm:w-fit;
+    }
+}
+</style>

package/src/components/Switcher/SwitcherItem.vue

@@ -0,0 +1,36 @@
+<script setup>
+const props = defineProps({
+    active: {
+        type: Boolean,
+        default: false,
+    }
+})
+
+defineEmits(['click'])
+</script>
+<template>
+<div class="rsui-switcher-item"
+    :class="{
+        'rsui-switcher-item--active': props.active,
+    }"
+    @click="$emit('click')"
+>
+    <slot></slot>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-switcher-item {
+    // default control
+    @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap will-change-transform cursor-pointer;
+    // default shape
+    @apply font-semibold gap-2 rounded-md border border-transparent transition;
+    // default size
+    @apply text-base px-3 py-2;
+    &--active {
+        @apply bg-white text-rsui-default border-rsui-grey-200;
+    }
+    :deep(svg) {
+        @apply size-6;
+    }
+}
+</style>

package/src/components/Switcher/index.js

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