UNPKG

@lobehub/ui

Version:

Lobe UI is an open-source UI component library for building AIGC web apps

github.com/lobehub/lobe-ui

lobehub/lobe-ui

1 lines • 11.8 kB
1
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/DraggablePanel/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst TOGGLE_HIT_SHORT = 26;\nconst TOGGLE_HIT_LONG = 40;\n\nexport const SEAM_ARROW = {\n depth: 6.5,\n half: 11,\n lead: 6,\n stroke: 1.25,\n};\n\nconst prefix = 'base-draggable-panel';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n const float = css`\n position: absolute;\n z-index: 200;\n `;\n\n const toggleRoot = cx(\n `${prefix}-toggle`,\n css`\n pointer-events: none;\n\n position: absolute;\n z-index: 110;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n > button {\n pointer-events: all;\n cursor: pointer;\n\n position: relative;\n\n width: ${TOGGLE_HIT_SHORT}px;\n height: ${TOGGLE_HIT_LONG}px;\n padding: 0;\n border: none;\n\n background: none;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimary};\n outline-offset: 3px;\n }\n }\n\n svg {\n pointer-events: none;\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n overflow: visible;\n\n opacity: 0;\n\n transition: opacity 0.18s ${cssVar.motionEaseOut};\n }\n\n path {\n transform-origin: center;\n transform: scaleX(0);\n vector-effect: non-scaling-stroke;\n transition: transform 0.24s ${cssVar.motionEaseOut};\n }\n\n /* The ends fade into the seam so the bend reads as the seam itself, not a drawn icon. */\n stop[data-end] {\n stop-color: ${cssVar.colorBorderSecondary};\n transition: stop-opacity 0.18s ${cssVar.motionEaseOut};\n }\n\n stop[data-tip] {\n stop-color: ${cssVar.colorTextTertiary};\n transition: stop-color 0.16s ${cssVar.motionEaseOut};\n }\n\n button:hover stop[data-tip] {\n stop-color: ${cssVar.colorTextSecondary};\n }\n `,\n );\n\n return {\n body: css`\n overflow: hidden auto;\n padding: 16px;\n `,\n bottomFloat: cx(\n float,\n css`\n inset-block-end: 0;\n inset-inline: 0;\n width: 100%;\n `,\n ),\n container: css`\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n `,\n content: cx(\n `${prefix}-content`,\n css`\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n\n min-width: 0;\n min-height: 0;\n\n background: var(--draggable-panel-bg, transparent);\n `,\n ),\n fixed: css`\n position: relative;\n `,\n footer: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n\n padding-block: 8px;\n padding-inline: 16px;\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n `,\n handle: cx(\n `${prefix}-handle`,\n css`\n touch-action: none;\n position: absolute;\n z-index: 100;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n background: ${cssVar.colorBorderSecondary};\n transition:\n width 0.25s ${cssVar.motionEaseOut},\n height 0.25s ${cssVar.motionEaseOut},\n background 0.16s ${cssVar.motionEaseOut};\n }\n\n &:hover::before,\n &:hover::after {\n background: ${cssVar.colorFill};\n }\n\n &[data-resizing]::before,\n &[data-resizing]::after {\n background: ${cssVar.colorPrimary};\n }\n\n &[data-border='false']::before,\n &[data-border='false']::after {\n background: transparent;\n }\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimary};\n outline-offset: -2px;\n }\n `,\n ),\n handleHorizontal: css`\n cursor: row-resize;\n inset-inline: 0;\n height: var(--draggable-panel-handle-size);\n\n &::before,\n &::after {\n inset-block-start: 50%;\n height: 1px;\n margin-block-start: -0.5px;\n }\n\n &::before {\n inset-inline-start: 0;\n width: calc(50% - var(--draggable-panel-gap, 0px));\n }\n\n &::after {\n inset-inline-end: 0;\n width: calc(50% - var(--draggable-panel-gap, 0px));\n }\n `,\n handleVertical: css`\n cursor: col-resize;\n inset-block: 0;\n width: var(--draggable-panel-handle-size);\n\n &::before,\n &::after {\n inset-inline-start: 50%;\n width: 1px;\n margin-inline-start: -0.5px;\n }\n\n &::before {\n inset-block-start: 0;\n height: calc(50% - var(--draggable-panel-gap, 0px));\n }\n\n &::after {\n inset-block-end: 0;\n height: calc(50% - var(--draggable-panel-gap, 0px));\n }\n `,\n header: css`\n display: flex;\n flex: none;\n gap: 8px;\n align-items: center;\n justify-content: space-between;\n\n padding-block: 8px;\n padding-inline: 16px;\n border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n\n font-weight: 500;\n `,\n leftFloat: cx(\n float,\n css`\n inset-block: 0;\n inset-inline-start: 0;\n height: 100%;\n `,\n ),\n rightFloat: cx(\n float,\n css`\n inset-block: 0;\n inset-inline-end: 0;\n height: 100%;\n `,\n ),\n root: cx(\n prefix,\n css`\n --draggable-panel-gap: 0px;\n\n display: flex;\n flex-shrink: 0;\n min-width: 0;\n min-height: 0;\n\n &[data-expandable='true']:hover,\n &[data-expandable='true']:focus-within,\n &[data-expandable='true'][data-expand='false'] {\n --draggable-panel-gap: ${SEAM_ARROW.half + SEAM_ARROW.lead}px;\n }\n\n /* The wrapper carries an inline opacity when collapsed, so beat it. */\n &[data-expandable='true']:hover\n .${prefix}-toggle,\n &[data-expandable='true']:focus-within\n .${prefix}-toggle {\n opacity: 1 !important;\n }\n\n &[data-expandable='true']:hover .${prefix}-toggle svg,\n &[data-expandable='true']:focus-within .${prefix}-toggle svg,\n &[data-expandable='true'][data-expand='false'] .${prefix}-toggle svg {\n opacity: 1;\n }\n\n &[data-expandable='true']:hover .${prefix}-toggle path,\n &[data-expandable='true']:focus-within .${prefix}-toggle path,\n &[data-expandable='true'][data-expand='false'] .${prefix}-toggle path {\n transform: scaleX(var(--seam-bend));\n }\n\n &[data-expandable='true'][data-resizing='true'] {\n --draggable-panel-gap: 0px;\n }\n\n &[data-expandable='true'][data-resizing='true'] .${prefix}-toggle svg {\n opacity: 0;\n }\n `,\n ),\n toggleBottom: cx(\n `${prefix}-toggle-bottom`,\n css`\n inset-block-end: -${TOGGLE_HIT_SHORT / 2}px;\n inset-inline: 0;\n height: ${TOGGLE_HIT_SHORT}px;\n\n > button {\n width: ${TOGGLE_HIT_LONG}px;\n height: ${TOGGLE_HIT_SHORT}px;\n }\n `,\n ),\n toggleLeft: cx(\n `${prefix}-toggle-left`,\n css`\n inset-block: 0;\n inset-inline-start: -${TOGGLE_HIT_SHORT / 2}px;\n width: ${TOGGLE_HIT_SHORT}px;\n `,\n ),\n toggleRight: cx(\n `${prefix}-toggle-right`,\n css`\n inset-block: 0;\n inset-inline-end: -${TOGGLE_HIT_SHORT / 2}px;\n width: ${TOGGLE_HIT_SHORT}px;\n `,\n ),\n toggleRoot,\n toggleTop: cx(\n `${prefix}-toggle-top`,\n css`\n inset-block-start: -${TOGGLE_HIT_SHORT / 2}px;\n inset-inline: 0;\n height: ${TOGGLE_HIT_SHORT}px;\n\n > button {\n width: ${TOGGLE_HIT_LONG}px;\n height: ${TOGGLE_HIT_SHORT}px;\n }\n `,\n ),\n\n topFloat: cx(\n float,\n css`\n inset-block-start: 0;\n inset-inline: 0;\n width: 100%;\n `,\n ),\n };\n});\n\nexport const rootVariants = cva(styles.root, {\n compoundVariants: [\n { class: styles.leftFloat, mode: 'float', placement: 'left' },\n { class: styles.rightFloat, mode: 'float', placement: 'right' },\n { class: styles.topFloat, mode: 'float', placement: 'top' },\n { class: styles.bottomFloat, mode: 'float', placement: 'bottom' },\n ],\n defaultVariants: { mode: 'fixed', placement: 'right' },\n variants: {\n mode: { fixed: styles.fixed, float: null },\n placement: { bottom: null, left: null, right: null, top: null },\n },\n});\n\nexport const handleVariants = cva(styles.handle, {\n variants: {\n edge: {\n bottom: styles.handleHorizontal,\n left: styles.handleVertical,\n right: styles.handleVertical,\n top: styles.handleHorizontal,\n },\n },\n});\n\nexport const toggleVariants = cva(styles.toggleRoot, {\n variants: {\n placement: {\n bottom: styles.toggleTop,\n left: styles.toggleRight,\n right: styles.toggleLeft,\n top: styles.toggleBottom,\n },\n },\n});\n"],"mappings":"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"}