@cfxjs/sirius-next-common 0.2.4 → 0.2.6
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.
|
@@ -29,7 +29,17 @@ var CustomOption = ({ onChange, mode, ...props }) => {
|
|
|
29
29
|
/* @__PURE__ */ jsx(
|
|
30
30
|
"input",
|
|
31
31
|
{
|
|
32
|
-
|
|
32
|
+
style: { visibility: "hidden" },
|
|
33
|
+
className: "w-0 h-0 absolute",
|
|
34
|
+
autoFocus: true
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
/* @__PURE__ */ jsx(
|
|
38
|
+
"input",
|
|
39
|
+
{
|
|
40
|
+
className: clsx(
|
|
41
|
+
"w-0 flex-1 outline-none rounded-3px border-1px border-solid focus:border-#1E3DE4"
|
|
42
|
+
),
|
|
33
43
|
onChange: (e) => onChange(e.target.value),
|
|
34
44
|
...props
|
|
35
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/DecimalsSelect/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Popover } from '../Popover';\nimport { Check, ChevronUp } from 'lucide-react';\n\nconst Value: React.FC<{\n value?: number;\n mode: 'decimals' | 'pow';\n}> = ({ mode, value }) => {\n if (mode === 'pow')\n return (\n <span>\n 10 <sup>{value}</sup>\n </span>\n );\n return value;\n};\n\nconst CustomOption: React.FC<{\n onChange: (value: string) => void;\n value?: number | string;\n mode: 'decimals' | 'pow';\n}> = ({ onChange, mode, ...props }) => {\n return (\n <div className=\"w-full flex items-center gap-10px\">\n {mode === 'pow' && '10^'}\n <input\n className={clsx('w-0 flex-1')}\n onChange={e => onChange(e.target.value)}\n {...props}\n />\n </div>\n );\n};\n\nconst defaultOptions = [18, 8, 6];\n\ntype DecimalsSelectProps = {\n value?: number;\n onChange: (value?: number) => void;\n max?: number;\n placeholder?: string;\n className?: string;\n optionsClassName?: string;\n popoverClassName?: string;\n mode?: 'decimals' | 'pow';\n options?: number[];\n};\n\nexport const DecimalsSelect = ({\n max,\n onChange,\n optionsClassName,\n popoverClassName,\n className,\n placeholder,\n value,\n options = defaultOptions,\n mode = 'decimals',\n}: DecimalsSelectProps) => {\n const [open, setOpen] = useState(false);\n const [selected, setSelected] = useState(() =>\n options.find(option => option === value),\n );\n const handleDecimalsChange = (value: string) => {\n if (!value) {\n onChange(undefined);\n return;\n }\n let num = Number(value);\n if (value.includes('-') || value.includes('.') || isNaN(num)) return;\n if (max && num > max) num = max;\n if (num < 0) num = 0;\n setSelected(undefined);\n onChange(num);\n };\n return (\n <Popover\n content={\n <div className=\"flex flex-col gap-8px w-76px\">\n {options.map(option => (\n <div\n className={clsx(\n 'cursor-pointer bg-[#fff] hover:bg-[#f1f3f5] w-full flex items-center justify-between',\n optionsClassName,\n )}\n key={option}\n onClick={() => {\n setSelected(option);\n onChange(option);\n setOpen(false);\n }}\n >\n <Value mode={mode} value={option} />\n {option === selected && <Check className=\"w-16px h-16px\" />}\n </div>\n ))}\n <div className={clsx('bg-[#fff] w-full', optionsClassName)}>\n <CustomOption\n onChange={handleDecimalsChange}\n value={selected === undefined && value !== undefined ? value : ''}\n mode={mode}\n />\n </div>\n </div>\n }\n containerClassName={popoverClassName}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n open={open}\n positioning={{\n placement: 'auto',\n }}\n >\n <div\n className={clsx(\n 'inline-flex justify-between items-center px-8px h-24px w-100px cursor-pointer',\n 'border-1 border-solid border-#E8E9EA rounded-2px',\n className,\n )}\n >\n <span>\n {value === undefined ? (\n placeholder\n ) : (\n <Value mode={mode} value={value} />\n )}\n </span>\n <ChevronUp className={clsx('w-12px h-12px', !open && 'rotate-180')} />\n </div>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,SAAgB,gBAAgB;AAChC,OAAO,UAAU;AAEjB,SAAS,OAAO,iBAAiB;AAQ3B,SACK,KADL;AANN,IAAM,QAGD,CAAC,EAAE,MAAM,MAAM,MAAM;AACxB,MAAI,SAAS;AACX,WACE,qBAAC,UAAK;AAAA;AAAA,MACD,oBAAC,SAAK,iBAAM;AAAA,OACjB;AAEJ,SAAO;AACT;AAEA,IAAM,eAID,CAAC,EAAE,UAAU,MAAM,GAAG,MAAM,MAAM;AACrC,SACE,qBAAC,SAAI,WAAU,qCACZ;AAAA,aAAS,SAAS;AAAA,IACnB;AAAA,MAAC;AAAA;AAAA,QACC,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/DecimalsSelect/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport clsx from 'clsx';\nimport { Popover } from '../Popover';\nimport { Check, ChevronUp } from 'lucide-react';\n\nconst Value: React.FC<{\n value?: number;\n mode: 'decimals' | 'pow';\n}> = ({ mode, value }) => {\n if (mode === 'pow')\n return (\n <span>\n 10 <sup>{value}</sup>\n </span>\n );\n return value;\n};\n\nconst CustomOption: React.FC<{\n onChange: (value: string) => void;\n value?: number | string;\n mode: 'decimals' | 'pow';\n}> = ({ onChange, mode, ...props }) => {\n return (\n <div className=\"w-full flex items-center gap-10px\">\n {mode === 'pow' && '10^'}\n <input\n style={{ visibility: 'hidden' }}\n className=\"w-0 h-0 absolute\"\n autoFocus\n />\n <input\n className={clsx(\n 'w-0 flex-1 outline-none rounded-3px border-1px border-solid focus:border-#1E3DE4',\n )}\n onChange={e => onChange(e.target.value)}\n {...props}\n />\n </div>\n );\n};\n\nconst defaultOptions = [18, 8, 6];\n\ntype DecimalsSelectProps = {\n value?: number;\n onChange: (value?: number) => void;\n max?: number;\n placeholder?: string;\n className?: string;\n optionsClassName?: string;\n popoverClassName?: string;\n mode?: 'decimals' | 'pow';\n options?: number[];\n};\n\nexport const DecimalsSelect = ({\n max,\n onChange,\n optionsClassName,\n popoverClassName,\n className,\n placeholder,\n value,\n options = defaultOptions,\n mode = 'decimals',\n}: DecimalsSelectProps) => {\n const [open, setOpen] = useState(false);\n const [selected, setSelected] = useState(() =>\n options.find(option => option === value),\n );\n const handleDecimalsChange = (value: string) => {\n if (!value) {\n onChange(undefined);\n return;\n }\n let num = Number(value);\n if (value.includes('-') || value.includes('.') || isNaN(num)) return;\n if (max && num > max) num = max;\n if (num < 0) num = 0;\n setSelected(undefined);\n onChange(num);\n };\n return (\n <Popover\n content={\n <div className=\"flex flex-col gap-8px w-76px\">\n {options.map(option => (\n <div\n className={clsx(\n 'cursor-pointer bg-[#fff] hover:bg-[#f1f3f5] w-full flex items-center justify-between',\n optionsClassName,\n )}\n key={option}\n onClick={() => {\n setSelected(option);\n onChange(option);\n setOpen(false);\n }}\n >\n <Value mode={mode} value={option} />\n {option === selected && <Check className=\"w-16px h-16px\" />}\n </div>\n ))}\n <div className={clsx('bg-[#fff] w-full', optionsClassName)}>\n <CustomOption\n onChange={handleDecimalsChange}\n value={selected === undefined && value !== undefined ? value : ''}\n mode={mode}\n />\n </div>\n </div>\n }\n containerClassName={popoverClassName}\n onOpen={() => setOpen(true)}\n onClose={() => setOpen(false)}\n open={open}\n positioning={{\n placement: 'auto',\n }}\n >\n <div\n className={clsx(\n 'inline-flex justify-between items-center px-8px h-24px w-100px cursor-pointer',\n 'border-1 border-solid border-#E8E9EA rounded-2px',\n className,\n )}\n >\n <span>\n {value === undefined ? (\n placeholder\n ) : (\n <Value mode={mode} value={value} />\n )}\n </span>\n <ChevronUp className={clsx('w-12px h-12px', !open && 'rotate-180')} />\n </div>\n </Popover>\n );\n};\n"],"mappings":"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","names":["value"]}
|
package/dist/uno.css
CHANGED
|
@@ -111,6 +111,7 @@
|
|
|
111
111
|
.h-\[8px\]{height:8px;}
|
|
112
112
|
.h-\[920px\]{height:920px;}
|
|
113
113
|
.h-\[var\(--radix-select-trigger-height\)\]{height:var(--radix-select-trigger-height);}
|
|
114
|
+
.h-0{height:0;}
|
|
114
115
|
.h-1\.5714rem{height:1.5714rem;}
|
|
115
116
|
.h-10{height:2.5rem;}
|
|
116
117
|
.h-12{height:3rem;}
|
|
@@ -269,6 +270,7 @@
|
|
|
269
270
|
.border-\#E8E9EA{--un-border-opacity:1;border-color:rgb(232 233 234 / var(--un-border-opacity));}
|
|
270
271
|
.border-transparent{border-color:transparent;}
|
|
271
272
|
.\[\&\>a\]\:hover\:border-\#fff:hover>a{--un-border-opacity:1;border-color:rgb(255 255 255 / var(--un-border-opacity));}
|
|
273
|
+
.focus\:border-\#1E3DE4:focus{--un-border-opacity:1;border-color:rgb(30 61 228 / var(--un-border-opacity));}
|
|
272
274
|
.border-b-\#e8e9ea{--un-border-opacity:1;--un-border-bottom-opacity:var(--un-border-opacity);border-bottom-color:rgb(232 233 234 / var(--un-border-bottom-opacity));}
|
|
273
275
|
.after\:border-l-\#EFF2FA::after{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(239 242 250 / var(--un-border-left-opacity));}
|
|
274
276
|
.rounded{border-radius:0.25rem;}
|
|
@@ -280,6 +282,7 @@
|
|
|
280
282
|
.rounded-0\.2857rem{border-radius:0.2857rem;}
|
|
281
283
|
.rounded-12px{border-radius:12px;}
|
|
282
284
|
.rounded-2px{border-radius:2px;}
|
|
285
|
+
.rounded-3px{border-radius:3px;}
|
|
283
286
|
.rounded-50\%{border-radius:50%;}
|
|
284
287
|
.rounded-full{border-radius:9999px;}
|
|
285
288
|
.rounded-lg{border-radius:0.5rem;}
|