wini-web-components 2.8.4 → 2.8.6

package/src/component/checkbox/checkbox.module.css

@@ -1,48 +0,0 @@
-.checkbox-container {
-    position: relative;
-    border-radius: 0.4rem;
-    border: var(--neutral-bolder-border);
-    background-color: transparent;
-    transition: border, background-color 0.4s;
-    cursor: pointer;
-}
-
-.checkbox-container>input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-}
-
-.checkbox-container>svg {
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    opacity: 0 !important;
-    transition: visibility, opacity 0.4s;
-}
-
-.checkbox-container>svg>path {
-    fill: var(--check-color, #fff);
-}
-
-.checkbox-container>input:checked~svg,
-.checkbox-container[is-null-value="true"]>svg {
-    visibility: visible;
-    opacity: 1 !important;
-}
-
-.checkbox-container:has(> input:checked),
-.checkbox-container[is-null-value="true"] {
-    background-color: var(--primary-main-color);
-    border: none !important;
-}
-
-.checkbox-container:has(> input:disabled) {
-    background-color: var(--neutral-disable-background-color) !important;
-}
-
-.checkbox-container:has(> input:disabled)>svg>path {
-    fill: var(--neutral-text-disabled-color) !important;
-}

package/src/component/checkbox/checkbox.tsx

@@ -1,80 +0,0 @@
-import React, { createRef, CSSProperties } from 'react';
-import styles from './checkbox.module.css';
-
-interface CheckboxProps {
-    id?: string,
-    onChange?: (value: boolean, target: HTMLInputElement) => void,
-    value?: boolean,
-    checkColor?: string,
-    disabled?: boolean,
-    className?: string,
-    style?: CSSProperties,
-    /** default 2.4rem **/
-    size?: number | string,
-    onClick?: React.MouseEventHandler<HTMLLabelElement>
-}
-
-interface CheckboxState {
-    value?: boolean,
-}
-
-export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
-    private ref = createRef<HTMLLabelElement>()
-    constructor(props: CheckboxProps) {
-        super(props);
-        this.state = {
-            value: this.props.value ?? false
-        }
-    }
-
-    componentDidUpdate(prevProps: Readonly<CheckboxProps>): void {
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: this.props.value })
-        }
-    }
-
-    onChange = () => {
-        const newValue = !this.state.value
-        this.setState({ value: newValue })
-        if (this.props.onChange && this.ref.current) this.props.onChange(newValue, this.ref.current.querySelector("input")!)
-    }
-
-    render() {
-        let convertStyle: CSSProperties = {
-            width: this.props.size ?? '2.4rem',
-            height: this.props.size ?? '2.4rem',
-        }
-        if (this.props.style) {
-            delete this.props.style.width
-            delete this.props.style.minWidth
-            delete this.props.style.maxWidth
-            delete this.props.style.height
-            delete this.props.style.minHeight
-            delete this.props.style.maxHeight
-            convertStyle = {
-                ...this.props.style,
-                ...convertStyle
-            }
-        }
-        return <label ref={this.ref} id={this.props.id} className={`${styles['checkbox-container']} row ${this.props.className ?? ''}`} style={convertStyle} is-null-value={`${this.state.value == undefined}`} onClick={this.props.onClick}>
-            <input type="checkbox" checked={this.state.value ? true : false} disabled={this.props.disabled}
-                onChange={(ev) => {
-                    ev.stopPropagation()
-                    const newValue = !this.state.value
-                    this.setState({ value: newValue })
-                    if (this.props.onChange) this.props.onChange(newValue, ev.target)
-                }}
-            />
-            <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ '--check-color': this.props.checkColor } as any}>
-                {
-                    this.state.value === undefined ?
-                        <path fillRule="evenodd" clipRule="evenodd" d="M4.79199 9.95298C4.79199 9.69148 5.00398 9.47949 5.26548 9.47949H14.7352C14.9967 9.47949 15.2087 9.69148 15.2087 9.95298C15.2087 10.2145 14.9967 10.4265 14.7352 10.4265H5.26548C5.00398 10.4265 4.79199 10.2145 4.79199 9.95298Z" /> :
-                        <path fillRule="evenodd" clipRule="evenodd" d="M15.07 6.49317C15.2549 6.67808 15.2549 6.97787 15.07 7.16278L8.91467 13.3181C8.72977 13.503 8.42997 13.503 8.24507 13.3181L4.93067 10.0037C4.74577 9.81878 4.74577 9.51899 4.93067 9.33408C5.11558 9.14917 5.41537 9.14917 5.60028 9.33408L8.57987 12.3137L14.4004 6.49317C14.5853 6.30827 14.8851 6.30827 15.07 6.49317Z" />
-                }
-            </svg>
-        </label>
-    }
-}
-
-
-

package/src/component/ck-editor/ck-editor.css

@@ -1,206 +0,0 @@
-.editor-container {
-    position: relative;
-    --ck-color-text: var(--neutral-text-title-color);
-    width: 100%;
-    height: 400px;
-    max-height: 600px;
-    border-radius: 0.8rem;
-    border: var(--neutral-bolder-border);
-    overflow: hidden visible;
-}
-
-.editor-container:has(.ck-read-only) {
-    background-color: var(--neutral-disable-background-color) !important;
-    pointer-events: none !important;
-}
-
-.editor-container:focus-within {
-    border-color: var(--primary-main-color);
-}
-
-.editor-container.helper-text {
-    overflow: visible !important;
-    border-color: var(--helper-text-color) !important;
-}
-
-.editor-container.helper-text::after {
-    content: attr(helper-text);
-    color: var(--helper-text-color);
-    position: absolute;
-    left: 0;
-    bottom: -0.4rem;
-    width: max-content;
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    font-family: inherit;
-    transform: translateY(100%);
-}
-
-.ck-content {
-    font-family: 'Inter';
-    line-height: 1.6;
-    word-break: break-word;
-}
-
-.ck-content h3.category {
-    font-family: 'Inter';
-    font-size: 20px;
-    font-weight: bold;
-    color: #555;
-    letter-spacing: 10px;
-    margin: 0;
-    padding: 0;
-}
-
-.ck-content h2.document-title {
-    font-family: 'Inter';
-    font-size: 50px;
-    font-weight: bold;
-    margin: 0;
-    padding: 0;
-    border: 0;
-}
-
-.ck-content h3.document-subtitle {
-    font-family: 'Inter';
-    font-size: 20px;
-    color: #555;
-    margin: 0 0 1em;
-    font-weight: bold;
-    padding: 0;
-}
-
-.ck-content blockquote.side-quote {
-    font-family: 'Inter';
-    font-style: normal;
-    float: right;
-    width: 35%;
-    position: relative;
-    border: 0;
-    overflow: visible;
-    z-index: 1;
-    margin-left: 1em;
-}
-
-.ck-content blockquote.side-quote::before {
-    content: '“';
-    position: absolute;
-    top: -37px;
-    left: -10px;
-    display: block;
-    font-size: 200px;
-    color: #e7e7e7;
-    z-index: -1;
-    line-height: 1;
-}
-
-.ck-content blockquote.side-quote p {
-    font-size: 2em;
-    line-height: 1;
-}
-
-.ck-content blockquote.side-quote p:last-child:not(:first-child) {
-    font-size: 1.3em;
-    text-align: right;
-    color: #555;
-}
-
-.ck-content span.marker {
-    background: yellow;
-}
-
-.ck-content span.spoiler {
-    background: #000;
-    color: #000;
-}
-
-.ck-content span.spoiler:hover {
-    background: #000;
-    color: #fff;
-}
-
-.ck-content pre.fancy-code {
-    border: 0;
-    margin-left: 2em;
-    margin-right: 2em;
-    border-radius: 10px;
-}
-
-.ck-content pre.fancy-code::before {
-    content: '';
-    display: block;
-    height: 13px;
-    background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
-    margin-bottom: 8px;
-    background-repeat: no-repeat;
-}
-
-.ck-content pre.fancy-code-dark {
-    background: #272822;
-    color: #fff;
-    box-shadow: 5px 5px 0 #0000001f;
-}
-
-.ck-content pre.fancy-code-bright {
-    background: #dddfe0;
-    color: #000;
-    box-shadow: 5px 5px 0 #b3b3b3;
-}
-
-.editor-container_classic-editor .editor-container__editor .ck-editor .ck-editor__editable {
-    border-radius: 0;
-}
-
-.ck-editor-container {
-    --ck-font-size-base: 1.4rem;
-}
-
-.editor-container__editor {
-    flex: 1;
-    height: 100%;
-    overflow: hidden !important;
-    display: flex;
-    flex-direction: column;
-}
-
-.editor-container__editor>div,
-.ck.ck-reset.ck-editor.ck-rounded-corners {
-    flex: 1;
-    height: 100%;
-    overflow: hidden !important;
-    display: flex;
-    flex-direction: column;
-}
-
-.ck.ck-editor__main>.ck.ck-content.ck-rounded-corners {
-    min-height: 100%;
-}
-
-.ck.ck-toolbar {
-    background-color: var(--neutral-absolute-background-color);
-    border-radius: 0.8rem 0.8rem 0 0 !important;
-}
-
-.ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content {
-    height: 40px;
-    border: none !important;
-    border-radius: 0.8rem 0.8rem 0 0 !important;
-    border-bottom: var(--neutral-bolder-border) !important;
-}
-
-.ck.ck-editor__main {
-    flex: 1;
-    height: 100% !important;
-    overflow: hidden auto !important;
-}
-
-.ck.ck-editor__main>div {
-    background-color: transparent !important;
-    border: none !important;
-    font-size: 16px !important;
-}
-
-.ck.ck-color-grid>button {
-    border: var(--neutral-bolder-border);
-    border-radius: 0.4rem !important;
-}