@webx-ui/core 0.13.0 → 0.14.1

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.
@@ -19,10 +19,10 @@ export declare const builtinIcons: {
19
19
  readonly search: "<circle cx=\"11\" cy=\"11\" r=\"6.5\"/><path d=\"m16 16 4.5 4.5\"/>";
20
20
  readonly filter: "<path d=\"M4 5.5h16l-6.2 7.2v5.1l-3.6 2v-7.1z\"/>";
21
21
  readonly crop: "<path d=\"M6.5 2.5v13a2 2 0 0 0 2 2h13\"/><path d=\"M2.5 6.5h13a2 2 0 0 1 2 2v13\"/>";
22
- readonly 'rotate-left': "<path d=\"M19.4 13.8A7.5 7.5 0 1 0 12 5\"/><path d=\"M14.3 2.9 12 5l2.3 2.1\"/>";
23
- readonly 'rotate-right': "<path d=\"M4.6 13.8A7.5 7.5 0 1 1 12 5\"/><path d=\"M9.7 2.9 12 5l-2.3 2.1\"/>";
24
- readonly 'flip-horizontal': "<path d=\"M12 3v18\" stroke-dasharray=\"3 3\"/><path d=\"M9.2 7.2v9.6L3.6 12z\"/><path d=\"M14.8 7.2v9.6L20.4 12z\"/>";
25
- readonly 'flip-vertical': "<path d=\"M3 12h18\" stroke-dasharray=\"3 3\"/><path d=\"M7.2 9.2h9.6L12 3.6z\"/><path d=\"M7.2 14.8h9.6L12 20.4z\"/>";
22
+ readonly 'rotate-left': "<path d=\"M4.5 9.5A8 8 0 1 1 4 13.5\"/><path d=\"M9.5 9.5h-5v-5\"/>";
23
+ readonly 'rotate-right': "<path d=\"M19.5 9.5A8 8 0 1 0 20 13.5\"/><path d=\"M14.5 9.5h5v-5\"/>";
24
+ readonly 'flip-horizontal': "<path d=\"M12 3.5v17\" stroke-dasharray=\"2.5 2.5\"/><path d=\"M9.5 7.5v9L4 14.5v-5z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M14.5 7.5v9l5.5-2v-5z\"/>";
25
+ readonly 'flip-vertical': "<path d=\"M3.5 12h17\" stroke-dasharray=\"2.5 2.5\"/><path d=\"M7.5 9.5h9L14.5 4h-5z\" fill=\"currentColor\" stroke=\"none\"/><path d=\"M7.5 14.5h9L14.5 20h-5z\"/>";
26
26
  readonly refresh: "<path d=\"M4 12a8 8 0 0 1 13.7-5.6L20 8.5\"/><path d=\"M20 4.5v4h-4\"/><path d=\"M20 12a8 8 0 0 1-13.7 5.6L4 15.5\"/><path d=\"M4 19.5v-4h4\"/>";
27
27
  readonly upload: "<path d=\"M12 16V4m0 0-4.5 4.5M12 4l4.5 4.5\"/><path d=\"M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15\"/>";
28
28
  readonly download: "<path d=\"M12 4v12m0 0-4.5-4.5M12 16l4.5-4.5\"/><path d=\"M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15\"/>";
@@ -33,6 +33,7 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
33
33
  footer: boolean;
34
34
  background: string;
35
35
  format: "auto" | "image/jpeg" | "image/png" | "image/webp";
36
+ filters: boolean;
36
37
  resizable: boolean;
37
38
  minSize: number;
38
39
  maxWidth: number;
@@ -54,7 +55,15 @@ declare const _default: import('vue').DefineComponent<ImageEditorProps, {
54
55
  flipVerticalLabel: string;
55
56
  ratioLabel: string;
56
57
  cropLabel: string;
58
+ outputLabel: string;
59
+ outputHint: string;
57
60
  widthLabel: string;
61
+ heightLabel: string;
62
+ adjustLabel: string;
63
+ brightnessLabel: string;
64
+ contrastLabel: string;
65
+ saturationLabel: string;
66
+ monoLabel: string;
58
67
  freeLabel: string;
59
68
  originalLabel: string;
60
69
  errorText: string;
@@ -0,0 +1,23 @@
1
+ import { ImageEditorAdjustments } from './types';
2
+ /** Nothing done to the picture: the reading every slider starts at. */
3
+ export declare const NEUTRAL: ImageEditorAdjustments;
4
+ export declare function isNeutral(adjust: ImageEditorAdjustments): boolean;
5
+ /**
6
+ * The adjustments as a CSS `filter` — the same string the `<img>` is shown through and
7
+ * the canvas is drawn under, which is what keeps the preview honest.
8
+ *
9
+ * Order matters and is the order a reader expects: lighten, then stretch the contrast,
10
+ * then the colour, and black-and-white last so that it wins over whatever the saturation
11
+ * slider was left at.
12
+ */
13
+ export declare function filterString(adjust: ImageEditorAdjustments): string;
14
+ /**
15
+ * The same arithmetic by hand, for a browser whose canvas has no `filter`.
16
+ *
17
+ * Safari only learned `ctx.filter` in 16.4, and where it is missing it is missing
18
+ * silently: the picture on screen is adjusted, the file that comes out is not. Doing the
19
+ * pass ourselves is the difference between a wrong file and a slow one.
20
+ *
21
+ * Written over the pixels in place, in the order `filterString` composes them.
22
+ */
23
+ export declare function applyAdjustments(pixels: Uint8ClampedArray, adjust: ImageEditorAdjustments): void;
@@ -1,3 +1,4 @@
1
1
  export { default as WxImageEditor } from './ImageEditor';
2
2
  export { ratioLabelFor } from './crop';
3
+ export { filterString } from './filters';
3
4
  export type * from './types';
@@ -15,6 +15,18 @@ export interface ImageEditorRatioOption {
15
15
  /** Derived from the number when it is left out — `1.7778` reads as `16:9`. */
16
16
  label?: string;
17
17
  }
18
+ /**
19
+ * The adjustments, as percentages of what the picture already is: 100 leaves it alone.
20
+ * They are the four a photograph for a website actually wants, and no more — a preset is
21
+ * a name for a set of these numbers, and can be built on top without the editor knowing.
22
+ */
23
+ export interface ImageEditorAdjustments {
24
+ brightness: number;
25
+ contrast: number;
26
+ saturation: number;
27
+ /** Black and white, which overrules whatever the saturation is set to. */
28
+ mono: boolean;
29
+ }
18
30
  /** What the editor hands over. Nothing is uploaded; this is a blob and its measurements. */
19
31
  export interface ImageEditorResult {
20
32
  blob: Blob;
@@ -33,6 +45,10 @@ export interface ImageEditorResult {
33
45
  rotation: number;
34
46
  flipX: boolean;
35
47
  flipY: boolean;
48
+ /** The adjustments as they stood, and the CSS `filter` that says the same thing. */
49
+ adjustments: ImageEditorAdjustments;
50
+ /** Empty when the picture was left alone. A server can apply the same numbers. */
51
+ filter: string;
36
52
  }
37
53
  export interface ImageEditorProps {
38
54
  /** The picture: a URL, or the `File` an upload field just handed you. */
@@ -55,8 +71,13 @@ export interface ImageEditorProps {
55
71
  rotatable?: boolean;
56
72
  /** Mirroring, across and down. */
57
73
  flippable?: boolean;
58
- /** Offers the output size — the field that scales the cut-out down before it is written. */
74
+ /** Offers the output size — the fields that scale the cut-out down before it is written. */
59
75
  resizable?: boolean;
76
+ /**
77
+ * Offers the adjustments: brightness, contrast, saturation and black-and-white, behind
78
+ * one button. Off by default, so an editor asked for as a cropper stays one.
79
+ */
80
+ filters?: boolean;
60
81
  /** Largest output, in pixels. A bigger crop is scaled down to fit inside it. */
61
82
  maxWidth?: number;
62
83
  maxHeight?: number;
@@ -93,8 +114,17 @@ export interface ImageEditorProps {
93
114
  /** Accessible name of the ratio picker, and of the crop box itself. */
94
115
  ratioLabel?: string;
95
116
  cropLabel?: string;
96
- /** The output-size field. */
117
+ /** The output-size row: its caption, the tip on that caption, and the two fields. */
118
+ outputLabel?: string;
119
+ outputHint?: string;
97
120
  widthLabel?: string;
121
+ heightLabel?: string;
122
+ /** The adjustments: the button, and the four things inside its panel. */
123
+ adjustLabel?: string;
124
+ brightnessLabel?: string;
125
+ contrastLabel?: string;
126
+ saturationLabel?: string;
127
+ monoLabel?: string;
98
128
  freeLabel?: string;
99
129
  originalLabel?: string;
100
130
  /** Shown in place of the picture when it will not load. */
@@ -29,8 +29,8 @@ declare const __VLS_component: import('vue').DefineComponent<ProgressProps, {},
29
29
  max: number;
30
30
  indeterminate: boolean;
31
31
  formatter: (value: number, max: number) => string;
32
- thickness: number;
33
32
  showValue: boolean;
33
+ thickness: number;
34
34
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
35
35
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
36
36
  export default _default;
@@ -19,8 +19,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
19
19
  range: boolean;
20
20
  min: number;
21
21
  step: number;
22
+ minStepsBetweenThumbs: number;
22
23
  showValue: boolean;
23
24
  marks: Record<number, string>;
24
- minStepsBetweenThumbs: number;
25
25
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
26
26
  export default _default;
@@ -14,9 +14,9 @@ declare const __VLS_component: import('vue').DefineComponent<TextProps, {}, {},
14
14
  tone: import('./types').TextTone;
15
15
  align: import('./types').TextAlign;
16
16
  truncate: boolean | number;
17
+ mono: boolean;
17
18
  weight: import('./types').TextWeight;
18
19
  italic: boolean;
19
- mono: boolean;
20
20
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
21
21
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
22
22
  export default _default;