@redseed/redseed-ui-vue3 6.5.2 → 6.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.5.2",
+  "version": "6.5.3",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/ActivityFeeds/ActivityFeed.vue

@@ -18,15 +18,3 @@ const props = defineProps({
     <slot></slot>
 </div>
 </template>
-
-<style lang="scss" scoped>
-.rsui-activity-feed {
-    @apply flex flex-col gap-8;
-
-    &--line {
-        & > *:not(:last-child) {
-            @apply after:absolute after:inset-x-0 after:-bottom-4 after:border-t after:border-border-primary;
-        }
-    }
-}
-</style>

package/src/components/ActivityFeeds/FeedItem.vue

@@ -108,71 +108,3 @@ function handleClick() {
 
 </div>
 </template>
-
-<style lang="scss" scoped>
-.rsui-feed-item {
-    @apply relative flex flex-nowrap gap-3 border border-transparent rounded-lg;
-
-    &--clickable {
-        @apply cursor-pointer;
-    }
-
-    &--padded {
-        @apply p-2;
-    }
-
-    &__avatar {
-        @apply relative shrink-0 size-12 rounded-full flex items-center justify-center;
-        @apply bg-background-disabled border border-border-secondary;
-
-        :deep(> svg) {
-            @apply size-7 text-text-secondary;
-        }
-    }
-
-    &__avatar-indicator {
-        @apply absolute -bottom-0.5 -right-0.5;
-        @apply flex items-center justify-center size-4;
-    }
-
-    &__avatar-indicator-dot {
-        @apply size-4 rounded-full bg-border-primary border-2 border-background-primary;
-
-        &--online {
-            @apply bg-text-success;
-        }
-
-        &--busy {
-            @apply bg-text-error;
-        }
-    }
-
-    &__body {
-        @apply flex-1 flex flex-col gap-3;
-    }
-
-    &__header {
-        @apply flex flex-col;
-    }
-
-    &__heading {
-        @apply flex flex-wrap items-center gap-x-2;
-    }
-
-    &__heading-text {
-        @apply shrink-0 text-sm font-medium text-text-primary;
-    }
-
-    &__heading-subtext {
-        @apply text-xs text-text-secondary;
-    }
-
-    &__supporting-text {
-        @apply text-sm font-medium text-text-secondary;
-    }
-
-    &__dot {
-        @apply relative shrink-0;
-    }
-}
-</style>

package/src/components/Avatar/AvatarText.vue

@@ -5,8 +5,3 @@
     <slot></slot>
 </div>
 </template>
-<style scoped lang='scss'>
-    .rsui-avatar-circle {
-        @apply w-full h-full rounded-full bg-background-secondary flex items-center justify-center text-text-secondary border border-border-primary font-semibold;
-    }
-</style>

package/src/components/Badge/Badge.vue

@@ -59,31 +59,3 @@ defineExpose({
     <slot></slot>
 </div>
 </template>
-<style lang="scss" scoped>
-.rsui-badge {
-    @apply inline-flex items-center justify-center gap-x-1;
-    @apply w-fit h-fit rounded-full;
-    @apply text-sm font-medium leading-4;
-    &--sm {
-        @apply px-2 py-1;
-    }
-    &--md {
-        @apply px-2 py-2;
-    }
-    &--secondary {
-        @apply text-text-secondary bg-background-secondary border border-border-secondary;
-    }
-    &--success {
-        @apply text-text-success bg-background-success border border-border-success;
-    }
-    &--warning {
-        @apply text-text-warning bg-background-warning border border-border-warning;
-    }
-    &--error {
-        @apply text-text-error bg-background-error border border-border-error;
-    }
-    :deep(svg) {
-        @apply size-4;
-    }
-}
-</style>

package/src/components/Badge/BadgeError.vue

@@ -6,5 +6,3 @@ import Badge from './Badge.vue'
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-</style>

package/src/components/Badge/BadgeGroup.vue

@@ -69,22 +69,3 @@ function getChildBadgeStyle() {
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-.badge-group {
-    @apply pl-1 pr-3 gap-x-3;
-    &--badge-end {
-        @apply pl-3 pr-1;
-    }
-    &--no-text {
-        @apply px-1;
-    }
-    &--no-badge {
-        @apply px-2;
-    }
-}
-.badge-group--badge-end {
-    .badge-group__badge {
-        @apply order-last;
-    }
-}
-</style>

package/src/components/Badge/BadgeInfo.vue

@@ -6,5 +6,3 @@ import Badge from './Badge.vue'
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-</style>

package/src/components/Badge/BadgeSecondary.vue

@@ -6,5 +6,3 @@ import Badge from './Badge.vue'
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-</style>

package/src/components/Badge/BadgeSuccess.vue

@@ -6,5 +6,3 @@ import Badge from './Badge.vue'
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-</style>

package/src/components/Badge/BadgeWarning.vue

@@ -6,5 +6,3 @@ import Badge from './Badge.vue'
     <slot></slot>
 </Badge>
 </template>
-<style lang="scss" scoped>
-</style>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -33,17 +33,3 @@ function clickItem(item) {
     </div>
 </div>
 </template>
-<style lang="scss" scoped>
-.rsui-breadcrumbs {
-    @apply flex flex-wrap items-center gap-x-2 gap-y-2;
-    &__item {
-        @apply relative select-none pr-4 last:pr-0 last:after:hidden;
-        @apply text-sm text-text-disabled leading-6;
-        @apply after:absolute after:right-0.5 after:content-['\007C'];
-        @apply after:w-0.5 after:h-full after:text-text-disabled;
-        &--action {
-            @apply cursor-pointer hover:text-text-primary transition-colors duration-200;
-        }
-    }
-}
-</style>

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -21,8 +21,3 @@ const buttonGroupClass = computed(() => [
     <slot></slot>
 </div>
 </template>
-<style lang="scss">
-.rsui-button-group {
-    @apply whitespace-nowrap;
-}
-</style>

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -31,42 +31,3 @@ const buttonClass = computed(() => [
     </span>
 </button>
 </template>
-<style lang="scss" scoped>
-.rsui-button-group-item {
-    // default control
-    @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition;
-    // default shape
-    @apply first:rounded-l-md last:rounded-r-md first:border-l border-r border-y ring-0;
-    // default colors
-    @apply text-button-secondary bg-background-primary border-button-secondary;
-    // default hover state
-    @apply hover:text-button-secondary-hover hover:bg-background-primary hover:border-button-secondary-hover;
-    // default focus state
-    @apply focus-visible:ring-button-secondary focus-visible:border-button-secondary;
-    // default active state
-    @apply active:bg-background-primary active:border-button-secondary-active;
-    // default disabled state
-    @apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
-    @apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
-    
-
-    &--selected {
-        @apply bg-background-primary active:bg-background-primary cursor-default;
-    }
-    &__label {
-        @apply gap-x-2 px-1 inline-flex items-center;
-    }
-    // child svg icon
-    :deep(svg) {
-        @apply size-5;
-    }
-}
-.rsui-button-group--sm {
-    .rsui-button-group-item {
-        @apply text-xs;
-        :deep(svg) {
-            @apply size-4;
-        }
-    }
-}
-</style>

package/src/components/Card/ButtonCard.vue

@@ -46,44 +46,3 @@ const props = defineProps({
     </div>
 </Card>
 </template>
-<style lang="scss" scoped>
-.rsui-button-card {
-    @apply hover:shadow-none hover:border-text-primary;
-    &--disabled {
-        @apply hover:border-border-primary;
-        @apply focus-visible:ring-0;
-    }
-    &__content {
-        @apply flex items-center p-2 gap-4;
-    }
-    &__icon {
-        @apply size-12 flex shrink-0 items-center justify-center rounded-lg transition duration-200;
-        @apply border border-text-secondary text-text-secondary;
-        :deep(svg) {
-            @apply size-5;
-            path {
-                @apply stroke-current;
-            }
-        }
-    }
-    &__content-text {
-        @apply flex flex-col;
-    }
-    &__title {
-        @apply text-text-primary font-semibold line-clamp-1;
-        @apply group-hover/button-card:text-text-primary;
-        &--disabled {
-            @apply text-text-disabled;
-            @apply group-hover/button-card:text-text-disabled;
-        }
-    }
-    &__supporting-text {
-        @apply text-sm text-text-secondary line-clamp-1;
-        @apply group-hover/button-card:text-text-primary;
-        &--disabled {
-            @apply text-text-disabled;
-            @apply group-hover/button-card:text-text-disabled;
-        }
-    }
-}
-</style>

package/src/components/Card/Card.vue

@@ -72,93 +72,3 @@ function onClick() {
         </div>
     </div>
 </template>
-<style lang="scss" scoped>
-.rsui-card {
-    @apply relative flex flex-col;
-    @apply transition duration-200;
-    @apply rounded-xl bg-background-primary border border-border-primary;
-
-    &--hoverable {
-        @apply hover:shadow-md;
-    }
-
-    &--clickable {
-        @apply cursor-pointer;
-
-        .rsui-card__image {
-            @apply pointer-events-none;
-        }
-
-        .rsui-card__content {
-            @apply pointer-events-none;
-        }
-    }
-
-    &__action-layer {
-        @apply absolute inset-0 size-full bg-transparent rounded-xl transition;
-    }
-
-    &__image {
-        @apply rounded-t-xl overflow-hidden;
-    }
-
-    &__content {
-        @apply flex-1 flex flex-col relative gap-y-3;
-
-        &--padded {
-            @apply py-5 px-4 sm:px-6 min-h-16;
-        }
-    }
-
-    &__meta {
-        @apply max-w-full overflow-x-auto grid grid-cols-1 gap-x-6 gap-y-2 ;
-    }
-
-    &--2xs {
-        .rsui-card__meta {
-            @apply grid-cols-2;
-            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
-            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
-        }
-    }
-
-    &--xs {
-        .rsui-card__meta {
-            @apply grid-cols-2;
-            // @apply max-w-full overflow-x-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-2 lg:flex lg:space-x-8;
-        }
-    }
-
-    &--sm {
-        .rsui-card__meta {
-            @apply grid-cols-2;
-        }
-    }
-
-
-    &--md {
-        .rsui-card__meta {
-            @apply grid-cols-3;
-        }
-    }
-
-    &--lg {
-        .rsui-card__meta {
-            @apply flex space-x-8;
-        }
-    }
-
-    &--xl {
-
-    }
-
-    &--2xl {
-
-    }
-
-    &--3xl {
-
-    }
-
-}
-</style>

package/src/components/Card/CardHeader.vue

@@ -138,69 +138,3 @@ function handleMoreActionsClick() {
     </div>
 </div>
 </template>
-<style lang="scss" scoped>
-.rsui-card-header {
-    @apply flex flex-col gap-x-3 gap-y-5 transition-all;
-    @apply md:flex-row md:justify-between md:items-center;
-    @apply py-4 px-4 sm:px-6;
-    @apply border-b border-transparent;
-
-    &--divider {
-        @apply border-border-primary;
-    }
-
-    &__header {
-        @apply flex-1 flex justify-between items-start gap-x-3;
-
-        &--single-line {
-            @apply md:items-center;
-        }
-    }
-
-    &__avatar {
-        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-background-secondary;
-        @apply mt-2.5 md:mt-0;
-    }
-
-    &__text {
-        @apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
-    }
-
-    &__title-container {
-        @apply flex flex-wrap items-center gap-y-1 gap-x-2;
-
-    }
-
-    &__title {
-        @apply text-lg leading-7 font-semibold text-text-primary;
-
-        &--single-line {
-            @apply line-clamp-2 md:line-clamp-1;
-        }
-    }
-
-    &__subtitle {
-        @apply text-sm leading-5 text-text-secondary;
-
-        &--single-line {
-            @apply line-clamp-3 md:line-clamp-1;
-        }
-    }
-
-    &__toolbar {
-        @apply flex gap-3 md:items-center justify-end;
-    }
-
-    &__actions-desktop {
-        @apply flex gap-3 items-center;
-    }
-
-    &__actions-mobile {
-        @apply flex flex-wrap gap-3 items-center;
-    }
-
-    &__more-actions-icon {
-        @apply size-5 text-text-secondary;
-    }
-}
-</style>

package/src/components/Card/CardResource.vue

@@ -13,7 +13,3 @@ import Card from '../Card/Card.vue'
     <slot></slot>
 </Card>
 </template>
-<style lang="scss" scoped>
-.rsui-card-resource {
-}
-</style>

package/src/components/Card/MetricCard.vue

@@ -33,33 +33,3 @@ function handleIconClick() {
     </div>
 </Card>
 </template>
-
-<style lang="scss" scoped>
-.rsui-metric-card {
-    @apply w-64 sm:w-96;
-
-    &__header {
-        @apply flex items-center justify-between;
-    }
-
-    &__avatar {
-        @apply size-14 rounded-full overflow-hidden flex items-center justify-center pointer-events-auto;
-    }
-
-    &__icon {
-        @apply text-text-primary transition-transform pointer-events-auto cursor-pointer size-6;
-    }
-
-    &__content {
-        @apply flex flex-col gap-2;
-    }
-
-    &__title {
-        @apply text-sm font-normal text-text-secondary mt-4;
-    }
-
-    &__value {
-        @apply text-3xl font-semibold text-text-primary leading-9;
-    }
-}
-</style>

package/src/components/Card/RadioCard.vue

@@ -104,71 +104,3 @@ function handleClick(event) {
     </div>
 </div>
 </template>
-<style lang="scss" scoped>
-.rsui-radio-card {
-    @apply max-w-80 w-80 bg-background-primary border border-border-secondary rounded-md shadow-sm outline-none select-none;
-    @apply relative cursor-pointer transition-all;
-    @apply flex flex-col gap-3 p-4;
-    @apply focus-visible:ring-4 focus-visible:ring-border-primary;
-
-    &--flexible {
-        @apply max-w-full w-full;
-    }
-
-    &--selected {
-        @apply focus-visible:ring-0 border-primary-background;
-        @apply after:absolute after:content-[''] after:inset-0 after:bg-primary-background;
-        @apply after:rounded-md after:opacity-10;
-    }
-
-    &--disabled {
-        @apply focus-visible:ring-0 border-border-secondary cursor-default;
-        @apply after:absolute after:content-[''] after:inset-0 after:bg-border-secondary;
-        @apply after:rounded-md after:opacity-65;
-    }
-
-    &__title-row {
-        @apply relative text-base font-medium text-text-primary line-clamp-2 min-h-6 pr-8;
-
-        // Radio button position
-        @apply after:absolute after:top-0 after:right-0;
-        // Radio button shape
-        @apply after:content-[''] after:size-6 after:rounded-full;
-        // Radio button animation
-        @apply after:transition-all;
-        // Radio button decoration
-        @apply after:border after:border-border-primary after:bg-background-primary;
-        // Radio button event
-        @apply group-hover/radio-card:after:border-text-secondary;
-        @apply group-focus-visible/radio-card:after:border-text-secondary;
-
-        &--selected {
-            @apply after:border-6 after:border-primary-background;
-            @apply group-hover/radio-card:after:border-primary-background;
-            @apply group-focus-visible/radio-card:after:border-primary-background;
-        }
-
-        &--disabled {
-            @apply after:opacity-0;
-        }
-
-        &--selected-disabled {
-            @apply after:border-6 after:border-background-primary after:bg-border-primary;
-            @apply group-hover/radio-card:after:border-background-primary;
-            @apply group-focus-visible/radio-card:after:border-background-primary;
-        }
-    }
-
-    &__content-row {
-        @apply text-sm font-normal text-text-secondary;
-    }
-
-    &__meta-row {
-        @apply grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-2;
-    }
-
-    &__action-row {
-        @apply flex flex-wrap gap-2;
-    }
-}
-</style>

package/src/components/CardGroup/CardGroup.vue

@@ -135,68 +135,3 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
     </div>
 </div>
 </template>
-<style scoped lang="scss">
-.rsui-card-group {
-    &__cards {
-        @apply grid;
-        @apply gap-4 grid-cols-1;
-    }
-
-    &--sm {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-2;
-        }
-    }
-
-    &--md,
-    &--lg,
-    &--xl {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-3;
-        }
-    }
-
-    &--2xl,
-    &--3xl {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-5;
-        }
-    }
-
-    &--compact {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-1;
-        }
-    }
-
-    &--compact.rsui-card-group--xs {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-2;
-        }
-    }
-
-    &--compact.rsui-card-group--sm {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-3;
-        }
-    }
-
-    &--compact.rsui-card-group--md,
-    &--compact.rsui-card-group--lg,
-    &--compact.rsui-card-group--xl {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-4;
-        }
-    }
-
-    &--compact.rsui-card-group--2xl,
-    &--compact.rsui-card-group--3xl {
-        .rsui-card-group__cards {
-            @apply gap-4 grid-cols-6;
-        }
-    }
-    &__pagination {
-        @apply w-full flex items-center justify-center mb-4;
-    }
-}
-</style>

package/src/components/Disclosure/Disclosure.vue

@@ -131,23 +131,3 @@ onMounted(() => {
         </div>
     </Teleport>
 </template>
-
-<style lang="scss" scoped>
-.rsui-disclosure {
-    &__trigger-icon {
-        @apply transition-all;
-
-        &--open {
-            @apply -rotate-180;
-        }
-    }
-
-    &__content {
-        @apply transition-all min-h-0 h-0 overflow-hidden opacity-0;
-
-        &--open {
-            @apply overflow-visible opacity-100 h-auto;
-        }
-    }
-}
-</style>