@redseed/redseed-ui-vue3 2.16.0 → 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,6 +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/LinkedList'
+export * from './src/components/TwoColumnLayout'

package/package.json

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

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