@redseed/redseed-ui-vue3 1.0.5 → 1.0.7

package/index.js

@@ -1,9 +1,27 @@
+// import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
+// import ButtonPrimaryLight from './src/components/Button/ButtonPrimaryLight.vue'
+// import ButtonPrimaryLightRounded from './src/components/Button/ButtonPrimaryLightRounded.vue'
+// import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
+// import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
+// import ButtonSecondaryLight from './src/components/Button/ButtonSecondaryLight.vue'
+// import ButtonSecondaryLightRounded from './src/components/Button/ButtonSecondaryLightRounded.vue'
+// import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
+// import ButtonSlot from './src/components/Button/ButtonSlot.vue'
 import Card from './src/components/Card/Card.vue'
 import Image from './src/components/Image/Image.vue'
 import MessageBox from './src/components/MessageBox/MessageBox.vue'
 import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
 
 export {
+    // ButtonPrimary,
+    // ButtonPrimaryLight,
+    // ButtonPrimaryLightRounded,
+    // ButtonPrimaryRounded,
+    // ButtonSecondary,
+    // ButtonSecondaryLight,
+    // ButtonSecondaryLightRounded,
+    // ButtonSecondaryRounded,
+    // ButtonSlot,
     Card,
     Image,
     MessageBox,

package/package.json

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

package/src/components/Button/ButtonPrimary.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    light: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const buttonPrimaryClass = computed(() => [
+    'button-primary',
+    {
+        'button-primary--light': props.light,
+    },
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonPrimaryClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-primary {
+    // default colors
+    @apply bg-primary text-white ring-primary/20 border-primary;
+    // default hover state
+    @apply hover:bg-primary-dark;
+    // default active state
+    @apply active:ring-0 active:bg-primary;
+    // default disabled state
+    @apply disabled:bg-primary/20 disabled:border-transparent;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+
+    &--light {
+        @apply bg-white text-primary;
+        @apply hover:bg-white hover:text-primary-dark;
+        @apply focus-visible:border-transparent;
+        @apply active:ring-0 active:text-primary;
+        @apply disabled:text-primary/30 disabled:border-primary/30 disabled:bg-white;
+        @apply disabled:active:ring-0 disabled:focus:ring-0;
+    }
+}
+</style>

package/src/components/Button/ButtonPrimaryLight.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonPrimary from './ButtonPrimary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonPrimary
+    light
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonPrimary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonPrimaryLightRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonPrimary from './ButtonPrimary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonPrimary
+    light
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonPrimary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonPrimaryRounded.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonPrimary from './ButtonPrimary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonPrimary
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonPrimary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonSecondary.vue

@@ -0,0 +1,57 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSlot from './ButtonSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    light: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const buttonSecondaryClass = computed(() => [
+    'button-secondary',
+    {
+        'button-secondary--light': props.light,
+    },
+])
+</script>
+<template>
+<ButtonSlot
+    :class="buttonSecondaryClass"
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.button-secondary {
+    // default colors
+    @apply bg-secondary text-white ring-secondary/20 border-secondary;
+    // default hover state
+    @apply hover:bg-secondary-dark;
+    // default active state
+    @apply active:ring-0 active:bg-secondary;
+    // default disabled state
+    @apply disabled:bg-secondary/20 disabled:border-transparent;
+    @apply disabled:active:ring-0 disabled:focus:ring-0;
+
+    &--light {
+        @apply bg-white text-secondary;
+        @apply hover:bg-white hover:text-secondary-dark;
+        @apply focus-visible:border-transparent;
+        @apply active:ring-0 active:text-secondary;
+        @apply disabled:text-secondary/30 disabled:border-secondary/30 disabled:bg-white;
+        @apply disabled:active:ring-0 disabled:focus:ring-0;
+    }
+}
+</style>

package/src/components/Button/ButtonSecondaryLIghtRounded.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSecondary from './ButtonSecondary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonSecondary
+    light
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonSecondary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonSecondaryLight.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSecondary from './ButtonSecondary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonSecondary
+    light
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonSecondary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonSecondaryRounded.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { computed } from 'vue'
+import ButtonSecondary from './ButtonSecondary.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<ButtonSecondary
+    rounded
+    v-bind="$attrs"
+>
+    <template #icon v-if="$slots.icon">
+        <slot name="icon"></slot>
+    </template>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+</ButtonSecondary>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonSlot.vue

@@ -0,0 +1,189 @@
+<script setup>
+import { computed, useSlots } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const slots = useSlots()
+
+const props = defineProps({
+    xs: {
+        type: Boolean,
+        default: false,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    full: {
+        type: Boolean,
+        default: false,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+    light: {
+        type: Boolean,
+        default: false,
+    },
+    iconEnd: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
+
+const buttonSlotClass = computed(() => [
+    'button-slot',
+    {
+        // button sizes
+        'button-slot--xs': props.xs,
+        'button-slot--sm': props.sm,
+        'button-slot--md': props.md || defaultSize.value,
+        'button-slot--lg': props.lg,
+
+        // button sizes with icon
+        'button-slot--xs--icon': props.xs && !slots.label && slots.icon,
+        'button-slot--sm--icon': props.sm && !slots.label && slots.icon,
+        'button-slot--md--icon': (props.md || defaultSize.value) && !slots.label && slots.icon,
+        'button-slot--lg--icon': props.lg && !slots.label && slots.icon,
+
+        // button full width
+        'button-slot--full': props.full,
+
+        // button fully rounded
+        'button-slot--rounded': props.rounded,
+
+        // button light variant
+        'button-slot--light': props.light,
+
+        // display icon at the end
+        'button-slot--icon-end': props.iconEnd && slots.icon,
+    },
+])
+
+const buttonSlotIconClass = computed(() => [
+    'button-slot__icon',
+    {
+        // modifier for button icon to be displayed at the end
+        'button-slot__icon--end': props.iconEnd && slots.icon,
+
+        // modifier for button icon to be displayed without label
+        'button-slot__icon--only': !slots.label && slots.icon,
+    }
+])
+</script>
+<template>
+<button
+    :class="buttonSlotClass"
+    type="button"
+    v-bind="$attrs"
+>
+    <span v-if="$slots.icon"
+        :class="buttonSlotIconClass"
+    >
+        <slot name="icon"></slot>
+    </span>
+    <span v-if="$slots.label">
+        <slot name="label"></slot>
+    </span>
+</button>
+</template>
+<style lang="scss" scoped>
+.button-slot {
+    // default shape and control
+    @apply w-fit h-fit inline-flex items-center justify-center select-none outline-none rounded border transition;
+    // default colors
+    @apply bg-black/80 text-white ring-black/20 border-black/80;
+    // default hover state
+    @apply hover:bg-black;
+    // default focus state
+    @apply focus-visible:ring-4;
+    // default active state
+    @apply active:ring-0 active:bg-black/80;
+    // default disabled state
+    @apply disabled:bg-black/30 disabled:border-transparent;
+    @apply disabled:active:ring-0 disabled:focus-visible:ring-0;
+
+    // modifier light variant
+    &--light {
+        @apply bg-white text-black/80;
+        @apply hover:bg-white hover:text-black;
+        @apply focus-visible:border-transparent;
+        @apply active:ring-0 active:text-black/80;
+        @apply disabled:text-black/30 disabled:border-black/30 disabled:bg-white;
+        @apply disabled:active:ring-0 disabled:focus-visible:ring-0;
+    }
+    // modifier full width
+    &--full {
+        @apply w-full;
+    }
+    // modifier fully rounded
+    &--rounded {
+        @apply rounded-full;
+    }
+    // modifier xs size
+    &--xs {
+        @apply text-xs;
+        @apply px-2.5 py-1.5;
+        &--icon {
+            @apply px-1.5;
+        }
+        .button-slot__icon {
+            @apply w-3 h-3;
+        }
+    }
+    // modifier sm size
+    &--sm {
+        @apply text-sm;
+        @apply px-3 py-1.5;
+        &--icon {
+            @apply px-1.5;
+        }
+    }
+    // modifier md size
+    &--md {
+        @apply text-base;
+        @apply px-4 py-2;
+        &--icon {
+            @apply px-2;
+        }
+    }
+    // modifier lg size
+    &--lg {
+        @apply text-lg;
+        @apply px-4 py-2;
+        &--icon {
+            @apply px-2;
+        }
+        .button-slot__icon {
+            @apply w-5 h-5;
+        }
+    }
+    // modifier icon at the end
+    &--icon-end {
+        @apply flex-row-reverse;
+    }
+    // button icon
+    &__icon {
+        @apply block w-4 h-4 mr-2;
+        &--end {
+            @apply ml-2 mr-0;
+        }
+        &--only {
+            @apply mr-0 ml-0;
+        }
+    }
+}
+</style>