webcoreui 0.6.1 → 0.8.0

package/components/Banner/Banner.astro

@@ -0,0 +1,56 @@
+---
+import type { BannerProps } from './banner'
+
+import Button from '../Button/Button.astro'
+
+import closeIcon from '../../icons/close.svg?raw'
+
+import styles from './banner.module.scss'
+
+interface Props extends BannerProps {}
+
+const {
+    top,
+    bottom,
+    closeable,
+    padded,
+    sticky = true,
+    className
+} = Astro.props
+
+const classes = [
+    styles.banner,
+    bottom && styles.bottom,
+    closeable && styles.closeable,
+    padded && styles.padded,
+    !sticky && styles.relative,
+    className
+]
+
+const style = top
+    ? `--w-banner-top: ${top}px;`
+    : null
+---
+
+<div class:list={classes} style={style}>
+    <slot />
+    {closeable && (
+        <Button
+            theme="flat"
+            className={styles.close}
+            data-id="w-banner-close"
+        >
+            <Fragment set:html={closeIcon} />
+        </Button>
+    )}
+</div>
+
+<script>
+    import { on } from '../../utils/DOMUtils'
+
+    on('[data-id="w-banner-close"]', 'click', (event: Event) => {
+        const target = event.currentTarget as HTMLDivElement
+
+        target.parentElement?.remove()
+    }, true)
+</script>

package/components/Banner/Banner.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    import type { BannerProps } from './banner'
+
+    import Button from '../Button/Button.svelte'
+
+    import { classNames } from '../../utils/classNames'
+
+    import closeIcon from '../../icons/close.svg?raw'
+
+    import styles from './banner.module.scss'
+
+    export let top: BannerProps['top'] = 0
+    export let bottom: BannerProps['bottom'] = false
+    export let closeable: BannerProps['closeable'] = false
+    export let padded: BannerProps['padded'] = false
+    export let sticky: BannerProps['sticky'] = true
+    export let className: BannerProps['className'] = ''
+
+    let visible = true
+
+    const classes = classNames([
+        styles.banner,
+        bottom && styles.bottom,
+        padded && styles.padded,
+        !sticky && styles.relative,
+        className
+    ])
+
+    const style = top
+        ? `--w-banner-top: ${top}px;`
+        : null
+</script>
+
+{#if visible}
+    <div class={classes} style={style}>
+        <slot />
+        {#if closeable}
+            <Button
+                theme="flat"
+                className={styles.close}
+                onClick={() => visible = false}
+            >
+                {@html closeIcon}
+            </Button>
+        {/if}
+    </div>
+{/if}

package/components/Banner/Banner.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import type { ReactBannerProps } from './banner'
+
+import Button from '../Button/Button.tsx'
+
+import { classNames } from '../../utils/classNames'
+
+import closeIcon from '../../icons/close.svg?raw'
+
+import styles from './banner.module.scss'
+
+const Banner = ({
+    top,
+    bottom,
+    closeable,
+    padded,
+    sticky = true,
+    className,
+    children
+}: ReactBannerProps) => {
+    const [visible, setVisible] = useState(true)
+
+    const classes = classNames([
+        styles.banner,
+        bottom && styles.bottom,
+        padded && styles.padded,
+        !sticky && styles.relative,
+        className
+    ])
+
+    const style = top
+        ? { '--w-banner-top': `${top}px` } as React.CSSProperties
+        : undefined
+
+    if (!visible) {
+        return null
+    }
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+            {closeable && (
+                <Button
+                    theme="flat"
+                    className={styles.close}
+                    dangerouslySetInnerHTML={{ __html: closeIcon }}
+                    onClick={() => setVisible(false)}
+                />
+            )}
+        </div>
+    )
+}
+
+export default Banner

package/components/Banner/banner.module.scss

@@ -0,0 +1,57 @@
+@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/Banner/banner.ts

@@ -0,0 +1,12 @@
+export type BannerProps = {
+    top?: number
+    bottom?: boolean
+    closeable?: boolean
+    padded?: boolean
+    sticky?: boolean
+    className?: string
+}
+
+export type ReactBannerProps = {
+    children: React.ReactNode
+} & BannerProps

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);
+    }
+}

package/components/Footer/footer.module.scss

@@ -1,61 +1,61 @@
-@import '../../scss/config.scss';
-
-.footer {
-    @include border(top, primary-50);
-
-    .column-title {
-        @include spacing(mb-default);
-
-        display: block;
-    }
-
-    .column {
-        @include spacing(0);
-        
-        list-style-type: none;
-        
-        a {
-            @include typography(primary-10, none);
-
-            &:hover,
-            &.active {
-                @include typography(primary, underline);
-            }
-        }
-    }
-}
-
-.container {
-    @include spacing(auto-default, px-default);
-
-    max-width: 1200px;
-}
-
-.wrapper {
-    @include layout(flex, column, default, h-between);
-}
-
-.columns {
-    @include layout(flex, column, default);
-}
-
-.subtext {
-    @include border(top, primary-60);
-    @include spacing(mt-default, py-default);
-    @include layout(flex, column, default, h-between);
-
-    span {
-        @include typography(md, primary-20);
-    }
-}
-
-@include media('sm') {
-    .wrapper,
-    .subtext {
-        @include layout(row, none);
-    }
-
-    .columns {
-        @include layout(row, '5xl');
-    }
-}
+@use '../../scss/config.scss' as *;
+
+.footer {
+    @include border(top, primary-50);
+
+    .column-title {
+        @include spacing(mb-default);
+
+        display: block;
+    }
+
+    .column {
+        @include spacing(0);
+        
+        list-style-type: none;
+        
+        a {
+            @include typography(primary-10, none);
+
+            &:hover,
+            &.active {
+                @include typography(primary, underline);
+            }
+        }
+    }
+}
+
+.container {
+    @include spacing(auto-default, px-default);
+
+    max-width: 1200px;
+}
+
+.wrapper {
+    @include layout(flex, column, default, h-between);
+}
+
+.columns {
+    @include layout(flex, column, default);
+}
+
+.subtext {
+    @include border(top, primary-60);
+    @include spacing(mt-default, py-default);
+    @include layout(flex, column, default, h-between);
+
+    span {
+        @include typography(md, primary-20);
+    }
+}
+
+@include media('sm') {
+    .wrapper,
+    .subtext {
+        @include layout(row, none);
+    }
+
+    .columns {
+        @include layout(row, '5xl');
+    }
+}