@solibo/solibo-ui 0.3.26 → 0.3.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -8
- package/dist/assets/index.css +1 -1
- package/dist/assets/index12.css +1 -1
- package/dist/assets/index14.css +1 -1
- package/dist/assets/index22.css +1 -1
- package/dist/assets/index27.css +1 -1
- package/dist/assets/index38.css +1 -1
- package/dist/components/_collapsible/index.cjs +1 -1
- package/dist/components/_collapsible/index.js +3 -3
- package/dist/components/_dropzone/index.cjs +1 -1
- package/dist/components/_dropzone/index.cjs.map +1 -1
- package/dist/components/_dropzone/index.js +64 -40
- package/dist/components/_dropzone/index.js.map +1 -1
- package/dist/components/_editor/index.cjs.map +1 -1
- package/dist/components/_editor/index.js +1 -0
- package/dist/components/_editor/index.js.map +1 -1
- package/dist/components/_portal/index.cjs +1 -1
- package/dist/components/_portal/index.js +5 -5
- package/dist/components/checkbox/index.cjs +1 -1
- package/dist/components/checkbox/index.js +4 -4
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.js +7 -7
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/list/index.cjs +1 -1
- package/dist/components/list/index.js +8 -8
- package/dist/components/nav/index.cjs.map +1 -1
- package/dist/components/nav/index.js.map +1 -1
- package/dist/components/textarea/index.cjs +1 -1
- package/dist/components/textarea/index.cjs.map +1 -1
- package/dist/components/textarea/index.js +17 -17
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/{icons-Bo1YqbZg.cjs → icons-CWtPtYZj.cjs} +2 -2
- package/dist/icons-CWtPtYZj.cjs.map +1 -0
- package/dist/{icons-CqrxHwOe.js → icons-DeUtqBx_.js} +9 -5
- package/dist/icons-DeUtqBx_.js.map +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/utils-DXIJVVzz.js.map +1 -1
- package/dist/utils-D_TJ8wDc.cjs.map +1 -1
- package/package.json +2 -3
- package/dist/icons-Bo1YqbZg.cjs.map +0 -1
- package/dist/icons-CqrxHwOe.js.map +0 -1
package/dist/assets/index12.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._dialog_1gvg4_1{background-color:var(--color-white);border-radius:var(--border-radius);border:none;box-shadow:var(--shadow-big);justify-self:center;max-height:90vh;max-width:75vw;min-width:25vw;opacity:0;overflow-y:auto;text-align:center;transition:opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay),visibility var(--transition-duration) var(--transition-timing-function) var(--transition-delay);visibility:hidden}._dialog_1gvg4_1[open]{opacity:1;visibility:visible}._dialog_1gvg4_1 button{margin:var(--unit)}._wrapper_1gvg4_28{align-items:center;-webkit-backdrop-filter:blur(var(--unit));backdrop-filter:blur(var(--unit));display:flex;height:100%;left:0;opacity:0;position:fixed;top:0;transition:opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay),visibility var(--transition-duration) var(--transition-timing-function) var(--transition-delay),-webkit-backdrop-filter var(--transition-duration) var(--transition-timing-function);transition:backdrop-filter var(--transition-duration) var(--transition-timing-function),opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay),visibility var(--transition-duration) var(--transition-timing-function) var(--transition-delay);transition:backdrop-filter var(--transition-duration) var(--transition-timing-function),opacity var(--transition-duration) var(--transition-timing-function) var(--transition-delay),visibility var(--transition-duration) var(--transition-timing-function) var(--transition-delay),-webkit-backdrop-filter var(--transition-duration) var(--transition-timing-function);visibility:hidden;width:100%;z-index:3}._wrapper_1gvg4_28:has(dialog[open]){opacity:1;visibility:visible}@media (width <= 960px){._dialog_1gvg4_1{max-width:90vw}}
|
package/dist/assets/index14.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._checkbox_19svo_1{align-items:center;cursor:pointer;display:inline-flex;gap:var(--unit-small)}._checkbox_19svo_1 input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:solid 1px var(--color-neutral);border-radius:calc(var(--border-radius) / 2);height:calc(var(--unit) * 1.25);width:calc(var(--unit) * 1.25)}._checkbox_19svo_1 input[type=checkbox]:checked{background-color:var(--color-primary)}._checkbox_19svo_1 input[type=checkbox]:checked:after{background-color:var(--color-white);content:"";display:block;height:100%;-webkit-mask-image:var(--icon-svg);mask-image:var(--icon-svg);width:100%}._checkbox_19svo_1 input[type=checkbox]:disabled{background-color:var(--color-neutral);cursor:not-allowed}._checkbox_19svo_1 input[type=checkbox]:disabled:after{background-color:var(--color-icon)}
|
package/dist/assets/index22.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._collapsible_x7hng_1 summary{color:var(--color-primary);cursor:pointer;list-style:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}._collapsible_x7hng_1 summary span{transition:transform var(--transition-duration) var(--transition-timing-function);vertical-align:inherit}._collapsible_x7hng_1[open]>summary span{transform:rotateX(180deg)}
|
package/dist/assets/index27.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@keyframes
|
|
1
|
+
@keyframes _reveal_qwrez_1{0%{opacity:0}to{opacity:1}}@property --portal-left{syntax: "<color>"; inherits: true; initial-value: white;}@property --portal-middle{syntax: "<color>"; inherits: true; initial-value: white;}@property --portal-right{syntax: "<color>"; inherits: true; initial-value: white;}._menu_qwrez_29{height:calc(100vh - var(--unit) * 2);padding:var(--unit);position:-webkit-sticky;position:sticky;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}._menu_qwrez_29>summary{cursor:pointer;left:var(--unit-large);list-style:none;position:absolute;top:var(--unit-large);transition:all var(--transition-duration) var(--transition-timing-function);z-index:2}._menu_qwrez_29[open]>summary>span{background-color:#fff}._portal_qwrez_54{--portal-left: #073345;--portal-middle: #015e78;--portal-right: #073345;background:linear-gradient(180deg,var(--portal-left),var(--portal-middle),var(--portal-right));animation:_reveal_qwrez_1 var(--transition-duration) var(--transition-timing-function);border-radius:var(--border-radius);color:#fff;height:calc(100vh - var(--unit) * 2);padding:var(--unit);padding-top:var(--unit-large);transition:border-radius var(--transition-duration) var(--transition-timing-function),height var(--transition-duration) var(--transition-timing-function),margin var(--transition-duration) var(--transition-timing-function),--portal-left var(--transition-duration-long) var(--transition-timing-function),--portal-middle var(--transition-duration-long) var(--transition-timing-function),--portal-right var(--transition-duration-long) var(--transition-timing-function);width:calc(var(--unit) * 16)}._portal_qwrez_54:has(nav [data-portal=blue][data-active]),._portal_qwrez_54:has(nav [data-portal=blue][aria-current=page]){--portal-left: #073345;--portal-middle: #015e78;--portal-right: #073345}._portal_qwrez_54:has(nav [data-portal=green][data-active]),._portal_qwrez_54:has(nav [data-portal=green][aria-current=page]){--portal-left: #022c22;--portal-middle: #064e3b;--portal-right: #022c22}._portal_qwrez_54:has(nav [data-portal=red][data-active]),._portal_qwrez_54:has(nav [data-portal=red][aria-current=page]){--portal-left: #431407;--portal-middle: #7c2d12;--portal-right: #431407}._portal_qwrez_54 figure{display:flex;justify-self:center}._portal_qwrez_54 figure figcaption{display:none}._portal_qwrez_54 footer{bottom:var(--unit-large);position:fixed;transition:all var(--transition-duration) var(--transition-timing-function)}._portal_qwrez_54 nav{flex:1 1 auto}._portal_qwrez_54 nav a,._portal_qwrez_54 nav summary{color:var(--color-white);padding:var(--unit-small) 0;text-decoration:none;font-weight:var(--font-weight-normal)}._portal_qwrez_54 nav a span,._portal_qwrez_54 nav summary span{background-color:var(--color-white);margin-bottom:var(--unit-tiny);margin-right:var(--unit-small)}._portal_qwrez_54 nav a[aria-current=page],._portal_qwrez_54 nav summary[aria-current=page]{font-weight:var(--font-weight-bold)}._portal_qwrez_54 nav details a{margin-left:var(--unit);padding-left:var(--unit);position:relative;width:100%}._portal_qwrez_54 nav details a:before{background-color:var(--color-white);border-radius:4px;content:"";display:inline-block;height:100%;left:calc(-1 * var(--unit-tiny) - 1px);position:absolute;top:0;transition:width var(--transition-duration);width:2px}._portal_qwrez_54 nav details a[aria-current=page]:before{left:calc(-1 * var(--unit-tiny) - 2px);width:4px}._portal_qwrez_54 nav details a:hover{color:var(--color-white)}._portal_qwrez_54 nav details a:last-child{margin-bottom:var(--unit)}._portal_qwrez_54 nav[data-orientation=horizontal]{align-items:center;display:flex;justify-self:center;padding-bottom:var(--unit)}._portal_qwrez_54 nav[data-orientation=horizontal] a{font-size:var(--font-size-small);padding:var(--unit-small);transition:all}._portal_qwrez_54 nav[data-orientation=horizontal] a[data-active]{border-bottom:solid 2px var(--color-white);font-size:var(--font-size)}._portal_qwrez_54 nav[data-orientation=horizontal] a:hover{color:var(--color-white);text-decoration:none}._portal_qwrez_54 select{background-color:#ffffff1a;border:none;box-shadow:none;filter:invert(1);margin-bottom:var(--unit);padding-bottom:var(--unit-small);padding-top:var(--unit-small);width:100%}._portal_qwrez_54 select:active,._portal_qwrez_54 select:focus{outline:none}@media (width <= 960px){._menu_qwrez_29{padding:0}._menu_qwrez_29>summary{left:var(--unit);top:var(--unit)}._portal_qwrez_54{border-radius:0;margin:0;height:100vh;position:fixed;top:0}._portal_qwrez_54 footer{bottom:var(--unit)}}
|
package/dist/assets/index38.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._horizontal_vm212_1{display:block;max-width:100%}._horizontal_vm212_1 li{display:inline-block;margin:0 var(--unit) var(--unit) 0;max-width:100%}._list_vm212_12{display:grid;gap:var(--unit);list-style-type:none;-webkit-margin-before:0;margin-block-start:0}._list_vm212_12 li{list-style:none;padding-left:0}._list_vm212_12 li li{margin-left:var(--unit)}._list_vm212_12 li>section{border-bottom:var(--border-width) solid var(--color-border-primary)}._list_vm212_12 li>section:first-child{border-top:var(--border-width) solid var(--color-border-primary)}._list_vm212_12 li>section:last-of-type{border-bottom:none}._columns_vm212_40{-moz-column-gap:var(--unit);column-gap:var(--unit);display:grid;grid-template-columns:repeat(var(--list-columns, 2),minmax(0,1fr))}@media (width <= 960px){._columns_vm212_40{grid-template-columns:1fr}}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const e=require("react/jsx-runtime"),n=require("../icon/index.cjs"),c="
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index22.css');const e=require("react/jsx-runtime"),n=require("../icon/index.cjs"),c="_collapsible_x7hng_1",i={collapsible:c},t=({children:o,disabled:l,label:s})=>e.jsxs("details",{className:i.collapsible,open:l||void 0,"data-component":"collapsible",children:[e.jsxs("summary",{children:[s&&s,!l&&e.jsx(n.Icon,{gap:"left",name:"chevron",variant:"primary"})]}),o]});exports.Collapsible=t;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsxs as s, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { Icon as c } from "../icon/index.js";
|
|
3
|
-
import '../../assets/index22.css';const
|
|
4
|
-
collapsible:
|
|
3
|
+
import '../../assets/index22.css';const n = "_collapsible_x7hng_1", r = {
|
|
4
|
+
collapsible: n
|
|
5
5
|
}, t = ({
|
|
6
6
|
children: e,
|
|
7
7
|
disabled: l,
|
|
8
8
|
label: o
|
|
9
|
-
}) => /* @__PURE__ */ s("details", { className:
|
|
9
|
+
}) => /* @__PURE__ */ s("details", { className: r.collapsible, open: l || void 0, "data-component": "collapsible", children: [
|
|
10
10
|
/* @__PURE__ */ s("summary", { children: [
|
|
11
11
|
o && o,
|
|
12
12
|
!l && /* @__PURE__ */ a(c, { gap: "left", name: "chevron", variant: "primary" })
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index24.css');const i=require("react/jsx-runtime"),b=require("../../classix-5H4IWnMA.cjs"),z=require("react"),q=require("../button/index.cjs"),I=require("../icon/index.cjs"),R="_dropzone_1737c_1",T="_dragging_1737c_18",S="_minimal_1737c_22",g={dropzone:R,dragging:T,minimal:S},k=({accepts:F,label:D="Select files",maxFileSize:m,multiple:d=!1,onChange:n,onValidation:a,variant:p="default",...y})=>{const f=z.useRef(null),[x,l]=z.useState(!1),c=e=>{e.preventDefault(),e.stopPropagation()},_=e=>{const t=f.current;if(!t)return;const s=new DataTransfer;for(const r of e)s.items.add(r);t.files=s.files,n==null||n({target:t,currentTarget:t})},v=e=>{const{validFiles:t,emptyFiles:s,oversizedFiles:r}=e.reduce((u,o)=>(o.size===0?u.emptyFiles.push(o):m&&o.size>m?u.oversizedFiles.push(o):u.validFiles.push(o),u),{validFiles:[],emptyFiles:[],oversizedFiles:[]});return(s.length>0||r.length>0)&&(a==null||a(s,r)),t},j=e=>{c(e),l(!1);const t=Array.from(e.dataTransfer.files??[]),s=v(t);if(s.length===0)return;const r=d?s:s.slice(0,1);_(r)},h=e=>{const t=Array.from(e.target.files??[]),s=v(t);if(s.length===t.length){n==null||n(e);return}const r=d?s:s.slice(0,1);_(r)};return i.jsx("div",{className:b.t(g.dropzone,g[p],x&&g.dragging),onDragEnter:e=>{c(e),l(!0)},onDragOver:e=>{c(e),l(!0)},onDragLeave:e=>{c(e),l(!1)},onDrop:j,...y,"data-component":"dropzone",children:i.jsxs("label",{children:[i.jsx("input",{accept:F,hidden:!0,multiple:d,onChange:h,ref:f,type:"file"}),i.jsx(I.Icon,{name:"upload",size:p==="minimal"?"medium":"large"}),i.jsx("br",{}),p!=="minimal"&&i.jsx(q.Button,{onClick:()=>{var e;return(e=f.current)==null?void 0:e.click()},type:"button",children:D})]})})};exports.Dropzone=k;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/_dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n accepts?: string;\n label: string;\n multiple?: boolean;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n variant?: 'default' | 'minimal';\n};\n\nexport const Dropzone = ({\n accepts,\n label = 'Select files',\n multiple = false,\n onChange,\n variant = 'default',\n ...props\n}: DropzoneProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const prevent = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n prevent(e);\n setIsDragging(false);\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/_dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n accepts?: string;\n label: string;\n maxFileSize?: number;\n multiple?: boolean;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n onValidation?: (empty: File[], oversized: File[]) => void;\n variant?: 'default' | 'minimal';\n};\n\nexport const Dropzone = ({\n accepts,\n label = 'Select files',\n maxFileSize,\n multiple = false,\n onChange,\n onValidation,\n variant = 'default',\n ...props\n}: DropzoneProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const prevent = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const updateInputFiles = (files: File[]) => {\n const input = inputRef.current;\n if (!input) return;\n\n const dt = new DataTransfer();\n for (const file of files) dt.items.add(file);\n\n input.files = dt.files;\n\n onChange?.({\n target: input,\n currentTarget: input,\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const getValidFiles = (files: File[]) => {\n const { validFiles, emptyFiles, oversizedFiles } = files.reduce(\n (acc, file) => {\n if (file.size === 0) {\n acc.emptyFiles.push(file);\n } else if (maxFileSize && file.size > maxFileSize) {\n acc.oversizedFiles.push(file);\n } else {\n acc.validFiles.push(file);\n }\n\n return acc;\n },\n {\n validFiles: [] as File[],\n emptyFiles: [] as File[],\n oversizedFiles: [] as File[],\n }\n );\n\n if (emptyFiles.length > 0 || oversizedFiles.length > 0) {\n onValidation?.(emptyFiles, oversizedFiles);\n }\n\n return validFiles;\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n prevent(e);\n setIsDragging(false);\n const files = Array.from(e.dataTransfer.files ?? []);\n const validFiles = getValidFiles(files);\n\n if (validFiles.length === 0) return;\n\n const selected = multiple ? validFiles : validFiles.slice(0, 1);\n updateInputFiles(selected);\n };\n\n const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n const files = Array.from(e.target.files ?? []);\n const validFiles = getValidFiles(files);\n\n if (validFiles.length === files.length) {\n onChange?.(e);\n return;\n }\n\n const selected = multiple ? validFiles : validFiles.slice(0, 1);\n updateInputFiles(selected);\n };\n\n return (\n <div\n className={cx(styles.dropzone, styles[variant], isDragging && styles.dragging)}\n onDragEnter={(e) => {\n prevent(e);\n setIsDragging(true);\n }}\n onDragOver={(e) => {\n prevent(e);\n setIsDragging(true);\n }}\n onDragLeave={(e) => {\n prevent(e);\n setIsDragging(false);\n }}\n onDrop={handleDrop}\n {...props}\n >\n <label>\n <input\n accept={accepts}\n hidden\n multiple={multiple}\n onChange={handleInputChange}\n ref={inputRef}\n type='file'\n />\n <Icon\n name='upload'\n size={variant === 'minimal' ? 'medium' : 'large'}\n />\n <br />\n {variant !== 'minimal' && (\n <Button\n onClick={() => inputRef.current?.click()}\n type={'button'}\n >\n {label}\n </Button>\n )}\n </label>\n </div>\n );\n};\n"],"names":["Dropzone","accepts","label","maxFileSize","multiple","onChange","onValidation","variant","props","inputRef","useRef","isDragging","setIsDragging","useState","prevent","e","preventDefault","stopPropagation","updateInputFiles","files","input","current","dt","DataTransfer","file","items","add","target","currentTarget","getValidFiles","validFiles","emptyFiles","oversizedFiles","reduce","acc","size","push","length","handleDrop","Array","from","dataTransfer","selected","slice","handleInputChange","jsx","cx","styles","dropzone","dragging","Icon","Button","click"],"mappings":"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"}
|
|
@@ -1,52 +1,76 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { t as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { Icon as
|
|
6
|
-
import '../../assets/index24.css';const
|
|
7
|
-
dropzone:
|
|
8
|
-
dragging:
|
|
9
|
-
minimal:
|
|
10
|
-
},
|
|
11
|
-
accepts:
|
|
12
|
-
label:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsx as l, jsxs as b } from "react/jsx-runtime";
|
|
2
|
+
import { t as T } from "../../classix-DG18itHa.js";
|
|
3
|
+
import { useRef as j, useState as k } from "react";
|
|
4
|
+
import { Button as x } from "../button/index.js";
|
|
5
|
+
import { Icon as A } from "../icon/index.js";
|
|
6
|
+
import '../../assets/index24.css';const R = "_dropzone_1737c_1", w = "_dragging_1737c_18", B = "_minimal_1737c_22", m = {
|
|
7
|
+
dropzone: R,
|
|
8
|
+
dragging: w,
|
|
9
|
+
minimal: B
|
|
10
|
+
}, S = ({
|
|
11
|
+
accepts: z,
|
|
12
|
+
label: D = "Select files",
|
|
13
|
+
maxFileSize: g,
|
|
14
|
+
multiple: p = !1,
|
|
15
|
+
onChange: i,
|
|
16
|
+
onValidation: a,
|
|
17
|
+
variant: f = "default",
|
|
18
|
+
..._
|
|
17
19
|
}) => {
|
|
18
|
-
const
|
|
20
|
+
const u = j(null), [y, o] = k(!1), c = (e) => {
|
|
19
21
|
e.preventDefault(), e.stopPropagation();
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
i.files = m.files, t == null || t({
|
|
29
|
-
target: i,
|
|
30
|
-
currentTarget: i
|
|
22
|
+
}, F = (e) => {
|
|
23
|
+
const s = u.current;
|
|
24
|
+
if (!s) return;
|
|
25
|
+
const t = new DataTransfer();
|
|
26
|
+
for (const r of e) t.items.add(r);
|
|
27
|
+
s.files = t.files, i == null || i({
|
|
28
|
+
target: s,
|
|
29
|
+
currentTarget: s
|
|
31
30
|
});
|
|
31
|
+
}, v = (e) => {
|
|
32
|
+
const {
|
|
33
|
+
validFiles: s,
|
|
34
|
+
emptyFiles: t,
|
|
35
|
+
oversizedFiles: r
|
|
36
|
+
} = e.reduce((d, n) => (n.size === 0 ? d.emptyFiles.push(n) : g && n.size > g ? d.oversizedFiles.push(n) : d.validFiles.push(n), d), {
|
|
37
|
+
validFiles: [],
|
|
38
|
+
emptyFiles: [],
|
|
39
|
+
oversizedFiles: []
|
|
40
|
+
});
|
|
41
|
+
return (t.length > 0 || r.length > 0) && (a == null || a(t, r)), s;
|
|
42
|
+
}, h = (e) => {
|
|
43
|
+
c(e), o(!1);
|
|
44
|
+
const s = Array.from(e.dataTransfer.files ?? []), t = v(s);
|
|
45
|
+
if (t.length === 0) return;
|
|
46
|
+
const r = p ? t : t.slice(0, 1);
|
|
47
|
+
F(r);
|
|
48
|
+
}, I = (e) => {
|
|
49
|
+
const s = Array.from(e.target.files ?? []), t = v(s);
|
|
50
|
+
if (t.length === s.length) {
|
|
51
|
+
i == null || i(e);
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
const r = p ? t : t.slice(0, 1);
|
|
55
|
+
F(r);
|
|
32
56
|
};
|
|
33
|
-
return /* @__PURE__ */
|
|
34
|
-
|
|
57
|
+
return /* @__PURE__ */ l("div", { className: T(m.dropzone, m[f], y && m.dragging), onDragEnter: (e) => {
|
|
58
|
+
c(e), o(!0);
|
|
35
59
|
}, onDragOver: (e) => {
|
|
36
|
-
|
|
60
|
+
c(e), o(!0);
|
|
37
61
|
}, onDragLeave: (e) => {
|
|
38
|
-
|
|
39
|
-
}, onDrop:
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
62
|
+
c(e), o(!1);
|
|
63
|
+
}, onDrop: h, ..._, "data-component": "dropzone", children: /* @__PURE__ */ b("label", { children: [
|
|
64
|
+
/* @__PURE__ */ l("input", { accept: z, hidden: !0, multiple: p, onChange: I, ref: u, type: "file" }),
|
|
65
|
+
/* @__PURE__ */ l(A, { name: "upload", size: f === "minimal" ? "medium" : "large" }),
|
|
66
|
+
/* @__PURE__ */ l("br", {}),
|
|
67
|
+
f !== "minimal" && /* @__PURE__ */ l(x, { onClick: () => {
|
|
44
68
|
var e;
|
|
45
|
-
return (e =
|
|
46
|
-
}, type: "button", children:
|
|
69
|
+
return (e = u.current) == null ? void 0 : e.click();
|
|
70
|
+
}, type: "button", children: D })
|
|
47
71
|
] }) });
|
|
48
72
|
};
|
|
49
73
|
export {
|
|
50
|
-
|
|
74
|
+
S as Dropzone
|
|
51
75
|
};
|
|
52
76
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/_dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n accepts?: string;\n label: string;\n multiple?: boolean;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n variant?: 'default' | 'minimal';\n};\n\nexport const Dropzone = ({\n accepts,\n label = 'Select files',\n multiple = false,\n onChange,\n variant = 'default',\n ...props\n}: DropzoneProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const prevent = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n prevent(e);\n setIsDragging(false);\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/_dropzone/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { useRef, useState } from 'react';\n\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport styles from './styles.module.css';\n\nexport type DropzoneProps = {\n accepts?: string;\n label: string;\n maxFileSize?: number;\n multiple?: boolean;\n onChange?: React.ChangeEventHandler<HTMLInputElement>;\n onValidation?: (empty: File[], oversized: File[]) => void;\n variant?: 'default' | 'minimal';\n};\n\nexport const Dropzone = ({\n accepts,\n label = 'Select files',\n maxFileSize,\n multiple = false,\n onChange,\n onValidation,\n variant = 'default',\n ...props\n}: DropzoneProps) => {\n const inputRef = useRef<HTMLInputElement>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n const prevent = (e: React.DragEvent) => {\n e.preventDefault();\n e.stopPropagation();\n };\n\n const updateInputFiles = (files: File[]) => {\n const input = inputRef.current;\n if (!input) return;\n\n const dt = new DataTransfer();\n for (const file of files) dt.items.add(file);\n\n input.files = dt.files;\n\n onChange?.({\n target: input,\n currentTarget: input,\n } as React.ChangeEvent<HTMLInputElement>);\n };\n\n const getValidFiles = (files: File[]) => {\n const { validFiles, emptyFiles, oversizedFiles } = files.reduce(\n (acc, file) => {\n if (file.size === 0) {\n acc.emptyFiles.push(file);\n } else if (maxFileSize && file.size > maxFileSize) {\n acc.oversizedFiles.push(file);\n } else {\n acc.validFiles.push(file);\n }\n\n return acc;\n },\n {\n validFiles: [] as File[],\n emptyFiles: [] as File[],\n oversizedFiles: [] as File[],\n }\n );\n\n if (emptyFiles.length > 0 || oversizedFiles.length > 0) {\n onValidation?.(emptyFiles, oversizedFiles);\n }\n\n return validFiles;\n };\n\n const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\n prevent(e);\n setIsDragging(false);\n const files = Array.from(e.dataTransfer.files ?? []);\n const validFiles = getValidFiles(files);\n\n if (validFiles.length === 0) return;\n\n const selected = multiple ? validFiles : validFiles.slice(0, 1);\n updateInputFiles(selected);\n };\n\n const handleInputChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {\n const files = Array.from(e.target.files ?? []);\n const validFiles = getValidFiles(files);\n\n if (validFiles.length === files.length) {\n onChange?.(e);\n return;\n }\n\n const selected = multiple ? validFiles : validFiles.slice(0, 1);\n updateInputFiles(selected);\n };\n\n return (\n <div\n className={cx(styles.dropzone, styles[variant], isDragging && styles.dragging)}\n onDragEnter={(e) => {\n prevent(e);\n setIsDragging(true);\n }}\n onDragOver={(e) => {\n prevent(e);\n setIsDragging(true);\n }}\n onDragLeave={(e) => {\n prevent(e);\n setIsDragging(false);\n }}\n onDrop={handleDrop}\n {...props}\n >\n <label>\n <input\n accept={accepts}\n hidden\n multiple={multiple}\n onChange={handleInputChange}\n ref={inputRef}\n type='file'\n />\n <Icon\n name='upload'\n size={variant === 'minimal' ? 'medium' : 'large'}\n />\n <br />\n {variant !== 'minimal' && (\n <Button\n onClick={() => inputRef.current?.click()}\n type={'button'}\n >\n {label}\n </Button>\n )}\n </label>\n </div>\n );\n};\n"],"names":["Dropzone","accepts","label","maxFileSize","multiple","onChange","onValidation","variant","props","inputRef","useRef","isDragging","setIsDragging","useState","prevent","e","preventDefault","stopPropagation","updateInputFiles","files","input","current","dt","DataTransfer","file","items","add","target","currentTarget","getValidFiles","validFiles","emptyFiles","oversizedFiles","reduce","acc","size","push","length","handleDrop","Array","from","dataTransfer","selected","slice","handleInputChange","jsx","cx","styles","dropzone","dragging","Icon","Button","click"],"mappings":"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"}
|