UNPKG

react-kanban-kit

Version:

A flexible and customizable Kanban board component for React applications, built with TypeScript and modern drag-and-drop functionality powered by Atlassian's pragmatic-drag-and-drop.

11 lines (10 loc) 7.05 kB
!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.rkk-board{display:flex;overflow:auto;height:100%;gap:8px}.rkk-column-outer{min-width:264px;max-width:264px;height:100%;display:flex;flex-direction:column;transition:all .1s ease;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease}.rkk-column-outer .rkk-column{display:flex;flex-direction:column;gap:10px;padding:10px;border-radius:10px;background-color:#f0f0f0;position:relative;overflow:hidden}.rkk-column-outer .rkk-column-wrapper{display:flex;flex-direction:column;flex:1;gap:16px;max-height:100%}.rkk-column-shadow-container{position:relative;flex-shrink:0}.rkk-column-shadow{border-radius:10px;background-color:#ffffffb7;border:1px solid var(--Schemes-Outline-Variant, #e8ecf5)}.rkk-column-header{display:flex;justify-content:space-between;align-items:center;border-radius:10px;height:24px;margin-bottom:10px;background-color:#f0f0f0}.rkk-column-header-left{font-size:18px;font-weight:600;color:#000}.rkk-column-header-right{font-size:15px;background-color:#37352f14;color:#37352f;padding:5px 10px;border-radius:5px;font-weight:500}.rkk-column-content{flex:1;position:relative;height:0;min-height:0}.rkk-column-content-list{height:100%;overflow-y:auto;overflow-x:hidden;contain:none!important;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.3) transparent;transition:scrollbar-color .3s ease}.rkk-column-content-list:hover{scrollbar-color:rgba(0,0,0,.3) transparent}@keyframes skeleton-shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes skeleton-wave{0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(100%)}}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.rkk-skeleton{border-radius:8px;border:1px solid #e8ecf5;background:#fff;padding:16px;margin-bottom:8px;box-shadow:0 1px 3px #0000001a;transition:box-shadow .2s ease;position:relative;overflow:hidden}.rkk-skeleton:hover{box-shadow:0 2px 8px #00000026}.rkk-skeleton-content{display:flex;flex-direction:column;gap:12px}.rkk-skeleton .rkk-skeleton-date,.rkk-skeleton .rkk-skeleton-assignee,.rkk-skeleton .rkk-skeleton-avatar,.rkk-skeleton .rkk-skeleton-tag,.rkk-skeleton .rkk-skeleton-priority,.rkk-skeleton .rkk-skeleton-line,.rkk-skeleton .rkk-skeleton-title{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-shimmer 1.5s infinite ease-in-out;border-radius:4px;position:relative}.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-title,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-title,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-line,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-line,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-tag,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-tag,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-avatar,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-avatar,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-assignee,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-assignee,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-date,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-date,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-priority,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-priority{background:#f0f0f0;position:relative;overflow:hidden;border-radius:4px}.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-title:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-title:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-line:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-line:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-tag:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-tag:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-avatar:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-avatar:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-assignee:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-assignee:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-date:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-date:after,.rkk-skeleton .rkk-skeleton-wave .rkk-skeleton-priority:after,.rkk-skeleton-wave .rkk-skeleton .rkk-skeleton-priority:after{position:absolute;top:0;right:0;bottom:0;left:0;transform:translate(-100%);background:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:skeleton-wave 2s infinite;content:""}.rkk-skeleton-title{height:20px;width:80%;border-radius:6px}.rkk-skeleton-description{display:flex;flex-direction:column;gap:8px}.rkk-skeleton-line{height:14px;width:100%}.rkk-skeleton-line-short{width:65%}.rkk-skeleton-priority{height:4px;width:40px;border-radius:2px;margin-bottom:4px}.rkk-skeleton-tags{display:flex;gap:8px;flex-wrap:wrap}.rkk-skeleton-tag{height:20px;width:60px;border-radius:12px}.rkk-skeleton-tag:nth-child(2){width:45px}.rkk-skeleton-tag:nth-child(3){width:55px}.rkk-skeleton-footer{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.rkk-skeleton-footer-left{display:flex;align-items:center;gap:8px}.rkk-skeleton-avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0}.rkk-skeleton-assignee{height:12px;width:60px;border-radius:3px}.rkk-skeleton-date{height:12px;width:80px;border-radius:3px}.rkk-skeleton-wave .rkk-skeleton-title,.rkk-skeleton-wave .rkk-skeleton-line,.rkk-skeleton-wave .rkk-skeleton-tag,.rkk-skeleton-wave .rkk-skeleton-avatar,.rkk-skeleton-wave .rkk-skeleton-assignee,.rkk-skeleton-wave .rkk-skeleton-date,.rkk-skeleton-wave .rkk-skeleton-priority{animation:none}.rkk-skeleton-pulse .rkk-skeleton-title,.rkk-skeleton-pulse .rkk-skeleton-line,.rkk-skeleton-pulse .rkk-skeleton-tag,.rkk-skeleton-pulse .rkk-skeleton-avatar,.rkk-skeleton-pulse .rkk-skeleton-assignee,.rkk-skeleton-pulse .rkk-skeleton-date,.rkk-skeleton-pulse .rkk-skeleton-priority{background:#f0f0f0;animation:skeleton-pulse 1.5s ease-in-out infinite}@media (max-width: 768px){.rkk-skeleton{padding:12px}.rkk-skeleton-content{gap:10px}.rkk-skeleton-title{height:18px}.rkk-skeleton-line{height:12px}.rkk-skeleton-tag{height:18px;width:50px}.rkk-skeleton-tag:nth-child(2){width:40px}.rkk-skeleton-avatar{width:20px;height:20px}}.rkk-card-shadow-container{position:relative}.rkk-card-shadow{border-radius:8px;background-color:#ffffffb7;border:1px solid var(--Schemes-Outline-Variant, #e8ecf5)}.rkk-default-card{background-color:#fff;padding:10px;border-radius:8px;border:1px solid #ccc;box-shadow:0 0 10px #0000001a;cursor:pointer;-webkit-border-radius:8px;-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px}')),document.head.appendChild(e)}}catch(k){console.error("vite-plugin-css-injected-by-js",k)}}(); import "./components/_index.scss.es.js"; import { dropColumnHandler, dropHandler } from "./global/dnd/dropManager.es.js"; import { default as default2 } from "./components/Kanban.es.js"; export { default2 as Kanban, dropColumnHandler, dropHandler }; //# sourceMappingURL=index.es.js.map