@zag-js/progress
Advanced tools
Comparing version 0.0.0-dev-20231130130815 to 0.0.0-dev-20231130202253
@@ -6,3 +6,3 @@ import * as _zag_js_anatomy from '@zag-js/anatomy'; | ||
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "track" | "range" | "valueText" | "indicator">; | ||
declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "track" | "range" | "valueText" | "indicator" | "circle" | "circleTrack" | "circleRange">; | ||
@@ -54,2 +54,7 @@ type ProgressState = "indeterminate" | "loading" | "complete"; | ||
isHorizontal: boolean; | ||
/** | ||
* @computed | ||
* Whether the progress bar is in RTL mode. | ||
*/ | ||
isRtl: boolean; | ||
}>; | ||
@@ -89,2 +94,5 @@ type UserDefinedContext = RequiredBy<PublicContext, "id">; | ||
getIndicatorProps(props: IndicatorProps): T["element"]; | ||
circleProps: T["svg"]; | ||
circleTrackProps: T["circle"]; | ||
circleRangeProps: T["circle"]; | ||
} | ||
@@ -91,0 +99,0 @@ |
@@ -31,3 +31,13 @@ "use strict"; | ||
var import_anatomy = require("@zag-js/anatomy"); | ||
var anatomy = (0, import_anatomy.createAnatomy)("progress").parts("root", "label", "track", "range", "valueText", "indicator"); | ||
var anatomy = (0, import_anatomy.createAnatomy)("progress").parts( | ||
"root", | ||
"label", | ||
"track", | ||
"range", | ||
"valueText", | ||
"indicator", | ||
"circle", | ||
"circleTrack", | ||
"circleRange" | ||
); | ||
var parts = anatomy.build(); | ||
@@ -40,3 +50,4 @@ | ||
getTrackId: (ctx) => `progress-${ctx.id}-track`, | ||
getLabelId: (ctx) => `progress-${ctx.id}-label` | ||
getLabelId: (ctx) => `progress-${ctx.id}-label`, | ||
getCircleId: (ctx) => `progress-${ctx.id}-circle` | ||
}); | ||
@@ -54,2 +65,13 @@ | ||
const progressState = getProgressState(value, max); | ||
const progressbarProps = { | ||
role: "progressbar", | ||
"aria-label": translations.value({ value, max, percent }), | ||
"data-max": max, | ||
"aria-valuemin": 0, | ||
"aria-valuemax": max, | ||
"aria-valuenow": value ?? void 0, | ||
"data-orientation": orientation, | ||
"data-state": progressState | ||
}; | ||
const circleProps = getCircleProps(state.context); | ||
return { | ||
@@ -73,3 +95,3 @@ value, | ||
style: { | ||
"--progress-percent": indeterminate ? void 0 : `${percent}%` | ||
"--percent": indeterminate ? void 0 : percent | ||
} | ||
@@ -83,14 +105,2 @@ }), | ||
}), | ||
trackProps: normalize.element({ | ||
dir: state.context.dir, | ||
...parts.track.attrs, | ||
id: dom.getTrackId(state.context), | ||
role: "progressbar", | ||
"aria-label": translations.value({ value, max, percent }), | ||
"data-max": max, | ||
"aria-valuemin": 0, | ||
"aria-valuemax": max, | ||
"aria-valuenow": value ?? void 0, | ||
"data-orientation": orientation | ||
}), | ||
valueTextProps: normalize.element({ | ||
@@ -101,2 +111,8 @@ dir: state.context.dir, | ||
}), | ||
trackProps: normalize.element({ | ||
dir: state.context.dir, | ||
id: dom.getTrackId(state.context), | ||
...parts.track.attrs, | ||
...progressbarProps | ||
}), | ||
rangeProps: normalize.element({ | ||
@@ -111,2 +127,21 @@ dir: state.context.dir, | ||
}), | ||
circleProps: normalize.element({ | ||
dir: state.context.dir, | ||
id: dom.getCircleId(state.context), | ||
...parts.circle.attrs, | ||
...progressbarProps, | ||
...circleProps.root | ||
}), | ||
circleTrackProps: normalize.element({ | ||
dir: state.context.dir, | ||
"data-orientation": orientation, | ||
...parts.circleTrack.attrs, | ||
...circleProps.track | ||
}), | ||
circleRangeProps: normalize.element({ | ||
dir: state.context.dir, | ||
...parts.circleRange.attrs, | ||
...circleProps.range, | ||
"data-state": progressState | ||
}), | ||
getIndicatorProps(props) { | ||
@@ -125,2 +160,31 @@ return normalize.element({ | ||
} | ||
function getCircleProps(ctx) { | ||
const determinant = ctx.isIndeterminate ? void 0 : ctx.percent * 2.64; | ||
const circleProps = { | ||
style: { | ||
cx: "50", | ||
cy: "50", | ||
r: "42", | ||
fill: "transparent", | ||
strokeWidth: "var(--thickness)" | ||
} | ||
}; | ||
return { | ||
root: { | ||
viewBox: "0 0 100 100", | ||
style: { | ||
width: "var(--size)", | ||
height: "var(--size)" | ||
} | ||
}, | ||
track: circleProps, | ||
range: { | ||
style: { | ||
...circleProps.style, | ||
strokeDashoffset: 66, | ||
strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : void 0 | ||
} | ||
} | ||
}; | ||
} | ||
@@ -151,3 +215,4 @@ // src/progress.machine.ts | ||
isAtMax: (ctx2) => ctx2.value === ctx2.max, | ||
isHorizontal: (ctx2) => ctx2.orientation === "horizontal" | ||
isHorizontal: (ctx2) => ctx2.orientation === "horizontal", | ||
isRtl: (ctx2) => ctx2.dir === "rtl" | ||
}, | ||
@@ -154,0 +219,0 @@ states: { |
{ | ||
"name": "@zag-js/progress", | ||
"version": "0.0.0-dev-20231130130815", | ||
"version": "0.0.0-dev-20231130202253", | ||
"description": "Core logic for the progress widget implemented as a state machine", | ||
@@ -31,7 +31,7 @@ "keywords": [ | ||
"dependencies": { | ||
"@zag-js/anatomy": "0.0.0-dev-20231130130815", | ||
"@zag-js/core": "0.0.0-dev-20231130130815", | ||
"@zag-js/dom-query": "0.0.0-dev-20231130130815", | ||
"@zag-js/utils": "0.0.0-dev-20231130130815", | ||
"@zag-js/types": "0.0.0-dev-20231130130815" | ||
"@zag-js/anatomy": "0.0.0-dev-20231130202253", | ||
"@zag-js/core": "0.0.0-dev-20231130202253", | ||
"@zag-js/dom-query": "0.0.0-dev-20231130202253", | ||
"@zag-js/utils": "0.0.0-dev-20231130202253", | ||
"@zag-js/types": "0.0.0-dev-20231130202253" | ||
}, | ||
@@ -38,0 +38,0 @@ "devDependencies": { |
import { createAnatomy } from "@zag-js/anatomy" | ||
export const anatomy = createAnatomy("progress").parts("root", "label", "track", "range", "valueText", "indicator") | ||
export const anatomy = createAnatomy("progress").parts( | ||
"root", | ||
"label", | ||
"track", | ||
"range", | ||
"valueText", | ||
"indicator", | ||
"circle", | ||
"circleTrack", | ||
"circleRange", | ||
) | ||
export const parts = anatomy.build() |
import type { NormalizeProps, PropTypes } from "@zag-js/types" | ||
import { parts } from "./progress.anatomy" | ||
import type { MachineApi, ProgressState, Send, State } from "./progress.types" | ||
import { dom } from "./progress.dom" | ||
import type { MachineApi, MachineContext, ProgressState, Send, State } from "./progress.types" | ||
@@ -17,2 +17,15 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> { | ||
const progressbarProps = { | ||
role: "progressbar", | ||
"aria-label": translations.value({ value, max, percent }), | ||
"data-max": max, | ||
"aria-valuemin": 0, | ||
"aria-valuemax": max, | ||
"aria-valuenow": value ?? undefined, | ||
"data-orientation": orientation, | ||
"data-state": progressState, | ||
} | ||
const circleProps = getCircleProps(state.context) | ||
return { | ||
@@ -37,3 +50,3 @@ value, | ||
style: { | ||
"--progress-percent": indeterminate ? undefined : `${percent}%`, | ||
"--percent": indeterminate ? undefined : percent, | ||
}, | ||
@@ -49,15 +62,2 @@ }), | ||
trackProps: normalize.element({ | ||
dir: state.context.dir, | ||
...parts.track.attrs, | ||
id: dom.getTrackId(state.context), | ||
role: "progressbar", | ||
"aria-label": translations.value({ value, max, percent }), | ||
"data-max": max, | ||
"aria-valuemin": 0, | ||
"aria-valuemax": max, | ||
"aria-valuenow": value ?? undefined, | ||
"data-orientation": orientation, | ||
}), | ||
valueTextProps: normalize.element({ | ||
@@ -69,2 +69,9 @@ dir: state.context.dir, | ||
trackProps: normalize.element({ | ||
dir: state.context.dir, | ||
id: dom.getTrackId(state.context), | ||
...parts.track.attrs, | ||
...progressbarProps, | ||
}), | ||
rangeProps: normalize.element({ | ||
@@ -80,2 +87,24 @@ dir: state.context.dir, | ||
circleProps: normalize.element({ | ||
dir: state.context.dir, | ||
id: dom.getCircleId(state.context), | ||
...parts.circle.attrs, | ||
...progressbarProps, | ||
...circleProps.root, | ||
}), | ||
circleTrackProps: normalize.element({ | ||
dir: state.context.dir, | ||
"data-orientation": orientation, | ||
...parts.circleTrack.attrs, | ||
...circleProps.track, | ||
}), | ||
circleRangeProps: normalize.element({ | ||
dir: state.context.dir, | ||
...parts.circleRange.attrs, | ||
...circleProps.range, | ||
"data-state": progressState, | ||
}), | ||
getIndicatorProps(props) { | ||
@@ -95,1 +124,31 @@ return normalize.element({ | ||
} | ||
function getCircleProps(ctx: MachineContext) { | ||
const determinant = ctx.isIndeterminate ? undefined : ctx.percent * 2.64 | ||
const circleProps = { | ||
style: { | ||
cx: "50", | ||
cy: "50", | ||
r: "42", | ||
fill: "transparent", | ||
strokeWidth: "var(--thickness)", | ||
}, | ||
} | ||
return { | ||
root: { | ||
viewBox: "0 0 100 100", | ||
style: { | ||
width: "var(--size)", | ||
height: "var(--size)", | ||
}, | ||
}, | ||
track: circleProps, | ||
range: { | ||
style: { | ||
...circleProps.style, | ||
strokeDashoffset: 66, | ||
strokeDasharray: determinant != null ? `${determinant} ${264 - determinant}` : undefined, | ||
}, | ||
}, | ||
} | ||
} |
@@ -8,2 +8,3 @@ import { createScope } from "@zag-js/dom-query" | ||
getLabelId: (ctx: Ctx) => `progress-${ctx.id}-label`, | ||
getCircleId: (ctx: Ctx) => `progress-${ctx.id}-circle`, | ||
}) |
@@ -27,2 +27,3 @@ import { createMachine } from "@zag-js/core" | ||
isHorizontal: (ctx) => ctx.orientation === "horizontal", | ||
isRtl: (ctx) => ctx.dir === "rtl", | ||
}, | ||
@@ -29,0 +30,0 @@ states: { |
@@ -61,2 +61,7 @@ import type { StateMachine as S } from "@zag-js/core" | ||
isHorizontal: boolean | ||
/** | ||
* @computed | ||
* Whether the progress bar is in RTL mode. | ||
*/ | ||
isRtl: boolean | ||
}> | ||
@@ -103,2 +108,5 @@ | ||
getIndicatorProps(props: IndicatorProps): T["element"] | ||
circleProps: T["svg"] | ||
circleTrackProps: T["circle"] | ||
circleRangeProps: T["circle"] | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
55634
872
+ Added@zag-js/anatomy@0.0.0-dev-20231130202253(transitive)
+ Added@zag-js/core@0.0.0-dev-20231130202253(transitive)
+ Added@zag-js/dom-query@0.0.0-dev-20231130202253(transitive)
+ Added@zag-js/store@0.0.0-dev-20231130202253(transitive)
+ Added@zag-js/types@0.0.0-dev-20231130202253(transitive)
+ Added@zag-js/utils@0.0.0-dev-20231130202253(transitive)
- Removed@zag-js/anatomy@0.0.0-dev-20231130130815(transitive)
- Removed@zag-js/core@0.0.0-dev-20231130130815(transitive)
- Removed@zag-js/dom-query@0.0.0-dev-20231130130815(transitive)
- Removed@zag-js/store@0.0.0-dev-20231130130815(transitive)
- Removed@zag-js/types@0.0.0-dev-20231130130815(transitive)
- Removed@zag-js/utils@0.0.0-dev-20231130130815(transitive)