webcoreui 0.7.0 → 0.8.0

package/README.md

@@ -52,18 +52,18 @@ Webcore can be used as a standalone project, or it can be integrated into your e
 
 Webcore components use Sass for styling. To use the component library, you must have the following packages installed:
 
-- [Sass](https://www.npmjs.com/package/sass) - `v1.77` and above
-- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4` and above
+- [Sass](https://www.npmjs.com/package/sass) - `v1.80`
+- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.4`
 
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v4.16` and above
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.16`
 - **For Svelte projects**
-    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
+    - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2`
 - **For React projects**
-    - [React](https://www.npmjs.com/package/react) - `v18.3` and above
-    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3` and above
+    - [React](https://www.npmjs.com/package/react) - `v18.3`
+    - [React DOM](https://www.npmjs.com/package/react-dom) -`v18.3`
 
 ### Installation
 
@@ -82,7 +82,7 @@ yarn add webcoreui
 Create an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:
 
 ```scss
-@import 'webcoreui/styles';
+@use 'webcoreui/styles' as *;
 @include setup((
     // Define paths for your fonts
     fontRegular: '/fonts/Inter-Regular.woff2',
@@ -138,10 +138,18 @@ html body {
     --w-rating-empty-background: var(--w-color-primary-70);
     --w-rating-size: 18px;
 
+    // Ribbon component
+    --w-ribbon-offset: 20px;
+    --w-ribbon-folded-offset: 10px;
+
     // Scrollbars
     --w-scrollbar-bg: var(--w-color-primary-60);
     --w-scrollbar-fg: var(--w-color-primary-50);
 
+    // Skeleton component
+    --w-skeleton-color: var(--w-color-primary-60);
+    --w-skeleton-wave-color: var(--w-color-primary-50);
+
     // Slider component
     --w-slider-background: var(--w-color-primary-50);
     --w-slider-color: var(--w-color-primary);
@@ -236,9 +244,11 @@ import { Accordion } from 'webcoreui/react'
 - [Progress](https://github.com/Frontendland/webcoreui/tree/main/src/components/Progress)
 - [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio)
 - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating)
+- [Ribbon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Ribbon)
 - [Select](https://github.com/Frontendland/webcoreui/tree/main/src/components/Select)
 - [Sheet](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sheet)
 - [Sidebar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Sidebar)
+- [Skeleton](https://github.com/Frontendland/webcoreui/tree/main/src/components/Skeleton)
 - [Slider](https://github.com/Frontendland/webcoreui/tree/main/src/components/Slider)
 - [Spinner](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spinner)
 - [Spoiler](https://github.com/Frontendland/webcoreui/tree/main/src/components/Spoiler)

package/astro.d.ts

@@ -26,9 +26,11 @@ import type { PopoverProps as WPopoverProps } from './components/Popover/popover
 import type { ProgressProps as WProgressProps } from './components/Progress/progress'
 import type { RadioProps as WRadioProps } from './components/Radio/radio'
 import type { RatingProps as WRatingProps } from './components/Rating/rating'
+import type { RibbonProps as WRibbonProps } from './components/Ribbon/ribbon'
 import type { SelectProps as WSelectProps } from './components/Select/select'
 import type { SheetProps as WSheetProps } from './components/Sheet/sheet'
 import type { SidebarProps as WSidebarProps } from './components/Sidebar/sidebar'
+import type { SkeletonProps as WSkeletonProps } from './components/Skeleton/skeleton'
 import type { SliderProps as WSliderProps } from './components/Slider/slider'
 import type { SpinnerProps as WSpinnerProps } from './components/Spinner/spinner'
 import type { SpoilerProps as WSpoilerProps } from './components/Spoiler/spoiler'
@@ -71,9 +73,11 @@ declare module 'webcoreui/astro' {
 	export function Progress(_props: WProgressProps): any
 	export function Radio(_props: WRadioProps): any
 	export function Rating(_props: WRatingProps): any
+	export function Ribbon(_props: WRibbonProps): any
 	export function Select(_props: WSelectProps): any
 	export function Sheet(_props: WSheetProps): any
 	export function Sidebar(_props: WSidebarProps): any
+	export function Skeleton(_props: WSkeletonProps): any
 	export function Slider(_props: WSliderProps): any
 	export function Spinner(_props: WSpinnerProps): any
 	export function Spoiler(_props: WSpoilerProps): any
@@ -115,9 +119,11 @@ declare module 'webcoreui/astro' {
 	export type ProgressProps = WProgressProps
 	export type RadioProps = WRadioProps
 	export type RatingProps = WRatingProps
+	export type RibbonProps = WRibbonProps
 	export type SelectProps = WSelectProps
 	export type SheetProps = WSheetProps
 	export type SidebarProps = WSidebarProps
+	export type SkeletonProps = WSkeletonProps
 	export type SliderProps = WSliderProps
 	export type SpinnerProps = WSpinnerProps
 	export type SpoilerProps = WSpoilerProps

package/astro.js

@@ -26,9 +26,11 @@ import PopoverComponent from './components/Popover/Popover.astro'
 import ProgressComponent from './components/Progress/Progress.astro'
 import RadioComponent from './components/Radio/Radio.astro'
 import RatingComponent from './components/Rating/Rating.astro'
+import RibbonComponent from './components/Ribbon/Ribbon.astro'
 import SelectComponent from './components/Select/Select.astro'
 import SheetComponent from './components/Sheet/Sheet.astro'
 import SidebarComponent from './components/Sidebar/Sidebar.astro'
+import SkeletonComponent from './components/Skeleton/Skeleton.astro'
 import SliderComponent from './components/Slider/Slider.astro'
 import SpinnerComponent from './components/Spinner/Spinner.astro'
 import SpoilerComponent from './components/Spoiler/Spoiler.astro'
@@ -70,9 +72,11 @@ export const Popover = PopoverComponent
 export const Progress = ProgressComponent
 export const Radio = RadioComponent
 export const Rating = RatingComponent
+export const Ribbon = RibbonComponent
 export const Select = SelectComponent
 export const Sheet = SheetComponent
 export const Sidebar = SidebarComponent
+export const Skeleton = SkeletonComponent
 export const Slider = SliderComponent
 export const Spinner = SpinnerComponent
 export const Spoiler = SpoilerComponent

package/components/AspectRatio/aspect-ratio.module.scss

@@ -1,10 +1,10 @@
-@import '../../scss/config.scss';
-
-div.ratio[style] {
-    @include layout(flex);
-    @include size('w100%');
-
-    * {
-        @include size(100%);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+div.ratio[style] {
+    @include layout(flex);
+    @include size('w100%');
+
+    * {
+        @include size(100%);
+    }
+}

package/components/Banner/banner.module.scss

@@ -1,57 +1,57 @@
-@import '../../scss/config.scss';
-
-body {
-    --w-banner-top: 0;
-}
-
-.banner {
-    @include background(primary-60);
-    @include spacing(p-default);
-    @include position(sticky);
-    @include layer(top);
-    @include typography(center);
-
-    top: var(--w-banner-top);
-
-    &.padded {
-        @include border-radius();
-        @include position(l20px);
-
-        width: calc(100% - 40px);
-        top: calc(var(--w-banner-top) + 20px);
-
-        &.bottom {
-            @include position(l20px, b20px);
-        }
-    }
-
-    &.relative {
-        @include position(relative);
-        top: auto;
-    }
-
-    &.bottom {
-        @include position(fixed, b0, l0, r0);
-
-        top: auto;
-    }
-
-    &.closeable {
-        @include spacing(pl-default, pt-default, pb-default, pr-3xl);
-    }
-
-    .close {
-        @include position(absolute, v-center, r10px);
-        @include spacing(p-xs);
-
-        svg {
-            @include size(10px);
-        }
-    }
-}
-
-@include media(xs) {
-    .banner.closeable {
-        @include spacing(p-default);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-banner-top: 0;
+}
+
+.banner {
+    @include background(primary-60);
+    @include spacing(p-default);
+    @include position(sticky);
+    @include layer(top);
+    @include typography(center);
+
+    top: var(--w-banner-top);
+
+    &.padded {
+        @include border-radius();
+        @include position(l20px);
+
+        width: calc(100% - 40px);
+        top: calc(var(--w-banner-top) + 20px);
+
+        &.bottom {
+            @include position(l20px, b20px);
+        }
+    }
+
+    &.relative {
+        @include position(relative);
+        top: auto;
+    }
+
+    &.bottom {
+        @include position(fixed, b0, l0, r0);
+
+        top: auto;
+    }
+
+    &.closeable {
+        @include spacing(pl-default, pt-default, pb-default, pr-3xl);
+    }
+
+    .close {
+        @include position(absolute, v-center, r10px);
+        @include spacing(p-xs);
+
+        svg {
+            @include size(10px);
+        }
+    }
+}
+
+@include media(xs) {
+    .banner.closeable {
+        @include spacing(p-default);
+    }
+}

package/components/Breadcrumb/breadcrumb.module.scss

@@ -1,26 +1,26 @@
-@import '../../scss/config.scss';
-
-.breadcrumb {
-    @include layout(flex, v-center, sm, wrap);
-    @include spacing(0);
-
-    list-style-type: none;
-
-    li {
-        @include layout(flex, v-center, xs);
-        @include spacing(m0);
-
-        a {
-            @include layout(flex, v-center, xs);
-            @include typography(none, primary-20);
-
-            &:hover {
-                @include typography(primary);
-            }
-        }
-    }
-
-    svg {
-        @include size(14px);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.breadcrumb {
+    @include layout(flex, v-center, sm, wrap);
+    @include spacing(0);
+
+    list-style-type: none;
+
+    li {
+        @include layout(flex, v-center, xs);
+        @include spacing(m0);
+
+        a {
+            @include layout(flex, v-center, xs);
+            @include typography(none, primary-20);
+
+            &:hover {
+                @include typography(primary);
+            }
+        }
+    }
+
+    svg {
+        @include size(14px);
+    }
+}

package/components/Button/button.module.scss

@@ -89,4 +89,8 @@
             @include background(alert-accent);
         }
     }
+
+    svg {
+        pointer-events: none;
+    }
 }

package/components/Carousel/carousel.module.scss

@@ -1,4 +1,4 @@
-@import '../../scss/config.scss';
+@use '../../scss/config.scss' as *;
 
 body {
     --w-slide-width: 100%;

package/components/Collapsible/collapsible.module.scss

@@ -1,29 +1,29 @@
-@import '../../scss/config.scss';
-
-body {
-    --w-collapsible-initial-height: 0;
-    --w-collapsible-max-height: 100%;
-}
-
-.collapsible {
-    @include layout(flex, column, xs);
-
-    &:not([data-toggled="true"]) [data-toggle-off],
-    &[data-toggled="true"] [data-toggle-on] {
-        @include visibility(none);
-    }
-
-    &[data-toggled="true"] .wrapper {
-        max-height: var(--w-collapsible-max-height);
-    }
-
-    &.animated .wrapper {
-        @include transition(max-height, .5s);
-    }
-
-    .wrapper {
-        @include visibility(hidden);
-
-        max-height: var(--w-collapsible-initial-height);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+body {
+    --w-collapsible-initial-height: 0;
+    --w-collapsible-max-height: 100%;
+}
+
+.collapsible {
+    @include layout(flex, column, xs);
+
+    &:not([data-toggled="true"]) [data-toggle-off],
+    &[data-toggled="true"] [data-toggle-on] {
+        @include visibility(none);
+    }
+
+    &[data-toggled="true"] .wrapper {
+        max-height: var(--w-collapsible-max-height);
+    }
+
+    &.animated .wrapper {
+        @include transition(max-height, .5s);
+    }
+
+    .wrapper {
+        @include visibility(hidden);
+
+        max-height: var(--w-collapsible-initial-height);
+    }
+}

package/components/ConditionalWrapper/conditionalwrapper.ts

@@ -1,5 +1,6 @@
 export type ConditionalWrapperProps = {
     condition: boolean
+    [key: string]: any
 }
 
 export type ReactConditionalWrapperProps = {

package/components/DataTable/datatable.module.scss

@@ -1,102 +1,102 @@
-@import '../../scss/config.scss';
-
-.filters {
-    @include layout(flex, xs);
-    @include spacing(mb-sm);
-}
-
-.table {
-    @include visibility(auto);
-
-    table {
-        @include size('w100%');
-        @include typography(left);
-
-        border-collapse: collapse;
-    }
-
-    thead,
-    thead button {
-        @include typography(bold);
-    }
-
-    thead button {
-        @include spacing(p-xxs);
-
-        svg {
-            @include size(15px);
-            pointer-events: none;
-        }
-    }
-
-    th,
-    td {
-        @include spacing(py-xs, px-sm);
-
-        &.no-results {
-            @include typography(center);
-        }
-    }
-
-    thead,
-    tr {
-        @include border(bottom, primary-50);
-
-        &:last-child {
-            @include border(bottom, 0);
-        }
-    }
-
-    [data-hidden] {
-        @include visibility(none);
-    }
-
-    &.hover tr:hover,
-    &.striped-rows tbody tr:nth-child(odd),
-    &.striped-rows.offset tbody tr:nth-child(even),
-    &.striped-columns td:nth-child(odd),
-    &.striped-columns.offset td:nth-child(even),
-    &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
-        @include background(primary-60);
-    }
-
-    &.striped-rows tr,
-    &.striped-columns tr,
-    &.striped-columns thead {
-        @include border(bottom, 0);
-    }
-
-    &.striped-rows.offset tbody tr:nth-child(odd),
-    &.striped-columns.offset td:nth-child(odd) {
-        @include background(transparent);
-    }
-
-    &.compact {
-        th, td {
-            @include spacing(py-xxs, px-sm);
-        }
-    }
-
-    &.scroll {
-        @include spacing(pr-sm);
-
-        thead {
-            @include position(sticky, t0);
-            @include background(primary-70);
-            box-shadow: 0 .5px 0 var(--w-color-primary-50);
-        }
-    }
-}
-
-.footer {
-    @include layout(flex, h-end, v-center, xs);
-    @include spacing(mt-sm);
-
-    &.between {
-        @include layout(h-between);
-    }
-
-    .subtext {
-        @include typography(md, primary-20);
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.filters {
+    @include layout(flex, xs);
+    @include spacing(mb-sm);
+}
+
+.table {
+    @include visibility(auto);
+
+    table {
+        @include size('w100%');
+        @include typography(left);
+
+        border-collapse: collapse;
+    }
+
+    thead,
+    thead button {
+        @include typography(bold);
+    }
+
+    thead button {
+        @include spacing(p-xxs);
+
+        svg {
+            @include size(15px);
+            pointer-events: none;
+        }
+    }
+
+    th,
+    td {
+        @include spacing(py-xs, px-sm);
+
+        &.no-results {
+            @include typography(center);
+        }
+    }
+
+    thead,
+    tr {
+        @include border(bottom, primary-50);
+
+        &:last-child {
+            @include border(bottom, 0);
+        }
+    }
+
+    [data-hidden] {
+        @include visibility(none);
+    }
+
+    &.hover tr:hover,
+    &.striped-rows tbody tr:nth-child(odd),
+    &.striped-rows.offset tbody tr:nth-child(even),
+    &.striped-columns td:nth-child(odd),
+    &.striped-columns.offset td:nth-child(even),
+    &.hover.striped-rows.offset tbody tr:nth-child(odd):hover {
+        @include background(primary-60);
+    }
+
+    &.striped-rows tr,
+    &.striped-columns tr,
+    &.striped-columns thead {
+        @include border(bottom, 0);
+    }
+
+    &.striped-rows.offset tbody tr:nth-child(odd),
+    &.striped-columns.offset td:nth-child(odd) {
+        @include background(transparent);
+    }
+
+    &.compact {
+        th, td {
+            @include spacing(py-xxs, px-sm);
+        }
+    }
+
+    &.scroll {
+        @include spacing(pr-sm);
+
+        thead {
+            @include position(sticky, t0);
+            @include background(primary-70);
+            box-shadow: 0 .5px 0 var(--w-color-primary-50);
+        }
+    }
+}
+
+.footer {
+    @include layout(flex, h-end, v-center, xs);
+    @include spacing(mt-sm);
+
+    &.between {
+        @include layout(h-between);
+    }
+
+    .subtext {
+        @include typography(md, primary-20);
+    }
+}