wini-web-components 2.8.2 → 2.8.4

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

@@ -0,0 +1,48 @@
+.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

@@ -0,0 +1,80 @@
+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

@@ -0,0 +1,206 @@
+.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;
+}