@schukai/monster 3.51.4 → 3.52.0

package/source/components/datatable/style/datatable.pcss

@@ -0,0 +1,239 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/button.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+@import "../../style/badge.pcss";
+@import "../../style/link.pcss";
+@import "../../style/space.pcss";
+@import "../../style/mixin/form.pcss";
+
+@import "../../style/mixin/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/theme.pcss";
+
+
+[data-monster-role="control"] {
+    display: flex;
+    outline: none;
+    width: 100%;
+    flex-direction: column;
+}
+
+.table-container {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    padding: 20px;
+    box-sizing: border-box;
+    min-width: fit-content;
+    @mixin paragraph;
+
+    & .bar {
+        display: flex;
+        flex-direction: row-reverse;
+        align-content: center;
+        align-items: center;
+        gap: 2rem;
+    }
+
+}
+
+:host {
+    padding: 0;
+    margin: 0;
+}
+
+::slotted(.monster-button-group) {
+    margin: 0 !important;
+}
+
+::slotted(.monster-button-group) {
+    display: flex;
+    flex-direction: row !important;
+}
+
+[data-monster-role=datatable] {
+    display: grid;
+    @mixin paragraph;
+    background-color: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+    box-sizing: border-box;
+
+    & > div {
+        padding: 0.4rem 0.2rem;
+        @mixin paragraph;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        line-height: 1.2;
+        border-bottom: 1px dashed var(--monster-bg-color-primary-2);
+        box-sizing: border-box;
+
+        &.start {
+            justify-content: flex-start;
+        }
+
+        &.end {
+            justify-content: flex-end;
+        }
+
+        &.center {
+            justify-content: center;
+        }
+
+        /* &.hidden, &[data-monster-mode=hidden] {
+             display: none;
+         }*/
+
+        & input[type=checkbox] {
+            accent-color: var(--monster-bg-color-primary-1);
+        }
+
+    }
+
+    @for $i from 0 to 500 {
+        &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
+
+    ] {
+        color: var(--monster-color-selection-2);
+        background-color: var(--monster-bg-color-selection-2);
+        box-sizing: border-box;
+    }
+    }
+
+
+    & .monster-form {
+        @mixin form;
+    }
+
+}
+
+
+[data-monster-role=footer] {
+    padding: 5px 20px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+
+    & > slot {
+        display: flex;
+        justify-content: flex-start;
+        width: fit-content;
+
+        &.hidden {
+            display: none;
+        }
+    }
+
+}
+
+[data-monster-role=datatable-headers] {
+    display: grid;
+
+    & > div {
+        @mixin paragraph;
+        font-weight: bold;
+        padding: 0.3rem 0.2rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        max-width: 100%;
+
+        & a[data-monster-sortable]:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
+            margin: 0 3px 0 5px
+        }
+
+        & a[data-monster-sortable~=DESC i]:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z'/%3E%3C/svg%3E");
+        }
+
+        & a[data-monster-sortable~=ASC i]:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z'/%3E%3C/svg%3E");
+        }
+
+    }
+
+    & .flex-start {
+        justify-content: flex-start;
+    }
+
+    & .flex-end {
+        justify-content: flex-end;
+    }
+
+    & .flex-center {
+        justify-content: center;
+    }
+
+}
+
+.filter {
+    margin: 0 0 20px 0;
+}
+
+.hidden {
+    display: none;
+}
+
+monster-state[data-monster-role=empty-without-action]::part(action) {
+    display: none;
+}
+
+.empty-state-container {
+    color: var(--monster-color-primary-1);
+    background-color: var(--monster-bg-color-primary-1);
+    padding: var(--monster-space-7) 0;
+}
+
+
+@mixin viewport-7 {
+
+    .table-container {
+
+        & .bar {
+            display: flex;
+            align-items: flex-end;
+            display: flex;
+            flex-direction: column-reverse;
+            gap: 0.1rem;
+        }
+
+        @for $i from 0 to 500 {
+            &:has([data-monster-insert-reference=row-$(i)]:hover) [data-monster-insert-reference=row-$(i)
+
+        ] {
+            backgroud-color: red;
+            box-sizing: border-box;
+        }
+        }
+
+
+    }
+
+
+    ::slotted(.monster-button-group) {
+        display: flex;
+        flex-direction: column !important;
+    }
+
+
+}
+
+
+
+
+
+
+
+
+

package/source/components/datatable/style/embedded-pagination.pcss

@@ -0,0 +1,101 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+
+[data-monster-role=pagination] {
+    @mixin paragraph;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+
+    & ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        list-style: none;
+
+        padding-left: 0;
+        margin: 20px 0;
+
+    }
+
+    & ul li {
+
+        margin: 0;
+        border-left: solid 1px black;
+        padding: 0 10px;
+
+        & a, & a:link, & a:visited, & a:hover, & a:active, & a:focus {
+            width: max-content;
+            color: var(--monster-color-primary-2);
+            background-color: var(--monster-bg-color-primary-2);
+            text-decoration: none;
+            outline: none;
+            padding: 0 0.4rem;
+        }
+
+        & a:hover, & a:active, & a:focus {
+            outline: none;
+        }
+
+        & a:focus {
+            outline: 1px dashed var(--monster-color-selection-4);
+            outline-offset: 2px;
+        }
+
+        @media (prefers-color-scheme: light) {
+
+            & a:focus {
+                outline: 1px dashed var(--monster-color-selection-3);
+                outline-offset: 2px;
+            }
+
+        }
+
+        & a.current {
+            cursor: unset;
+            color: var(--monster-color-primary-3);
+            background-color: var(--monster-bg-color-primary-3);
+        }
+
+        & a.disabled {
+            cursor: not-allowed;
+        }
+    }
+
+    & ul li {
+        &:first-child {
+            border-left: none;
+        }
+    }
+
+    @mixin viewport-7 { 
+
+        & ul li {
+            padding: 0 2px;
+        }
+
+        & ul li:nth-child(1) {
+            display: none;
+        }
+
+        & ul li:nth-child(2) {
+            display: none;
+        }
+
+        & ul li:nth-child(3) {
+            border-left: none;
+        }
+
+
+    }
+
+
+}
+

package/source/components/datatable/style/filter-button.pcss

@@ -0,0 +1,22 @@
+
+:host {
+    display: flex;
+}
+
+
+[data-monster-role="control"] {
+
+    & a {
+        display: flex;
+        align-items: center;
+
+        color: var(--monster-color-primary-1);
+        background: none;
+
+        &:after {
+            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+            margin: 2px 3px 0 5px;
+            padding-top: 4px;
+        }
+    }
+}

package/source/components/datatable/style/filter-controls-defaults.pcss

@@ -0,0 +1,46 @@
+@import "../../style/control.pcss";
+@import "../../style/floating-ui.pcss";
+@import "../../style/mixin/form.pcss";
+
+
+div[data-monster-role=control] {
+    height: 100%;
+    position: relative;
+    display: flex;
+
+    & .form-container {
+        max-width: 600px;
+        margin: 0 auto;
+        
+        /** this value is from the form mixin */
+        & .form-group {
+            margin-bottom: 0.2rem;
+            
+            & input[type=number] {
+                width: 5rem;
+                text-align: right;
+              
+            }
+
+            & input[type=number]::-webkit-outer-spin-button,
+            & input[type=number]::-webkit-inner-spin-button {
+                /* Use vendor prefixes to target the arrow controls */
+                margin-left: 10px; /* Adjust this value to position the arrow control */
+            }
+
+            & input[type=radio] {
+                accent-color: var(--monster-bg-color-primary-3);
+            }
+            
+        }
+        
+        
+        
+        
+    }
+}
+
+
+[data-monster-role="popper"] {
+    position: absolute;
+}

package/source/components/datatable/style/filter-date-range.pcss

@@ -0,0 +1,9 @@
+
+[data-monster-role=input] {
+    width: 100%
+}
+
+.hidden {
+    display: none;
+}
+

package/source/components/datatable/style/filter-range.pcss

@@ -0,0 +1,5 @@
+
+[data-monster-role=input] {
+    width: 100%
+}
+

package/source/components/datatable/style/filter.pcss

@@ -0,0 +1,156 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+
+:host {
+    width: 100%;
+}
+
+
+[data-monster-role=control] {
+
+    & .hidden {
+        display: none;
+    }
+
+    & [data-monster-role=query] {
+        width: 100%;
+        height: 100%;
+    }
+
+    & [data-monster-role=layout] {
+
+        & [data-monster-role="remove-badges"] {
+            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+        }
+
+        align-items: flex-end;
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+        flex-direction: column;
+
+        & [data-monster-role=filter] {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: stretch;
+            width: 100%;
+            column-gap: 1rem;
+            row-gap: 0.5rem;
+            justify-content: space-between;
+
+
+            & ::slotted(label) {
+                display: flex;
+                gap: 0.1rem;
+
+
+                flex-direction: column;
+                border-bottom: var(--monster-border-width) solid var(--monster-border-color);
+                padding: 2px;
+                align-items: stretch;
+
+                min-width: 15em;
+
+            }
+
+        }
+
+        & [name=hidden] {
+            display: none;
+        }
+
+        & [data-monster-role=select-and-search] {
+            place-content: center flex-end;
+            align-items: stretch;
+            display: flex;
+            flex-flow: row-reverse nowrap;
+            row-gap: 1.5rem;
+            column-gap: 0.5rem;
+            margin-top: 1rem;
+
+            & monster-button {
+                display: flex;
+            }
+
+            & .stretched-control {
+
+
+                & ::part(control) {
+                    height: 100%;
+                }
+
+                & ::part(button-button) {
+                    height: 100%;
+                }
+
+                & ::part(button-control) {
+                    height: 100%;
+                }
+
+            }
+
+            & monster-select {
+                min-width: 350px;
+            }
+        }
+
+        @mixin viewport-12 {
+            & [data-monster-role=select-and-search] {
+                flex-flow: column nowrap;
+                row-gap: 0.5rem;
+                column-gap: 0;
+            }
+        }
+
+    }
+
+    @mixin viewport-7 {
+        & [data-monster-role=layout] {
+            flex-flow: column nowrap;
+            row-gap: 0.5rem;
+            column-gap: 0;
+
+            & monster-select {
+                width: 100%;
+            }
+
+        }
+    }
+
+    @mixin viewport-4 {
+        & [data-monster-role=layout] {
+
+            flex-flow: column nowrap;
+            row-gap: 0.5rem;
+            column-gap: 0;
+
+            display: contents;
+
+            & [data-monster-role=filter] {
+                display: contents;
+
+                & ::slotted(label) {
+                    min-width: fit-content;
+                }
+                
+            }
+
+            & [data-monster-role=select-and-search] {
+
+                & monster-select {
+                    width: 100%;
+                    min-width: fit-content;
+                }
+
+            }
+        }
+    }
+}

package/source/components/datatable/style/pagination.pcss

@@ -0,0 +1,59 @@
+@import "../../style/normalize.pcss";
+@import "../../style/display.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/ripple.pcss";
+
+
+[data-monster-role=pagination] {
+    @mixin paragraph;
+    display: flex;
+    justify-content: center;
+    box-sizing: border-box;
+
+    & ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        list-style: none;
+
+        padding-left: 0;
+        margin: 20px 0;
+
+    }
+
+    & ul li {
+        margin: 0 1px;
+    }
+
+    & ul li a {
+        @mixin button;
+        background-color: var(--monster-bg-color-primary-1);
+        color: var(--monster-color-primary-1);
+        border-color: var(--monster-bg-color-primary-4);
+        width: max-content;
+        
+        &.current {
+            background-color: var(--monster-bg-color-primary-4);
+            color: var(--monster-color-primary-4);
+            border-color: var(--monster-bg-color-primary-4);
+            cursor: unset;
+        }
+        
+        &.disabled {
+            background-color: var(--monster-bg-color-primary-disabled-1);
+            color: var(--monster-color-primary-disabled-1);
+            //border-color: var(--monster-bg-color-primary-4);
+            cursor: not-allowed;
+        }
+    }
+    
+    
+
+}
+

package/source/components/datatable/style/select-filter.pcss

@@ -0,0 +1,27 @@
+@import "../../style/normalize.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/button.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/hover.pcss";
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/link.pcss";
+
+
+[data-monster-role=control] {
+    width: 100%;
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+[data-monster-role="selection"] {
+    font-size: 0.85em;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/** fix for the control */
+[data-monster-role="option-control"] {
+    margin-right: 8px;
+}
+