@redseed/redseed-ui-vue3 1.9.2 → 2.0.0

package/index.js

@@ -1,111 +1,20 @@
-import BadgeSlot from './src/components/Badge/BadgeSlot.vue'
-import BadgeSuccess from './src/components/Badge/BadgeSuccess.vue'
-import ButtonDanger from './src/components/Button/ButtonDanger.vue'
-import ButtonDangerFull from './src/components/Button/ButtonDangerFull.vue'
-import ButtonDangerFullRounded from './src/components/Button/ButtonDangerFullRounded.vue'
-import ButtonDangerRounded from './src/components/Button/ButtonDangerRounded.vue'
-import ButtonPrimary from './src/components/Button/ButtonPrimary.vue'
-import ButtonPrimaryFull from './src/components/Button/ButtonPrimaryFull.vue'
-import ButtonPrimaryFullRounded from './src/components/Button/ButtonPrimaryFullRounded.vue'
-import ButtonPrimaryRounded from './src/components/Button/ButtonPrimaryRounded.vue'
-import ButtonSecondary from './src/components/Button/ButtonSecondary.vue'
-import ButtonSecondaryFull from './src/components/Button/ButtonSecondaryFull.vue'
-import ButtonSecondaryFullRounded from './src/components/Button/ButtonSecondaryFullRounded.vue'
-import ButtonSecondaryRounded from './src/components/Button/ButtonSecondaryRounded.vue'
-import ButtonSlot from './src/components/Button/ButtonSlot.vue'
-import ButtonTertiary from './src/components/Button/ButtonTertiary.vue'
-import ButtonTertiaryFull from './src/components/Button/ButtonTertiaryFull.vue'
-import ButtonTertiaryFullRounded from './src/components/Button/ButtonTertiaryFullRounded.vue'
-import ButtonTertiaryRounded from './src/components/Button/ButtonTertiaryRounded.vue'
-import ButtonGroup from './src/components/ButtonGroup/ButtonGroup.vue'
-import ButtonGroupItem from './src/components/ButtonGroup/ButtonGroupItem.vue'
-import Card from './src/components/Card/Card.vue'
-import DropdownMenu from './src/components/DropdownMenu/DropdownMenu.vue'
-import DropdownOption from './src/components/DropdownMenu/DropdownOption.vue'
-import FormFieldCheckbox from './src/components/FormField/FormFieldCheckbox.vue'
-import FormFieldEmail from './src/components/FormField/FormFieldEmail.vue'
-import FormFieldHidden from './src/components/FormField/FormFieldHidden.vue'
-import FormFieldPassword from './src/components/FormField/FormFieldPassword.vue'
-import FormFieldPasswordToggle from './src/components/FormField/FormFieldPasswordToggle.vue'
-import FormFieldSearch from './src/components/FormField/FormFieldSearch.vue'
-import FormFieldsLogin from './src/components/Form/FormFieldsLogin.vue'
-import FormFieldSlot from './src/components/FormField/FormFieldSlot.vue'
-import FormFieldsRegister from './src/components/Form/FormFieldsRegister.vue'
-import FormFieldText from './src/components/FormField/FormFieldText.vue'
-import FormFieldTextSuffix from './src/components/FormField/FormFieldTextSuffix.vue'
-import FormWrapperBuild from './src/components/Form/FormWrapperBuild.vue'
-import FormWrapperLMS from './src/components/Form/FormWrapperLMS.vue'
-import Image from './src/components/Image/Image.vue'
-import Image3By1 from './src/components/Image/Image3By1.vue'
-import Image9By16 from './src/components/Image/Image9By16.vue'
-import Image16By9 from './src/components/Image/Image16By9.vue'
-import ImageCircle from './src/components/Image/ImageCircle.vue'
-import LogoRedSeedBuild from './src/components/Logo/LogoRedSeedBuild.vue'
-import LogoRedSeedCoach from './src/components/Logo/LogoRedSeedCoach.vue'
-import LogoRedSeedCourses from './src/components/Logo/LogoRedSeedCourses.vue'
-import LogoRedSeedLMS from './src/components/Logo/LogoRedSeedLMS.vue'
-import MessageBox from './src/components/MessageBox/MessageBox.vue'
-import MetaInfo from './src/components/MetaInfo/MetaInfo.vue'
-import Modal from './src/components/Modal/Modal.vue'
-import PageHeading from './src/components/PageHeading/PageHeading.vue'
-import ProgressCircle from './src/components/Progress/ProgressCircle.vue'
-import SignInWithGoogle from './src/components/Social/SignInWithGoogle.vue'
-import SignUpWithGoogle from './src/components/Social/SignUpWithGoogle.vue'
-import TwoColumnLayout from './src/components/TwoColumnLayout/TwoColumnLayout.vue'
-
-export {
-    BadgeSlot,
-    BadgeSuccess,
-    ButtonDanger,
-    ButtonDangerFull,
-    ButtonDangerFullRounded,
-    ButtonDangerRounded,
-    ButtonGroup,
-    ButtonGroupItem,
-    ButtonPrimary,
-    ButtonPrimaryFull,
-    ButtonPrimaryFullRounded,
-    ButtonPrimaryRounded,
-    ButtonSecondary,
-    ButtonSecondaryFull,
-    ButtonSecondaryFullRounded,
-    ButtonSecondaryRounded,
-    ButtonSlot,
-    ButtonTertiary,
-    ButtonTertiaryFull,
-    ButtonTertiaryFullRounded,
-    ButtonTertiaryRounded,
-    Card,
-    DropdownMenu,
-    DropdownOption,
-    FormFieldCheckbox,
-    FormFieldEmail,
-    FormFieldHidden,
-    FormFieldPassword,
-    FormFieldPasswordToggle,
-    FormFieldSearch,
-    FormFieldsLogin,
-    FormFieldSlot,
-    FormFieldsRegister,
-    FormFieldText,
-    FormFieldTextSuffix,
-    FormWrapperBuild,
-    FormWrapperLMS,
-    Image,
-    Image3By1,
-    Image9By16,
-    Image16By9,
-    ImageCircle,
-    LogoRedSeedBuild,
-    LogoRedSeedCoach,
-    LogoRedSeedCourses,
-    LogoRedSeedLMS,
-    MessageBox,
-    MetaInfo,
-    Modal,
-    PageHeading,
-    ProgressCircle,
-    SignInWithGoogle,
-    SignUpWithGoogle,
-    TwoColumnLayout,
-}
+export * from './src/components/Badge'
+export * from './src/components/Button'
+export * from './src/components/ButtonGroup'
+export * from './src/components/Card'
+export * from './src/components/DropdownMenu'
+export * from './src/components/Form'
+export * from './src/components/FormField'
+export * from './src/components/Image'
+export * from './src/components/Link'
+export * from './src/components/List'
+export * from './src/components/Logo'
+export * from './src/components/MessageBox'
+export * from './src/components/MetaInfo'
+export * from './src/components/Modal'
+export * from './src/components/PageHeading'
+export * from './src/components/Pagination'
+export * from './src/components/Progress'
+export * from './src/components/Social'
+export * from './src/components/Sorting'
+export * from './src/components/TwoColumnLayout'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "1.9.2",
+  "version": "2.0.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -10,9 +10,9 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@heroicons/vue": "^2.1.3",
-    "@vueuse/components": "^10.9.0",
-    "@vueuse/core": "^10.9.0",
-    "vue": "^3.4.21"
+    "@heroicons/vue": "^2.1.5",
+    "@vueuse/components": "^10.11.0",
+    "@vueuse/core": "^10.11.0",
+    "vue": "^3.4.34"
   }
 }

package/src/components/Badge/index.js

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

package/src/components/Button/ButtonDanger.vue

@@ -15,26 +15,20 @@ const buttonClass = computed(() => [
     :class="buttonClass"
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-    <template #label v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-danger {
     // default colors
-    @apply bg-white text-danger ring-danger/20 border-danger;
+    @apply bg-danger-content text-danger ring-danger/30 border-danger/40;
     // default hover state
-    @apply hover:bg-white hover:text-danger-dark hover:border-danger-dark;
+    @apply hover:border-danger;
     // default focus state
-    @apply focus-visible:border-transparent focus-visible:text-danger;
+    @apply focus-visible:border-danger/30;
     // default active state
-    @apply active:ring-0 active:text-danger active:border-danger;
+    @apply active:border-danger active:bg-danger/10;
     // default disabled state
-    @apply disabled:text-danger/30 disabled:border-danger/30 disabled:bg-white;
-    @apply disabled:active:ring-0 disabled:focus:ring-0;
+    @apply disabled:text-danger/10 disabled:border-danger/10 disabled:bg-danger-content;
 }
 </style>

package/src/components/Button/ButtonDangerFull.vue

@@ -11,13 +11,7 @@ defineOptions({
     full
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonDanger>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonDangerFullRounded.vue

@@ -12,13 +12,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonDanger>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonDangerRounded.vue

@@ -11,13 +11,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonDanger>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonPrimary.vue

@@ -15,24 +15,18 @@ const buttonClass = computed(() => [
     :class="buttonClass"
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-    <template #label v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-primary {
     // default colors
-    @apply bg-primary text-white ring-primary/20 border-primary;
-    // default hover state
-    @apply hover:bg-primary-dark;
+    @apply bg-primary text-primary-content ring-primary/30 border-primary;
+    // default focus state
+    @apply focus-visible:border-primary/30;
     // default active state
-    @apply active:ring-0 active:bg-primary;
+    @apply active:border-primary active:bg-primary/80;
     // default disabled state
-    @apply disabled:bg-primary/20 disabled:border-transparent;
-    @apply disabled:active:ring-0 disabled:focus:ring-0;
+    @apply disabled:text-primary-content disabled:border-transparent disabled:bg-primary/20;
 }
 </style>

package/src/components/Button/ButtonPrimaryFull.vue

@@ -11,14 +11,7 @@ defineOptions({
     full
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonPrimaryFullRounded.vue

@@ -12,14 +12,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonPrimaryRounded.vue

@@ -11,14 +11,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonPrimary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondary.vue

@@ -15,24 +15,18 @@ const buttonClass = computed(() => [
     :class="buttonClass"
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-    <template #label v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-secondary {
     // default colors
-    @apply bg-secondary text-white ring-secondary/20 border-secondary;
-    // default hover state
-    @apply hover:bg-secondary-dark;
+    @apply bg-secondary text-secondary-content ring-secondary/30 border-secondary;
+    // default focus state
+    @apply focus-visible:border-secondary/30;
     // default active state
-    @apply active:ring-0 active:bg-secondary;
+    @apply active:border-secondary active:bg-secondary/80;
     // default disabled state
-    @apply disabled:bg-secondary/20 disabled:border-transparent;
-    @apply disabled:active:ring-0 disabled:focus:ring-0;
+    @apply disabled:text-secondary-content disabled:border-transparent disabled:bg-secondary/20;
 }
 </style>

package/src/components/Button/ButtonSecondaryFull.vue

@@ -11,14 +11,7 @@ defineOptions({
     full
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondaryFullRounded.vue

@@ -12,14 +12,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSecondaryRounded.vue

@@ -11,14 +11,7 @@ defineOptions({
     rounded
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-
-    <template #default v-if="$slots.default">
-        <slot></slot>
-    </template>
-
+    <slot></slot>
 </ButtonSecondary>
 </template>
 <style lang="scss" scoped>

package/src/components/Button/ButtonSlot.vue

@@ -1,12 +1,10 @@
 <script setup>
-import { computed, useSlots } from 'vue'
+import { ref, computed } from 'vue'
 
 defineOptions({
     inheritAttrs: false,
 })
 
-const slots = useSlots()
-
 const props = defineProps({
     xs: {
         type: Boolean,
@@ -32,14 +30,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    light: {
-        type: Boolean,
-        default: false,
-    },
-    iconEnd: {
-        type: Boolean,
-        default: false,
-    },
     submit: {
         type: Boolean,
         default: false,
@@ -48,10 +38,14 @@ const props = defineProps({
 
 defineEmits(['click'])
 
-const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
-
 const type = computed(() => props.submit ? 'submit' : 'button')
 
+const buttonElement = ref(null)
+
+const iconOnly = computed(() => buttonElement.value && !buttonElement.value.textContent)
+
+const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
+
 const buttonSlotClass = computed(() => [
     'rsui-button-slot',
     {
@@ -60,80 +54,45 @@ const buttonSlotClass = computed(() => [
         'rsui-button-slot--sm': props.sm,
         'rsui-button-slot--md': props.md || defaultSize.value,
         'rsui-button-slot--lg': props.lg,
-
-        // button sizes with icon
-        'rsui-button-slot--xs--icon': props.xs && !slots.label && slots.icon,
-        'rsui-button-slot--sm--icon': props.sm && !slots.label && slots.icon,
-        'rsui-button-slot--md--icon': (props.md || defaultSize.value) && !slots.label && slots.icon,
-        'rsui-button-slot--lg--icon': props.lg && !slots.label && slots.icon,
+        'rsui-button-slot--xs-icon': props.xs && iconOnly.value,
+        'rsui-button-slot--sm-icon': props.sm && iconOnly.value,
+        'rsui-button-slot--md-icon': (props.md || defaultSize.value) && iconOnly.value,
+        'rsui-button-slot--lg-icon': props.lg && iconOnly.value,
 
         // button full width
         'rsui-button-slot--full': props.full,
 
         // button fully rounded
         'rsui-button-slot--rounded': props.rounded,
-
-        // button light variant
-        'rsui-button-slot--light': props.light,
-
-        // display icon at the end
-        'rsui-button-slot--icon-end': props.iconEnd && slots.icon,
     },
 ])
-
-const buttonSlotIconClass = computed(() => [
-    'rsui-button-slot__icon',
-    {
-        // modifier for button icon to be displayed at the end
-        'rsui-button-slot__icon--end': props.iconEnd && slots.icon,
-
-        // modifier for button icon to be displayed without label
-        'rsui-button-slot__icon--only': !slots.label && slots.icon,
-    }
-])
 </script>
 <template>
 <button
+    ref="buttonElement"
     :class="buttonSlotClass"
     :type="type"
     v-bind="$attrs"
     @click="$emit('click', $event)"
 >
-    <span v-if="$slots.icon"
-        :class="buttonSlotIconClass"
-    >
-        <slot name="icon"></slot>
-    </span>
-    <span v-if="$slots.label">
-        <slot name="label"></slot>
-    </span>
+    <slot></slot>
 </button>
 </template>
 <style lang="scss" scoped>
 .rsui-button-slot {
-    // default shape and control
-    @apply w-fit h-fit inline-flex items-center justify-center select-none outline-none rounded border font-semibold transition;
+    // default control
+    @apply w-fit h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap;
+    // default shape
+    @apply font-semibold gap-1 rounded-md border transition;
     // default colors
-    @apply bg-black/80 text-white ring-black/20 border-black/80;
-    // default hover state
-    @apply hover:bg-black;
+    @apply bg-black text-white ring-black/20 border-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:bg-black/20 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;
@@ -144,60 +103,42 @@ const buttonSlotIconClass = computed(() => [
     }
     // modifier xs size
     &--xs {
-        @apply text-xs;
-        @apply px-2.5 py-1.5;
-        &--icon {
-            @apply px-1.5 py-1.5;
+        @apply text-xs px-2 py-1;
+        &-icon {
+            @apply p-1;
         }
-        .button-slot__icon {
-            @apply w-4 h-4;
+        :deep(svg) {
+            @apply size-4;
         }
     }
     // modifier sm size
     &--sm {
-        @apply text-sm;
-        @apply px-3 py-2;
-        &--icon {
-            @apply px-2 py-2;
+        @apply text-sm px-3 py-2;
+        &-icon {
+            @apply p-2;
         }
-        .button-slot__icon {
-            @apply w-5 h-5;
+        :deep(svg) {
+            @apply size-5;
         }
     }
     // modifier md size
     &--md {
-        @apply text-base;
-        @apply px-4 py-2;
-        &--icon {
-            @apply px-2.5 py-2.5;
+        @apply text-base px-4 py-2;
+        &-icon {
+            @apply p-2;
         }
-        .button-slot__icon {
-            @apply w-5 h-5;
+        :deep(svg) {
+            @apply size-6;
         }
     }
     // modifier lg size
     &--lg {
-        @apply text-lg;
-        @apply px-4 py-2;
-        &--icon {
-            @apply px-3 py-3;
-        }
-        .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;
+        @apply text-lg px-4 py-3;
+        &-icon {
+            @apply p-3;
         }
-        &--only {
-            @apply mr-0 ml-0;
+        :deep(svg) {
+            @apply size-7;
         }
     }
 }

package/src/components/Button/ButtonTertiary.vue

@@ -15,26 +15,20 @@ const buttonClass = computed(() => [
     :class="buttonClass"
     v-bind="$attrs"
 >
-    <template #icon v-if="$slots.icon">
-        <slot name="icon"></slot>
-    </template>
-    <template #label v-if="$slots.default">
-        <slot></slot>
-    </template>
+    <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-tertiary {
     // default colors
-    @apply bg-white text-default-dark ring-tertiary-dark/20 border-tertiary-dark;
+    @apply bg-tertiary text-tertiary-content ring-tertiary-content/30 border-tertiary-content/40;
     // default hover state
-    @apply hover:bg-white hover:text-tertiary-dark hover:border-tertiary-dark;
+    @apply hover:border-tertiary-content;
     // default focus state
-    @apply focus-visible:border-transparent focus-visible:text-tertiary;
+    @apply focus-visible:border-tertiary-content/30;
     // default active state
-    @apply active:ring-0 active:text-tertiary active:border-tertiary active:bg-white;
+    @apply active:border-tertiary-content active:bg-tertiary-content/10;
     // default disabled state
-    @apply disabled:text-tertiary/40 disabled:border-tertiary/40 disabled:bg-white;
-    @apply disabled:active:ring-0 disabled:focus:ring-0;
+    @apply disabled:text-tertiary-content/10 disabled:border-tertiary-content/10 disabled:bg-tertiary;
 }
 </style>