@a-type/ui 1.1.3 → 1.1.5
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/dist/cjs/components/camera/Camera.d.ts +8 -0
- package/dist/cjs/components/camera/Camera.js +30 -8
- package/dist/cjs/components/camera/Camera.js.map +1 -1
- package/dist/cjs/components/camera/Camera.stories.d.ts +9 -1
- package/dist/cjs/components/camera/Camera.stories.js +2 -1
- package/dist/cjs/components/camera/Camera.stories.js.map +1 -1
- package/dist/cjs/components/icon/generated/IconSpritesheet.js +1 -1
- package/dist/cjs/components/icon/generated/IconSpritesheet.js.map +1 -1
- package/dist/cjs/components/icon/generated/iconNames.d.ts +1 -1
- package/dist/cjs/components/icon/generated/iconNames.js +1 -0
- package/dist/cjs/components/icon/generated/iconNames.js.map +1 -1
- package/dist/cjs/components/imageUploader/ImageUploader.js +2 -2
- package/dist/cjs/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/cjs/components/masonry/masonry.d.ts +3 -0
- package/dist/cjs/components/masonry/masonry.js +29 -5
- package/dist/cjs/components/masonry/masonry.js.map +1 -1
- package/dist/cjs/components/masonry/masonry.stories.d.ts +1 -0
- package/dist/cjs/components/masonry/masonry.stories.js +18 -4
- package/dist/cjs/components/masonry/masonry.stories.js.map +1 -1
- package/dist/cjs/components/numberStepper/NumberStepper.d.ts +3 -1
- package/dist/cjs/components/numberStepper/NumberStepper.js +7 -3
- package/dist/cjs/components/numberStepper/NumberStepper.js.map +1 -1
- package/dist/cjs/uno.preset.js +5 -5
- package/dist/css/main.css +6 -6
- package/dist/esm/components/camera/Camera.d.ts +8 -0
- package/dist/esm/components/camera/Camera.js +28 -7
- package/dist/esm/components/camera/Camera.js.map +1 -1
- package/dist/esm/components/camera/Camera.stories.d.ts +9 -1
- package/dist/esm/components/camera/Camera.stories.js +3 -2
- package/dist/esm/components/camera/Camera.stories.js.map +1 -1
- package/dist/esm/components/icon/generated/IconSpritesheet.js +1 -1
- package/dist/esm/components/icon/generated/IconSpritesheet.js.map +1 -1
- package/dist/esm/components/icon/generated/iconNames.d.ts +1 -1
- package/dist/esm/components/icon/generated/iconNames.js +1 -0
- package/dist/esm/components/icon/generated/iconNames.js.map +1 -1
- package/dist/esm/components/imageUploader/ImageUploader.js +3 -3
- package/dist/esm/components/imageUploader/ImageUploader.js.map +1 -1
- package/dist/esm/components/masonry/masonry.d.ts +3 -0
- package/dist/esm/components/masonry/masonry.js +27 -4
- package/dist/esm/components/masonry/masonry.js.map +1 -1
- package/dist/esm/components/masonry/masonry.stories.d.ts +1 -0
- package/dist/esm/components/masonry/masonry.stories.js +17 -3
- package/dist/esm/components/masonry/masonry.stories.js.map +1 -1
- package/dist/esm/components/numberStepper/NumberStepper.d.ts +3 -1
- package/dist/esm/components/numberStepper/NumberStepper.js +7 -3
- package/dist/esm/components/numberStepper/NumberStepper.js.map +1 -1
- package/dist/esm/uno.preset.js +5 -5
- package/package.json +1 -1
- package/src/components/camera/Camera.stories.tsx +6 -12
- package/src/components/camera/Camera.tsx +49 -5
- package/src/components/icon/generated/IconSpritesheet.tsx +6 -0
- package/src/components/icon/generated/iconNames.ts +1 -0
- package/src/components/imageUploader/ImageUploader.tsx +9 -4
- package/src/components/masonry/masonry.stories.tsx +30 -9
- package/src/components/masonry/masonry.tsx +35 -5
- package/src/components/numberStepper/NumberStepper.tsx +12 -2
- package/src/uno.preset.ts +5 -5
|
@@ -111,10 +111,19 @@ class MasonryLayout {
|
|
|
111
111
|
const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
|
|
112
112
|
const children = Array.from(this.container.children);
|
|
113
113
|
children.forEach((child, index) => {
|
|
114
|
-
|
|
114
|
+
let itemTrackSpan = parseInt(child.getAttribute('data-span') || '1');
|
|
115
|
+
if (isNaN(itemTrackSpan) || itemTrackSpan < 1) {
|
|
116
|
+
itemTrackSpan = 1;
|
|
117
|
+
}
|
|
118
|
+
if (itemTrackSpan > this.columns) {
|
|
119
|
+
itemTrackSpan = this.columns;
|
|
120
|
+
}
|
|
121
|
+
const trackIndex = pickTrack(tracks, itemTrackSpan);
|
|
122
|
+
const affectedTracks = tracks.slice(trackIndex, trackIndex + itemTrackSpan);
|
|
115
123
|
const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
|
|
116
|
-
const y =
|
|
117
|
-
const width = columnPercentageWidth
|
|
124
|
+
const y = Math.max(...affectedTracks);
|
|
125
|
+
const width = columnPercentageWidth * itemTrackSpan +
|
|
126
|
+
gapPercentageWidth * (itemTrackSpan - 1);
|
|
118
127
|
child.style.setProperty('position', 'absolute');
|
|
119
128
|
child.style.setProperty('visibility', 'visible');
|
|
120
129
|
child.style.setProperty('width', `${width}%`);
|
|
@@ -124,7 +133,9 @@ class MasonryLayout {
|
|
|
124
133
|
requestAnimationFrame(() => {
|
|
125
134
|
child.classList.add('transition-all');
|
|
126
135
|
});
|
|
127
|
-
|
|
136
|
+
for (let i = 0; i < itemTrackSpan; i++) {
|
|
137
|
+
tracks[trackIndex + i] = y + child.offsetHeight + gap;
|
|
138
|
+
}
|
|
128
139
|
});
|
|
129
140
|
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
130
141
|
}, 100);
|
|
@@ -133,6 +144,15 @@ class MasonryLayout {
|
|
|
133
144
|
this.childSizeObserver = new ResizeObserver(this.handleChildResize);
|
|
134
145
|
}
|
|
135
146
|
}
|
|
147
|
+
function pickTrack(tracks, trackSpan) {
|
|
148
|
+
const subTracks = tracks.slice(0, tracks.length - trackSpan + 1);
|
|
149
|
+
const min = Math.min(...subTracks);
|
|
150
|
+
const index = subTracks.indexOf(min);
|
|
151
|
+
if (index === -1) {
|
|
152
|
+
return 0;
|
|
153
|
+
}
|
|
154
|
+
return index;
|
|
155
|
+
}
|
|
136
156
|
const initialStyle = {
|
|
137
157
|
height: 0,
|
|
138
158
|
position: 'relative',
|
|
@@ -152,4 +172,7 @@ export function Masonry({ className, children, columns = 3, gap = 16, }) {
|
|
|
152
172
|
}, [layout, ref]);
|
|
153
173
|
return (_jsx("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
|
|
154
174
|
}
|
|
175
|
+
export function masonrySpan(span) {
|
|
176
|
+
return { 'data-span': span };
|
|
177
|
+
}
|
|
155
178
|
//# sourceMappingURL=masonry.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,13 +10,27 @@ const meta = {
|
|
|
10
10
|
},
|
|
11
11
|
};
|
|
12
12
|
export default meta;
|
|
13
|
-
const
|
|
13
|
+
const content = (spans) => Array.from({ length: 100 }, (_, i) => {
|
|
14
14
|
const size = 100 + Math.floor(Math.random() * 100);
|
|
15
|
-
|
|
15
|
+
let span = undefined;
|
|
16
|
+
if (spans) {
|
|
17
|
+
if (Math.random() < 0.1) {
|
|
18
|
+
span = 2;
|
|
19
|
+
}
|
|
20
|
+
else if (Math.random() < 0.03) {
|
|
21
|
+
span = 3;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return (_jsx("div", Object.assign({ className: "bg-gray-5 rounded-lg", style: { height: size }, "data-span": span }, { children: size }), i));
|
|
16
25
|
});
|
|
17
26
|
export const Default = {
|
|
18
27
|
render(props) {
|
|
19
|
-
return _jsx(Masonry, Object.assign({}, props, { children:
|
|
28
|
+
return _jsx(Masonry, Object.assign({}, props, { children: content() }));
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
export const WithSpan = {
|
|
32
|
+
render(props) {
|
|
33
|
+
return _jsx(Masonry, Object.assign({}, props, { children: content(true) }));
|
|
20
34
|
},
|
|
21
35
|
};
|
|
22
36
|
//# sourceMappingURL=masonry.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,
|
|
1
|
+
{"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,OAAO,GAAG,CAAC,KAAe,EAAE,EAAE,CACnC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACpC,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,IAAI,IAAI,GAAG,SAAS,CAAC;IACrB,IAAI,KAAK,EAAE;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE;YACxB,IAAI,GAAG,CAAC,CAAC;SACT;aAAM,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE;YAChC,IAAI,GAAG,CAAC,CAAC;SACT;KACD;IAED,OAAO,CACN,4BAEC,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,eACZ,IAAI,gBAEd,IAAI,KALA,CAAC,CAMD,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,EAAE,IAAW,CAAC;IAClD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,CAAC,IAAI,CAAC,IAAW,CAAC;IACtD,CAAC;CACD,CAAC"}
|
|
@@ -8,5 +8,7 @@ export interface NumberStepperProps {
|
|
|
8
8
|
renderValue?: (value: number) => ReactNode;
|
|
9
9
|
className?: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
min?: number;
|
|
12
|
+
max?: number;
|
|
11
13
|
}
|
|
12
|
-
export declare function NumberStepper({ value, onChange, highlightChange, steps, increment: incrementAmount, renderValue, className, disabled, ...rest }: NumberStepperProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function NumberStepper({ value, onChange, highlightChange, steps, increment: incrementAmount, renderValue, className, disabled, min, max, ...rest }: NumberStepperProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -17,7 +17,7 @@ import classNames from 'clsx';
|
|
|
17
17
|
import { Button } from '../button.js';
|
|
18
18
|
export function NumberStepper(_a) {
|
|
19
19
|
var _b;
|
|
20
|
-
var { value, onChange, highlightChange, steps, increment: incrementAmount = 1, renderValue = fractionToText, className, disabled } = _a, rest = __rest(_a, ["value", "onChange", "highlightChange", "steps", "increment", "renderValue", "className", "disabled"]);
|
|
20
|
+
var { value, onChange, highlightChange, steps, increment: incrementAmount = 1, renderValue = fractionToText, className, disabled, min, max } = _a, rest = __rest(_a, ["value", "onChange", "highlightChange", "steps", "increment", "renderValue", "className", "disabled", "min", "max"]);
|
|
21
21
|
const index = (_b = steps === null || steps === void 0 ? void 0 : steps.indexOf(value)) !== null && _b !== void 0 ? _b : 0;
|
|
22
22
|
const increment = () => {
|
|
23
23
|
if (steps) {
|
|
@@ -41,8 +41,12 @@ export function NumberStepper(_a) {
|
|
|
41
41
|
onChange(value - incrementAmount);
|
|
42
42
|
}
|
|
43
43
|
};
|
|
44
|
-
const canIncrement = !disabled &&
|
|
45
|
-
|
|
44
|
+
const canIncrement = !disabled &&
|
|
45
|
+
(steps ? index < steps.length - 1 : true) &&
|
|
46
|
+
(max === undefined || value < max);
|
|
47
|
+
const canDecrement = !disabled &&
|
|
48
|
+
(steps ? index > 0 : true) &&
|
|
49
|
+
(min === undefined || value > min);
|
|
46
50
|
return (_jsxs("div", Object.assign({ className: classNames('layer-components:flex layer-components:items-center layer-components:border-default layer-components:rounded-full layer-components:overflow-hidden layer-components:w-min-content layer-components:flex-shrink-0 layer-components:bg-white layer-components:shadow-sm', disabled &&
|
|
47
51
|
'layer-variants:border-gray-dark-blend layer-variants:bg-transparent layer-variants:shadow-none', {
|
|
48
52
|
'layer-variants:bg-accent-wash layer-variants:color-black': !!highlightChange && value !== 1,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/NumberStepper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/NumberStepper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAetC,MAAM,UAAU,aAAa,CAAC,EAYT;;QAZS,EAC7B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EAAE,eAAe,GAAG,CAAC,EAC9B,WAAW,GAAG,cAAc,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,OAEiB,EADjB,IAAI,cAXsB,oHAY7B,CADO;IAEP,MAAM,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/B,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,CAAC,EAAE;gBAChB,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,YAAY,GACjB,CAAC,QAAQ;QACT,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzC,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;IACpC,MAAM,YAAY,GACjB,CAAC,QAAQ;QACT,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1B,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;IAEpC,OAAO,CACN,6BACC,SAAS,EAAE,UAAU,CACpB,iIAAiI,EACjI,QAAQ;YACP,oEAAoE,EACrE;YACC,6CAA6C,EAC5C,CAAC,CAAC,eAAe,IAAI,KAAK,KAAK,CAAC;SACjC,EACD,SAAS,CACT,IACG,IAAI,eAER,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,SAAS,KAAG,IACL,EACT,4BAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,CAAC,KAAK,CAAC,IAAO,EAC9D,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,QAAQ,KAAG,IACJ,KACJ,CACN,CAAC;AACH,CAAC"}
|
package/dist/esm/uno.preset.js
CHANGED
|
@@ -421,17 +421,17 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
|
|
|
421
421
|
--palette-blue-90: #e3f3ff;
|
|
422
422
|
--palette-blue-80: #c4e7ff;
|
|
423
423
|
--palette-blue-70: #7bd0ff;
|
|
424
|
-
--palette-blue-60: #
|
|
425
|
-
--palette-blue-50: #
|
|
426
|
-
--palette-blue-40: #
|
|
427
|
-
--palette-blue-30: #
|
|
424
|
+
--palette-blue-60: #4cc5f9;
|
|
425
|
+
--palette-blue-50: #18b5ed;
|
|
426
|
+
--palette-blue-40: #0a9acf;
|
|
427
|
+
--palette-blue-30: #077da7;
|
|
428
428
|
--palette-blue-20: #005979;
|
|
429
429
|
--palette-blue-10: #004c69;
|
|
430
430
|
--palette-blue-00: #00354a;
|
|
431
431
|
--palette-purple-90: #f1efff;
|
|
432
432
|
--palette-purple-80: #e0e0ff;
|
|
433
433
|
--palette-purple-70: #bdc2ff;
|
|
434
|
-
--palette-purple-60: #
|
|
434
|
+
--palette-purple-60: #a0a8ff;
|
|
435
435
|
--palette-purple-50: #7c87f3;
|
|
436
436
|
--palette-purple-40: #6d78d7;
|
|
437
437
|
--palette-purple-30: #6068c0;
|
package/package.json
CHANGED
|
@@ -1,23 +1,20 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
import {
|
|
3
|
-
CameraDeviceSelector,
|
|
4
|
-
CameraRoot,
|
|
5
|
-
CameraShutterButton,
|
|
6
|
-
} from './Camera.js';
|
|
2
|
+
import { Camera } from './Camera.js';
|
|
7
3
|
import { useMemo, useState } from 'react';
|
|
8
4
|
|
|
9
5
|
const meta = {
|
|
10
6
|
title: 'Camera',
|
|
7
|
+
component: Camera,
|
|
11
8
|
argTypes: {},
|
|
12
9
|
parameters: {
|
|
13
10
|
controls: { expanded: true },
|
|
14
11
|
},
|
|
15
12
|
args: {},
|
|
16
|
-
} satisfies Meta
|
|
13
|
+
} satisfies Meta<typeof Camera>;
|
|
17
14
|
|
|
18
15
|
export default meta;
|
|
19
16
|
|
|
20
|
-
type Story = StoryObj
|
|
17
|
+
type Story = StoryObj<typeof Camera>;
|
|
21
18
|
|
|
22
19
|
export const Default: Story = {
|
|
23
20
|
render() {
|
|
@@ -40,14 +37,11 @@ function CameraDemo({ facingMode }: { facingMode?: 'user' | 'environment' }) {
|
|
|
40
37
|
|
|
41
38
|
return (
|
|
42
39
|
<div>
|
|
43
|
-
<
|
|
40
|
+
<Camera
|
|
44
41
|
facingMode={facingMode}
|
|
45
42
|
onCapture={setLatest}
|
|
46
43
|
className="w-64 h-64"
|
|
47
|
-
|
|
48
|
-
<CameraShutterButton />
|
|
49
|
-
<CameraDeviceSelector />
|
|
50
|
-
</CameraRoot>
|
|
44
|
+
/>
|
|
51
45
|
{latest && <img src={dataUri} className="w-full" />}
|
|
52
46
|
</div>
|
|
53
47
|
);
|
|
@@ -9,7 +9,7 @@ import {
|
|
|
9
9
|
useRef,
|
|
10
10
|
useState,
|
|
11
11
|
} from 'react';
|
|
12
|
-
import { Button } from '../button.js';
|
|
12
|
+
import { Button, ButtonProps } from '../button.js';
|
|
13
13
|
import { Icon } from '../icon.js';
|
|
14
14
|
import { Select, SelectContent, SelectItem, SelectTrigger } from '../select.js';
|
|
15
15
|
import { Slot } from '@radix-ui/react-slot';
|
|
@@ -20,11 +20,15 @@ const CameraContext = createContext<{
|
|
|
20
20
|
selectedDeviceId: string | undefined;
|
|
21
21
|
selectDeviceId: (id: string) => void;
|
|
22
22
|
devices: MediaDeviceInfo[];
|
|
23
|
+
fullscreen: boolean;
|
|
24
|
+
setFullscreen: (fullscreen: boolean) => void;
|
|
23
25
|
}>({
|
|
24
26
|
triggerCapture: () => {},
|
|
25
27
|
selectedDeviceId: 'default',
|
|
26
28
|
selectDeviceId: () => {},
|
|
27
29
|
devices: [],
|
|
30
|
+
fullscreen: false,
|
|
31
|
+
setFullscreen: () => {},
|
|
28
32
|
});
|
|
29
33
|
|
|
30
34
|
export interface CameraRootProps {
|
|
@@ -62,8 +66,10 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
62
66
|
string | undefined
|
|
63
67
|
>();
|
|
64
68
|
|
|
69
|
+
const cleanupRef = useRef<() => void>();
|
|
65
70
|
useEffect(() => {
|
|
66
71
|
const init = () => {
|
|
72
|
+
cleanupRef.current?.();
|
|
67
73
|
navigator.mediaDevices
|
|
68
74
|
?.getUserMedia({
|
|
69
75
|
video: {
|
|
@@ -73,6 +79,8 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
73
79
|
})
|
|
74
80
|
.then((s) => {
|
|
75
81
|
setStream(s);
|
|
82
|
+
cleanupRef.current = () =>
|
|
83
|
+
s.getTracks().forEach((track) => track.stop());
|
|
76
84
|
});
|
|
77
85
|
};
|
|
78
86
|
init();
|
|
@@ -85,13 +93,12 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
85
93
|
init();
|
|
86
94
|
};
|
|
87
95
|
document.addEventListener('visibilitychange', reconnect);
|
|
88
|
-
}, [selectedDeviceId, facingMode]);
|
|
89
96
|
|
|
90
|
-
useEffect(() => {
|
|
91
97
|
return () => {
|
|
92
|
-
|
|
98
|
+
document.removeEventListener('visibilitychange', reconnect);
|
|
99
|
+
cleanupRef.current?.();
|
|
93
100
|
};
|
|
94
|
-
}, [
|
|
101
|
+
}, [selectedDeviceId, facingMode]);
|
|
95
102
|
|
|
96
103
|
useEffect(() => {
|
|
97
104
|
const video = videoRef.current;
|
|
@@ -142,6 +149,8 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
142
149
|
}
|
|
143
150
|
};
|
|
144
151
|
|
|
152
|
+
const [fullscreen, setFullscreen] = useState(false);
|
|
153
|
+
|
|
145
154
|
return (
|
|
146
155
|
<CameraContext.Provider
|
|
147
156
|
value={{
|
|
@@ -149,12 +158,15 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
|
|
|
149
158
|
triggerCapture,
|
|
150
159
|
selectedDeviceId,
|
|
151
160
|
selectDeviceId: setSelectedDeviceId,
|
|
161
|
+
setFullscreen,
|
|
162
|
+
fullscreen,
|
|
152
163
|
}}
|
|
153
164
|
>
|
|
154
165
|
<div
|
|
155
166
|
ref={ref}
|
|
156
167
|
className={classNames(
|
|
157
168
|
'layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
|
|
169
|
+
fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none',
|
|
158
170
|
className,
|
|
159
171
|
)}
|
|
160
172
|
{...rest}
|
|
@@ -266,6 +278,38 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
|
|
|
266
278
|
);
|
|
267
279
|
};
|
|
268
280
|
|
|
281
|
+
export const CameraFullscreenButton = (props: ButtonProps) => {
|
|
282
|
+
const { setFullscreen, fullscreen } = useContext(CameraContext);
|
|
283
|
+
return (
|
|
284
|
+
<Button
|
|
285
|
+
{...props}
|
|
286
|
+
size="icon"
|
|
287
|
+
color="ghost"
|
|
288
|
+
className="absolute top-2 right-2 text-white"
|
|
289
|
+
onClick={() => setFullscreen(!fullscreen)}
|
|
290
|
+
>
|
|
291
|
+
<Icon name={fullscreen ? 'x' : 'maximize'} />
|
|
292
|
+
</Button>
|
|
293
|
+
);
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
const CameraBase = (props: CameraRootProps) => {
|
|
297
|
+
return (
|
|
298
|
+
<CameraRoot {...props}>
|
|
299
|
+
<CameraShutterButton />
|
|
300
|
+
<CameraDeviceSelector />
|
|
301
|
+
<CameraFullscreenButton />
|
|
302
|
+
</CameraRoot>
|
|
303
|
+
);
|
|
304
|
+
};
|
|
305
|
+
|
|
306
|
+
export const Camera = Object.assign(CameraBase, {
|
|
307
|
+
Root: CameraRoot,
|
|
308
|
+
ShutterButton: CameraShutterButton,
|
|
309
|
+
DeviceSelector: CameraDeviceSelector,
|
|
310
|
+
FullscreenButton: CameraFullscreenButton,
|
|
311
|
+
});
|
|
312
|
+
|
|
269
313
|
function dataURItoFile(dataURI: string) {
|
|
270
314
|
// convert base64/URLEncoded data component to raw binary data held in a string
|
|
271
315
|
var byteString;
|
|
@@ -859,6 +859,12 @@ export const IconSpritesheet = (props: any) => (
|
|
|
859
859
|
fill="currentColor"
|
|
860
860
|
/>
|
|
861
861
|
</symbol>
|
|
862
|
+
<symbol id="icon-lightbulb" viewBox="0 0 15 15">
|
|
863
|
+
<path
|
|
864
|
+
d="M9.00001 9C10 8 9.88256 8.11747 10.5 7.5C13.0001 5 10.5564 1 7.50001 1C4.44367 1 2 4.5 4.50002 7.5C5.05906 8.17084 5 8 6.00001 9M9.00001 9H6.00001M9.00001 9C9.00001 9.24467 9.00001 9.5492 9.00001 9.86966M6.00001 9C6.00001 9.49274 6 10.3806 6 11M9.00001 9.86966L6 11M9.00001 9.86966C9.00001 10.2903 9.00001 10.7383 9.00001 11.1144M6 11C6 11.6377 6.00001 12 6.00001 12C6.00001 12 6.02576 12.1115 6.10733 12.2601M9.00001 11.1144C9.00001 11.623 9.00001 12 9.00001 12C9.00001 12 8.76924 13 7.50001 13C6.65469 13 6.27 12.5564 6.10733 12.2601M9.00001 11.1144C7.87035 11.5618 7.23699 11.8127 6.10733 12.2601M7.5 8.5V6.5M7.5 6.5C7.5 6.5 6.1754 6.21854 6 5.5C5.80355 4.6952 6.67158 3.99999 7.50001 4C8.32844 4.00001 9.17805 4.69094 9 5.5C8.84443 6.20693 7.5 6.5 7.5 6.5Z"
|
|
865
|
+
stroke="currentColor"
|
|
866
|
+
/>
|
|
867
|
+
</symbol>
|
|
862
868
|
</defs>
|
|
863
869
|
</svg>
|
|
864
870
|
);
|
|
@@ -6,6 +6,7 @@ import { Icon } from '../icon.js';
|
|
|
6
6
|
import { Button } from '../button.js';
|
|
7
7
|
import {
|
|
8
8
|
CameraDeviceSelector,
|
|
9
|
+
CameraFullscreenButton,
|
|
9
10
|
CameraRoot,
|
|
10
11
|
CameraShutterButton,
|
|
11
12
|
} from '../camera.js';
|
|
@@ -113,7 +114,10 @@ export function ImageUploader({
|
|
|
113
114
|
|
|
114
115
|
return (
|
|
115
116
|
<div
|
|
116
|
-
className={classNames(
|
|
117
|
+
className={classNames(
|
|
118
|
+
'relative overflow-hidden rounded-lg',
|
|
119
|
+
rest.className,
|
|
120
|
+
)}
|
|
117
121
|
onDragEnter={onDragEnter}
|
|
118
122
|
onDragLeave={onDragLeave}
|
|
119
123
|
onDragOver={onDragOver}
|
|
@@ -165,13 +169,14 @@ export function ImageUploader({
|
|
|
165
169
|
>
|
|
166
170
|
<CameraShutterButton />
|
|
167
171
|
<CameraDeviceSelector />
|
|
172
|
+
<CameraFullscreenButton />
|
|
168
173
|
<Button
|
|
169
174
|
onClick={() => setCameraOpen(false)}
|
|
170
175
|
color="ghost"
|
|
171
|
-
size="
|
|
172
|
-
className="text-white absolute top-2
|
|
176
|
+
size="small"
|
|
177
|
+
className="text-white absolute top-2 left-2"
|
|
173
178
|
>
|
|
174
|
-
|
|
179
|
+
Cancel
|
|
175
180
|
</Button>
|
|
176
181
|
</CameraRoot>
|
|
177
182
|
)}
|
|
@@ -14,17 +14,38 @@ export default meta;
|
|
|
14
14
|
|
|
15
15
|
type Story = StoryObj<typeof Masonry>;
|
|
16
16
|
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
})
|
|
17
|
+
const content = (spans?: boolean) =>
|
|
18
|
+
Array.from({ length: 100 }, (_, i) => {
|
|
19
|
+
const size = 100 + Math.floor(Math.random() * 100);
|
|
20
|
+
let span = undefined;
|
|
21
|
+
if (spans) {
|
|
22
|
+
if (Math.random() < 0.1) {
|
|
23
|
+
span = 2;
|
|
24
|
+
} else if (Math.random() < 0.03) {
|
|
25
|
+
span = 3;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<div
|
|
31
|
+
key={i}
|
|
32
|
+
className="bg-gray-5 rounded-lg"
|
|
33
|
+
style={{ height: size }}
|
|
34
|
+
data-span={span}
|
|
35
|
+
>
|
|
36
|
+
{size}
|
|
37
|
+
</div>
|
|
38
|
+
);
|
|
39
|
+
});
|
|
25
40
|
|
|
26
41
|
export const Default: Story = {
|
|
27
42
|
render(props) {
|
|
28
|
-
return <Masonry {...props}>{
|
|
43
|
+
return <Masonry {...props}>{content()}</Masonry>;
|
|
44
|
+
},
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
export const WithSpan: Story = {
|
|
48
|
+
render(props) {
|
|
49
|
+
return <Masonry {...props}>{content(true)}</Masonry>;
|
|
29
50
|
},
|
|
30
51
|
};
|
|
@@ -128,7 +128,7 @@ class MasonryLayout {
|
|
|
128
128
|
return;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
const tracks = new Array(this.columns).fill(0);
|
|
131
|
+
const tracks: number[] = new Array(this.columns).fill(0);
|
|
132
132
|
const gap = this.config.gap;
|
|
133
133
|
// percentage-based width and x position so that items automatically
|
|
134
134
|
// layout correctly when the container is resized (as long as columns
|
|
@@ -141,10 +141,24 @@ class MasonryLayout {
|
|
|
141
141
|
|
|
142
142
|
const children = Array.from(this.container.children) as HTMLElement[];
|
|
143
143
|
children.forEach((child, index) => {
|
|
144
|
-
|
|
144
|
+
let itemTrackSpan = parseInt(child.getAttribute('data-span') || '1');
|
|
145
|
+
if (isNaN(itemTrackSpan) || itemTrackSpan < 1) {
|
|
146
|
+
itemTrackSpan = 1;
|
|
147
|
+
}
|
|
148
|
+
if (itemTrackSpan > this.columns) {
|
|
149
|
+
itemTrackSpan = this.columns;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const trackIndex = pickTrack(tracks, itemTrackSpan);
|
|
153
|
+
const affectedTracks = tracks.slice(
|
|
154
|
+
trackIndex,
|
|
155
|
+
trackIndex + itemTrackSpan,
|
|
156
|
+
);
|
|
145
157
|
const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
|
|
146
|
-
const y =
|
|
147
|
-
const width =
|
|
158
|
+
const y = Math.max(...affectedTracks);
|
|
159
|
+
const width =
|
|
160
|
+
columnPercentageWidth * itemTrackSpan +
|
|
161
|
+
gapPercentageWidth * (itemTrackSpan - 1);
|
|
148
162
|
child.style.setProperty('position', 'absolute');
|
|
149
163
|
child.style.setProperty('visibility', 'visible');
|
|
150
164
|
child.style.setProperty('width', `${width}%`);
|
|
@@ -154,12 +168,24 @@ class MasonryLayout {
|
|
|
154
168
|
requestAnimationFrame(() => {
|
|
155
169
|
child.classList.add('transition-all');
|
|
156
170
|
});
|
|
157
|
-
|
|
171
|
+
for (let i = 0; i < itemTrackSpan; i++) {
|
|
172
|
+
tracks[trackIndex + i] = y + child.offsetHeight + gap;
|
|
173
|
+
}
|
|
158
174
|
});
|
|
159
175
|
this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
|
|
160
176
|
}, 100);
|
|
161
177
|
}
|
|
162
178
|
|
|
179
|
+
function pickTrack(tracks: number[], trackSpan: number) {
|
|
180
|
+
const subTracks = tracks.slice(0, tracks.length - trackSpan + 1);
|
|
181
|
+
const min = Math.min(...subTracks);
|
|
182
|
+
const index = subTracks.indexOf(min);
|
|
183
|
+
if (index === -1) {
|
|
184
|
+
return 0;
|
|
185
|
+
}
|
|
186
|
+
return index;
|
|
187
|
+
}
|
|
188
|
+
|
|
163
189
|
export interface MasonryProps {
|
|
164
190
|
children: ReactNode;
|
|
165
191
|
className?: string;
|
|
@@ -197,3 +223,7 @@ export function Masonry({
|
|
|
197
223
|
</div>
|
|
198
224
|
);
|
|
199
225
|
}
|
|
226
|
+
|
|
227
|
+
export function masonrySpan(span: number) {
|
|
228
|
+
return { 'data-span': span };
|
|
229
|
+
}
|
|
@@ -13,6 +13,8 @@ export interface NumberStepperProps {
|
|
|
13
13
|
renderValue?: (value: number) => ReactNode;
|
|
14
14
|
className?: string;
|
|
15
15
|
disabled?: boolean;
|
|
16
|
+
min?: number;
|
|
17
|
+
max?: number;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
export function NumberStepper({
|
|
@@ -24,6 +26,8 @@ export function NumberStepper({
|
|
|
24
26
|
renderValue = fractionToText,
|
|
25
27
|
className,
|
|
26
28
|
disabled,
|
|
29
|
+
min,
|
|
30
|
+
max,
|
|
27
31
|
...rest
|
|
28
32
|
}: NumberStepperProps) {
|
|
29
33
|
const index = steps?.indexOf(value) ?? 0;
|
|
@@ -50,8 +54,14 @@ export function NumberStepper({
|
|
|
50
54
|
}
|
|
51
55
|
};
|
|
52
56
|
|
|
53
|
-
const canIncrement =
|
|
54
|
-
|
|
57
|
+
const canIncrement =
|
|
58
|
+
!disabled &&
|
|
59
|
+
(steps ? index < steps.length - 1 : true) &&
|
|
60
|
+
(max === undefined || value < max);
|
|
61
|
+
const canDecrement =
|
|
62
|
+
!disabled &&
|
|
63
|
+
(steps ? index > 0 : true) &&
|
|
64
|
+
(min === undefined || value > min);
|
|
55
65
|
|
|
56
66
|
return (
|
|
57
67
|
<div
|
package/src/uno.preset.ts
CHANGED
|
@@ -454,17 +454,17 @@ export default function presetAglio({
|
|
|
454
454
|
--palette-blue-90: #e3f3ff;
|
|
455
455
|
--palette-blue-80: #c4e7ff;
|
|
456
456
|
--palette-blue-70: #7bd0ff;
|
|
457
|
-
--palette-blue-60: #
|
|
458
|
-
--palette-blue-50: #
|
|
459
|
-
--palette-blue-40: #
|
|
460
|
-
--palette-blue-30: #
|
|
457
|
+
--palette-blue-60: #4cc5f9;
|
|
458
|
+
--palette-blue-50: #18b5ed;
|
|
459
|
+
--palette-blue-40: #0a9acf;
|
|
460
|
+
--palette-blue-30: #077da7;
|
|
461
461
|
--palette-blue-20: #005979;
|
|
462
462
|
--palette-blue-10: #004c69;
|
|
463
463
|
--palette-blue-00: #00354a;
|
|
464
464
|
--palette-purple-90: #f1efff;
|
|
465
465
|
--palette-purple-80: #e0e0ff;
|
|
466
466
|
--palette-purple-70: #bdc2ff;
|
|
467
|
-
--palette-purple-60: #
|
|
467
|
+
--palette-purple-60: #a0a8ff;
|
|
468
468
|
--palette-purple-50: #7c87f3;
|
|
469
469
|
--palette-purple-40: #6d78d7;
|
|
470
470
|
--palette-purple-30: #6068c0;
|