@zag-js/clipboard 0.69.0 → 0.71.0
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/index.js +28 -70
- package/dist/index.mjs +8 -25
- package/package.json +7 -8
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
- package/src/clipboard.anatomy.ts +0 -5
- package/src/clipboard.connect.ts +0 -79
- package/src/clipboard.dom.ts +0 -65
- package/src/clipboard.machine.ts +0 -74
- package/src/clipboard.props.ts +0 -16
- package/src/clipboard.types.ts +0 -84
- package/src/index.ts +0 -12
package/dist/index.js
CHANGED
|
@@ -1,46 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
1
|
+
'use strict';
|
|
19
2
|
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
contextProps: () => contextProps,
|
|
26
|
-
indicatorProps: () => indicatorProps,
|
|
27
|
-
machine: () => machine,
|
|
28
|
-
props: () => props,
|
|
29
|
-
splitIndicatorProps: () => splitIndicatorProps
|
|
30
|
-
});
|
|
31
|
-
module.exports = __toCommonJS(src_exports);
|
|
3
|
+
var anatomy$1 = require('@zag-js/anatomy');
|
|
4
|
+
var domQuery = require('@zag-js/dom-query');
|
|
5
|
+
var core = require('@zag-js/core');
|
|
6
|
+
var utils = require('@zag-js/utils');
|
|
7
|
+
var types = require('@zag-js/types');
|
|
32
8
|
|
|
33
9
|
// src/clipboard.anatomy.ts
|
|
34
|
-
var
|
|
35
|
-
var anatomy = (0, import_anatomy.createAnatomy)("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
|
|
10
|
+
var anatomy = anatomy$1.createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
|
|
36
11
|
var parts = anatomy.build();
|
|
37
|
-
|
|
38
|
-
// src/clipboard.connect.ts
|
|
39
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
40
|
-
|
|
41
|
-
// src/clipboard.dom.ts
|
|
42
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
43
|
-
var dom = (0, import_dom_query.createScope)({
|
|
12
|
+
var dom = domQuery.createScope({
|
|
44
13
|
getRootId: (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`,
|
|
45
14
|
getInputId: (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`,
|
|
46
15
|
getLabelId: (ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`,
|
|
@@ -59,7 +28,7 @@ function createNode(doc, text) {
|
|
|
59
28
|
return node;
|
|
60
29
|
}
|
|
61
30
|
function copyNode(node) {
|
|
62
|
-
const win =
|
|
31
|
+
const win = domQuery.getWindow(node);
|
|
63
32
|
const selection = win.getSelection();
|
|
64
33
|
if (selection == null) {
|
|
65
34
|
return Promise.reject(new Error());
|
|
@@ -103,7 +72,7 @@ function connect(state, send, normalize) {
|
|
|
103
72
|
getRootProps() {
|
|
104
73
|
return normalize.element({
|
|
105
74
|
...parts.root.attrs,
|
|
106
|
-
"data-copied":
|
|
75
|
+
"data-copied": domQuery.dataAttr(copied),
|
|
107
76
|
id: dom.getRootId(state.context)
|
|
108
77
|
});
|
|
109
78
|
},
|
|
@@ -111,21 +80,21 @@ function connect(state, send, normalize) {
|
|
|
111
80
|
return normalize.label({
|
|
112
81
|
...parts.label.attrs,
|
|
113
82
|
htmlFor: dom.getInputId(state.context),
|
|
114
|
-
"data-copied":
|
|
83
|
+
"data-copied": domQuery.dataAttr(copied),
|
|
115
84
|
id: dom.getLabelId(state.context)
|
|
116
85
|
});
|
|
117
86
|
},
|
|
118
87
|
getControlProps() {
|
|
119
88
|
return normalize.element({
|
|
120
89
|
...parts.control.attrs,
|
|
121
|
-
"data-copied":
|
|
90
|
+
"data-copied": domQuery.dataAttr(copied)
|
|
122
91
|
});
|
|
123
92
|
},
|
|
124
93
|
getInputProps() {
|
|
125
94
|
return normalize.input({
|
|
126
95
|
...parts.input.attrs,
|
|
127
96
|
defaultValue: state.context.value,
|
|
128
|
-
"data-copied":
|
|
97
|
+
"data-copied": domQuery.dataAttr(copied),
|
|
129
98
|
readOnly: true,
|
|
130
99
|
"data-readonly": "true",
|
|
131
100
|
id: dom.getInputId(state.context),
|
|
@@ -141,7 +110,7 @@ function connect(state, send, normalize) {
|
|
|
141
110
|
return normalize.button({
|
|
142
111
|
...parts.trigger.attrs,
|
|
143
112
|
"aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
|
|
144
|
-
"data-copied":
|
|
113
|
+
"data-copied": domQuery.dataAttr(copied),
|
|
145
114
|
onClick() {
|
|
146
115
|
send({ type: "COPY" });
|
|
147
116
|
}
|
|
@@ -155,13 +124,9 @@ function connect(state, send, normalize) {
|
|
|
155
124
|
}
|
|
156
125
|
};
|
|
157
126
|
}
|
|
158
|
-
|
|
159
|
-
// src/clipboard.machine.ts
|
|
160
|
-
var import_core = require("@zag-js/core");
|
|
161
|
-
var import_utils = require("@zag-js/utils");
|
|
162
127
|
function machine(userContext) {
|
|
163
|
-
const ctx =
|
|
164
|
-
return
|
|
128
|
+
const ctx = utils.compact(userContext);
|
|
129
|
+
return core.createMachine(
|
|
165
130
|
{
|
|
166
131
|
id: "clipboard",
|
|
167
132
|
initial: "idle",
|
|
@@ -228,11 +193,7 @@ function machine(userContext) {
|
|
|
228
193
|
}
|
|
229
194
|
);
|
|
230
195
|
}
|
|
231
|
-
|
|
232
|
-
// src/clipboard.props.ts
|
|
233
|
-
var import_types = require("@zag-js/types");
|
|
234
|
-
var import_utils2 = require("@zag-js/utils");
|
|
235
|
-
var props = (0, import_types.createProps)()([
|
|
196
|
+
var props = types.createProps()([
|
|
236
197
|
"getRootNode",
|
|
237
198
|
"id",
|
|
238
199
|
"ids",
|
|
@@ -240,17 +201,14 @@ var props = (0, import_types.createProps)()([
|
|
|
240
201
|
"timeout",
|
|
241
202
|
"onStatusChange"
|
|
242
203
|
]);
|
|
243
|
-
var contextProps =
|
|
244
|
-
var indicatorProps =
|
|
245
|
-
var splitIndicatorProps =
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
splitIndicatorProps
|
|
255
|
-
});
|
|
256
|
-
//# sourceMappingURL=index.js.map
|
|
204
|
+
var contextProps = utils.createSplitProps(props);
|
|
205
|
+
var indicatorProps = types.createProps()(["copied"]);
|
|
206
|
+
var splitIndicatorProps = utils.createSplitProps(indicatorProps);
|
|
207
|
+
|
|
208
|
+
exports.anatomy = anatomy;
|
|
209
|
+
exports.connect = connect;
|
|
210
|
+
exports.contextProps = contextProps;
|
|
211
|
+
exports.indicatorProps = indicatorProps;
|
|
212
|
+
exports.machine = machine;
|
|
213
|
+
exports.props = props;
|
|
214
|
+
exports.splitIndicatorProps = splitIndicatorProps;
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,12 @@
|
|
|
1
|
+
import { createAnatomy } from '@zag-js/anatomy';
|
|
2
|
+
import { createScope, getWindow, dataAttr } from '@zag-js/dom-query';
|
|
3
|
+
import { createMachine } from '@zag-js/core';
|
|
4
|
+
import { createSplitProps, compact } from '@zag-js/utils';
|
|
5
|
+
import { createProps } from '@zag-js/types';
|
|
6
|
+
|
|
1
7
|
// src/clipboard.anatomy.ts
|
|
2
|
-
import { createAnatomy } from "@zag-js/anatomy";
|
|
3
8
|
var anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
|
|
4
9
|
var parts = anatomy.build();
|
|
5
|
-
|
|
6
|
-
// src/clipboard.connect.ts
|
|
7
|
-
import { dataAttr } from "@zag-js/dom-query";
|
|
8
|
-
|
|
9
|
-
// src/clipboard.dom.ts
|
|
10
|
-
import { createScope, getWindow } from "@zag-js/dom-query";
|
|
11
10
|
var dom = createScope({
|
|
12
11
|
getRootId: (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`,
|
|
13
12
|
getInputId: (ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`,
|
|
@@ -123,10 +122,6 @@ function connect(state, send, normalize) {
|
|
|
123
122
|
}
|
|
124
123
|
};
|
|
125
124
|
}
|
|
126
|
-
|
|
127
|
-
// src/clipboard.machine.ts
|
|
128
|
-
import { createMachine } from "@zag-js/core";
|
|
129
|
-
import { compact } from "@zag-js/utils";
|
|
130
125
|
function machine(userContext) {
|
|
131
126
|
const ctx = compact(userContext);
|
|
132
127
|
return createMachine(
|
|
@@ -196,10 +191,6 @@ function machine(userContext) {
|
|
|
196
191
|
}
|
|
197
192
|
);
|
|
198
193
|
}
|
|
199
|
-
|
|
200
|
-
// src/clipboard.props.ts
|
|
201
|
-
import { createProps } from "@zag-js/types";
|
|
202
|
-
import { createSplitProps } from "@zag-js/utils";
|
|
203
194
|
var props = createProps()([
|
|
204
195
|
"getRootNode",
|
|
205
196
|
"id",
|
|
@@ -211,13 +202,5 @@ var props = createProps()([
|
|
|
211
202
|
var contextProps = createSplitProps(props);
|
|
212
203
|
var indicatorProps = createProps()(["copied"]);
|
|
213
204
|
var splitIndicatorProps = createSplitProps(indicatorProps);
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
connect,
|
|
217
|
-
contextProps,
|
|
218
|
-
indicatorProps,
|
|
219
|
-
machine,
|
|
220
|
-
props,
|
|
221
|
-
splitIndicatorProps
|
|
222
|
-
};
|
|
223
|
-
//# sourceMappingURL=index.mjs.map
|
|
205
|
+
|
|
206
|
+
export { anatomy, connect, contextProps, indicatorProps, machine, props, splitIndicatorProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/clipboard",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.71.0",
|
|
4
4
|
"description": "Core logic for the clipboard widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/clipboard",
|
|
19
19
|
"sideEffects": false,
|
|
20
20
|
"files": [
|
|
21
|
-
"dist"
|
|
22
|
-
"src"
|
|
21
|
+
"dist"
|
|
23
22
|
],
|
|
24
23
|
"publishConfig": {
|
|
25
24
|
"access": "public"
|
|
@@ -28,11 +27,11 @@
|
|
|
28
27
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
29
28
|
},
|
|
30
29
|
"dependencies": {
|
|
31
|
-
"@zag-js/anatomy": "0.
|
|
32
|
-
"@zag-js/core": "0.
|
|
33
|
-
"@zag-js/dom-query": "0.
|
|
34
|
-
"@zag-js/utils": "0.
|
|
35
|
-
"@zag-js/types": "0.
|
|
30
|
+
"@zag-js/anatomy": "0.71.0",
|
|
31
|
+
"@zag-js/core": "0.71.0",
|
|
32
|
+
"@zag-js/dom-query": "0.71.0",
|
|
33
|
+
"@zag-js/utils": "0.71.0",
|
|
34
|
+
"@zag-js/types": "0.71.0"
|
|
36
35
|
},
|
|
37
36
|
"devDependencies": {
|
|
38
37
|
"clean-package": "2.2.0"
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["export { anatomy } from \"./clipboard.anatomy\"\nexport { connect } from \"./clipboard.connect\"\nexport { machine } from \"./clipboard.machine\"\nexport * from \"./clipboard.props\"\nexport type {\n MachineApi as Api,\n UserDefinedContext as Context,\n CopyStatusDetails,\n ElementIds,\n IndicatorProps,\n Service,\n} from \"./clipboard.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./clipboard.anatomy\"\nimport type { MachineApi, Send, State } from \"./clipboard.types\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const copied = state.matches(\"copied\")\n\n return {\n copied,\n value: state.context.value,\n setValue(value) {\n send({ type: \"VALUE.SET\", value })\n },\n copy() {\n send({ type: \"COPY\" })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n \"data-copied\": dataAttr(copied),\n id: dom.getRootId(state.context),\n })\n },\n\n getLabelProps() {\n return normalize.label({\n ...parts.label.attrs,\n htmlFor: dom.getInputId(state.context),\n \"data-copied\": dataAttr(copied),\n id: dom.getLabelId(state.context),\n })\n },\n\n getControlProps() {\n return normalize.element({\n ...parts.control.attrs,\n \"data-copied\": dataAttr(copied),\n })\n },\n\n getInputProps() {\n return normalize.input({\n ...parts.input.attrs,\n defaultValue: state.context.value,\n \"data-copied\": dataAttr(copied),\n readOnly: true,\n \"data-readonly\": \"true\",\n id: dom.getInputId(state.context),\n onFocus(event) {\n event.currentTarget.select()\n },\n onCopy() {\n send({ type: \"INPUT.COPY\" })\n },\n })\n },\n\n getTriggerProps() {\n return normalize.button({\n ...parts.trigger.attrs,\n \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n \"data-copied\": dataAttr(copied),\n onClick() {\n send({ type: \"COPY\" })\n },\n })\n },\n\n getIndicatorProps(props) {\n return normalize.element({\n ...parts.indicator.attrs,\n hidden: props.copied !== copied,\n })\n },\n }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip:${ctx.id}`,\n getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`,\n getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\n\nfunction createNode(doc: Document, text: string): HTMLElement {\n const node = doc.createElement(\"pre\")\n Object.assign(node.style, {\n width: \"1px\",\n height: \"1px\",\n position: \"fixed\",\n top: \"5px\",\n })\n node.textContent = text\n return node\n}\n\nfunction copyNode(node: HTMLElement): Promise<void> {\n const win = getWindow(node)\n\n const selection = win.getSelection()\n\n if (selection == null) {\n return Promise.reject(new Error())\n }\n\n selection.removeAllRanges()\n\n const doc = node.ownerDocument\n\n const range = doc.createRange()\n range.selectNodeContents(node)\n selection.addRange(range)\n\n doc.execCommand(\"copy\")\n selection.removeAllRanges()\n\n return Promise.resolve()\n}\n\nfunction copyText(doc: Document, text: string): Promise<void> {\n const win = doc.defaultView || window\n\n if (win.navigator.clipboard?.writeText !== undefined) {\n return win.navigator.clipboard.writeText(text)\n }\n\n if (!doc.body) {\n return Promise.reject(new Error())\n }\n\n const node = createNode(doc, text)\n\n doc.body.appendChild(node)\n copyNode(node)\n doc.body.removeChild(node)\n\n return Promise.resolve()\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./clipboard.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./clipboard.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"clipboard\",\n initial: \"idle\",\n context: {\n value: \"\",\n timeout: 3000,\n ...ctx,\n },\n watch: {\n value: [\"syncInputElement\"],\n },\n on: {\n \"VALUE.SET\": {\n actions: [\"setValue\"],\n },\n COPY: {\n target: \"copied\",\n actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n },\n },\n states: {\n idle: {\n on: {\n \"INPUT.COPY\": {\n target: \"copied\",\n actions: [\"invokeOnCopy\"],\n },\n },\n },\n copied: {\n after: {\n COPY_TIMEOUT: \"idle\",\n },\n on: {\n COPY: {\n target: \"copied\",\n actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n },\n \"INPUT.COPY\": {\n actions: [\"invokeOnCopy\"],\n },\n },\n },\n },\n },\n {\n actions: {\n setValue(ctx, evt) {\n ctx.value = evt.value\n },\n copyToClipboard(ctx) {\n dom.writeToClipboard(ctx)\n },\n invokeOnCopy(ctx) {\n ctx.onStatusChange?.({ copied: true })\n },\n syncInputElement(ctx) {\n dom.setValue(dom.getInputEl(ctx), ctx.value)\n },\n },\n delays: {\n COPY_TIMEOUT: (ctx) => ctx.timeout,\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"value\",\n \"timeout\",\n \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,WAAW,EAAE,MAAM,QAAQ,WAAW,WAAW,aAAa,SAAS,OAAO;AAE5G,IAAM,QAAQ,QAAQ,MAAM;;;ACJnC,IAAAA,oBAAyB;;;ACAzB,uBAAuC;AAGhC,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,QAAQ,IAAI,EAAE;AAAA,EACxD,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,QAAQ,IAAI,EAAE;AAAA,EAC1D,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,QAAQ,IAAI,EAAE;AAAA,EAC1D,YAAY,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,WAAW,GAAG,CAAC;AAAA,EAChF,kBAAkB,CAAC,QAAa,SAAS,IAAI,OAAO,GAAG,GAAG,IAAI,KAAK;AACrE,CAAC;AAED,SAAS,WAAW,KAAe,MAA2B;AAC5D,QAAM,OAAO,IAAI,cAAc,KAAK;AACpC,SAAO,OAAO,KAAK,OAAO;AAAA,IACxB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,KAAK;AAAA,EACP,CAAC;AACD,OAAK,cAAc;AACnB,SAAO;AACT;AAEA,SAAS,SAAS,MAAkC;AAClD,QAAM,UAAM,4BAAU,IAAI;AAE1B,QAAM,YAAY,IAAI,aAAa;AAEnC,MAAI,aAAa,MAAM;AACrB,WAAO,QAAQ,OAAO,IAAI,MAAM,CAAC;AAAA,EACnC;AAEA,YAAU,gBAAgB;AAE1B,QAAM,MAAM,KAAK;AAEjB,QAAM,QAAQ,IAAI,YAAY;AAC9B,QAAM,mBAAmB,IAAI;AAC7B,YAAU,SAAS,KAAK;AAExB,MAAI,YAAY,MAAM;AACtB,YAAU,gBAAgB;AAE1B,SAAO,QAAQ,QAAQ;AACzB;AAEA,SAAS,SAAS,KAAe,MAA6B;AAC5D,QAAM,MAAM,IAAI,eAAe;AAE/B,MAAI,IAAI,UAAU,WAAW,cAAc,QAAW;AACpD,WAAO,IAAI,UAAU,UAAU,UAAU,IAAI;AAAA,EAC/C;AAEA,MAAI,CAAC,IAAI,MAAM;AACb,WAAO,QAAQ,OAAO,IAAI,MAAM,CAAC;AAAA,EACnC;AAEA,QAAM,OAAO,WAAW,KAAK,IAAI;AAEjC,MAAI,KAAK,YAAY,IAAI;AACzB,WAAS,IAAI;AACb,MAAI,KAAK,YAAY,IAAI;AAEzB,SAAO,QAAQ,QAAQ;AACzB;;;AD1DO,SAAS,QAA6B,OAAc,MAAY,WAA6C;AAClH,QAAM,SAAS,MAAM,QAAQ,QAAQ;AAErC,SAAO;AAAA,IACL;AAAA,IACA,OAAO,MAAM,QAAQ;AAAA,IACrB,SAAS,OAAO;AACd,WAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,IACnC;AAAA,IACA,OAAO;AACL,WAAK,EAAE,MAAM,OAAO,CAAC;AAAA,IACvB;AAAA,IAEA,eAAe;AACb,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,KAAK;AAAA,QACd,mBAAe,4BAAS,MAAM;AAAA,QAC9B,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,MAAM;AAAA,QACf,SAAS,IAAI,WAAW,MAAM,OAAO;AAAA,QACrC,mBAAe,4BAAS,MAAM;AAAA,QAC9B,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAClC,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB;AAChB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,QAAQ;AAAA,QACjB,mBAAe,4BAAS,MAAM;AAAA,MAChC,CAAC;AAAA,IACH;AAAA,IAEA,gBAAgB;AACd,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,MAAM;AAAA,QACf,cAAc,MAAM,QAAQ;AAAA,QAC5B,mBAAe,4BAAS,MAAM;AAAA,QAC9B,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,QAChC,QAAQ,OAAO;AACb,gBAAM,cAAc,OAAO;AAAA,QAC7B;AAAA,QACA,SAAS;AACP,eAAK,EAAE,MAAM,aAAa,CAAC;AAAA,QAC7B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkB;AAChB,aAAO,UAAU,OAAO;AAAA,QACtB,GAAG,MAAM,QAAQ;AAAA,QACjB,cAAc,SAAS,wBAAwB;AAAA,QAC/C,mBAAe,4BAAS,MAAM;AAAA,QAC9B,UAAU;AACR,eAAK,EAAE,MAAM,OAAO,CAAC;AAAA,QACvB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,kBAAkBC,QAAO;AACvB,aAAO,UAAU,QAAQ;AAAA,QACvB,GAAG,MAAM,UAAU;AAAA,QACnB,QAAQA,OAAM,WAAW;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AE9EA,kBAA8B;AAC9B,mBAAwB;AAIjB,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,sBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,GAAG;AAAA,MACL;AAAA,MACA,OAAO;AAAA,QACL,OAAO,CAAC,kBAAkB;AAAA,MAC5B;AAAA,MACA,IAAI;AAAA,QACF,aAAa;AAAA,UACX,SAAS,CAAC,UAAU;AAAA,QACtB;AAAA,QACA,MAAM;AAAA,UACJ,QAAQ;AAAA,UACR,SAAS,CAAC,mBAAmB,cAAc;AAAA,QAC7C;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,cAAc;AAAA,cACZ,QAAQ;AAAA,cACR,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,UACN,OAAO;AAAA,YACL,cAAc;AAAA,UAChB;AAAA,UACA,IAAI;AAAA,YACF,MAAM;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS,CAAC,mBAAmB,cAAc;AAAA,YAC7C;AAAA,YACA,cAAc;AAAA,cACZ,SAAS,CAAC,cAAc;AAAA,YAC1B;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,SAAS;AAAA,QACP,SAASC,MAAK,KAAK;AACjB,UAAAA,KAAI,QAAQ,IAAI;AAAA,QAClB;AAAA,QACA,gBAAgBA,MAAK;AACnB,cAAI,iBAAiBA,IAAG;AAAA,QAC1B;AAAA,QACA,aAAaA,MAAK;AAChB,UAAAA,KAAI,iBAAiB,EAAE,QAAQ,KAAK,CAAC;AAAA,QACvC;AAAA,QACA,iBAAiBA,MAAK;AACpB,cAAI,SAAS,IAAI,WAAWA,IAAG,GAAGA,KAAI,KAAK;AAAA,QAC7C;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,QACN,cAAc,CAACA,SAAQA,KAAI;AAAA,MAC7B;AAAA,IACF;AAAA,EACF;AACF;;;ACzEA,mBAA4B;AAE5B,IAAAC,gBAAiC;AAE1B,IAAM,YAAQ,0BAAgC,EAAE;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AACM,IAAM,mBAAe,gCAAqC,KAAK;AAE/D,IAAM,qBAAiB,0BAA4B,EAAE,CAAC,QAAQ,CAAC;AAC/D,IAAM,0BAAsB,gCAAiC,cAAc;","names":["import_dom_query","props","ctx","import_utils"]}
|
package/dist/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/clipboard.anatomy.ts","../src/clipboard.connect.ts","../src/clipboard.dom.ts","../src/clipboard.machine.ts","../src/clipboard.props.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"clipboard\").parts(\"root\", \"control\", \"trigger\", \"indicator\", \"input\", \"label\")\n\nexport const parts = anatomy.build()\n","import { dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { parts } from \"./clipboard.anatomy\"\nimport type { MachineApi, Send, State } from \"./clipboard.types\"\nimport { dom } from \"./clipboard.dom\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n const copied = state.matches(\"copied\")\n\n return {\n copied,\n value: state.context.value,\n setValue(value) {\n send({ type: \"VALUE.SET\", value })\n },\n copy() {\n send({ type: \"COPY\" })\n },\n\n getRootProps() {\n return normalize.element({\n ...parts.root.attrs,\n \"data-copied\": dataAttr(copied),\n id: dom.getRootId(state.context),\n })\n },\n\n getLabelProps() {\n return normalize.label({\n ...parts.label.attrs,\n htmlFor: dom.getInputId(state.context),\n \"data-copied\": dataAttr(copied),\n id: dom.getLabelId(state.context),\n })\n },\n\n getControlProps() {\n return normalize.element({\n ...parts.control.attrs,\n \"data-copied\": dataAttr(copied),\n })\n },\n\n getInputProps() {\n return normalize.input({\n ...parts.input.attrs,\n defaultValue: state.context.value,\n \"data-copied\": dataAttr(copied),\n readOnly: true,\n \"data-readonly\": \"true\",\n id: dom.getInputId(state.context),\n onFocus(event) {\n event.currentTarget.select()\n },\n onCopy() {\n send({ type: \"INPUT.COPY\" })\n },\n })\n },\n\n getTriggerProps() {\n return normalize.button({\n ...parts.trigger.attrs,\n \"aria-label\": copied ? \"Copied to clipboard\" : \"Copy to clipboard\",\n \"data-copied\": dataAttr(copied),\n onClick() {\n send({ type: \"COPY\" })\n },\n })\n },\n\n getIndicatorProps(props) {\n return normalize.element({\n ...parts.indicator.attrs,\n hidden: props.copied !== copied,\n })\n },\n }\n}\n","import { createScope, getWindow } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./clipboard.types\"\n\nexport const dom = createScope({\n getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip:${ctx.id}`,\n getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`,\n getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`,\n getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),\n writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),\n})\n\nfunction createNode(doc: Document, text: string): HTMLElement {\n const node = doc.createElement(\"pre\")\n Object.assign(node.style, {\n width: \"1px\",\n height: \"1px\",\n position: \"fixed\",\n top: \"5px\",\n })\n node.textContent = text\n return node\n}\n\nfunction copyNode(node: HTMLElement): Promise<void> {\n const win = getWindow(node)\n\n const selection = win.getSelection()\n\n if (selection == null) {\n return Promise.reject(new Error())\n }\n\n selection.removeAllRanges()\n\n const doc = node.ownerDocument\n\n const range = doc.createRange()\n range.selectNodeContents(node)\n selection.addRange(range)\n\n doc.execCommand(\"copy\")\n selection.removeAllRanges()\n\n return Promise.resolve()\n}\n\nfunction copyText(doc: Document, text: string): Promise<void> {\n const win = doc.defaultView || window\n\n if (win.navigator.clipboard?.writeText !== undefined) {\n return win.navigator.clipboard.writeText(text)\n }\n\n if (!doc.body) {\n return Promise.reject(new Error())\n }\n\n const node = createNode(doc, text)\n\n doc.body.appendChild(node)\n copyNode(node)\n doc.body.removeChild(node)\n\n return Promise.resolve()\n}\n","import { createMachine } from \"@zag-js/core\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./clipboard.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./clipboard.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n const ctx = compact(userContext)\n return createMachine<MachineContext, MachineState>(\n {\n id: \"clipboard\",\n initial: \"idle\",\n context: {\n value: \"\",\n timeout: 3000,\n ...ctx,\n },\n watch: {\n value: [\"syncInputElement\"],\n },\n on: {\n \"VALUE.SET\": {\n actions: [\"setValue\"],\n },\n COPY: {\n target: \"copied\",\n actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n },\n },\n states: {\n idle: {\n on: {\n \"INPUT.COPY\": {\n target: \"copied\",\n actions: [\"invokeOnCopy\"],\n },\n },\n },\n copied: {\n after: {\n COPY_TIMEOUT: \"idle\",\n },\n on: {\n COPY: {\n target: \"copied\",\n actions: [\"copyToClipboard\", \"invokeOnCopy\"],\n },\n \"INPUT.COPY\": {\n actions: [\"invokeOnCopy\"],\n },\n },\n },\n },\n },\n {\n actions: {\n setValue(ctx, evt) {\n ctx.value = evt.value\n },\n copyToClipboard(ctx) {\n dom.writeToClipboard(ctx)\n },\n invokeOnCopy(ctx) {\n ctx.onStatusChange?.({ copied: true })\n },\n syncInputElement(ctx) {\n dom.setValue(dom.getInputEl(ctx), ctx.value)\n },\n },\n delays: {\n COPY_TIMEOUT: (ctx) => ctx.timeout,\n },\n },\n )\n}\n","import { createProps } from \"@zag-js/types\"\nimport type { IndicatorProps, UserDefinedContext } from \"./clipboard.types\"\nimport { createSplitProps } from \"@zag-js/utils\"\n\nexport const props = createProps<UserDefinedContext>()([\n \"getRootNode\",\n \"id\",\n \"ids\",\n \"value\",\n \"timeout\",\n \"onStatusChange\",\n])\nexport const contextProps = createSplitProps<UserDefinedContext>(props)\n\nexport const indicatorProps = createProps<IndicatorProps>()([\"copied\"])\nexport const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)\n"],"mappings":"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","names":["props","ctx"]}
|
package/src/clipboard.anatomy.ts
DELETED
package/src/clipboard.connect.ts
DELETED
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
import { dataAttr } from "@zag-js/dom-query"
|
|
2
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types"
|
|
3
|
-
import { parts } from "./clipboard.anatomy"
|
|
4
|
-
import type { MachineApi, Send, State } from "./clipboard.types"
|
|
5
|
-
import { dom } from "./clipboard.dom"
|
|
6
|
-
|
|
7
|
-
export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
|
|
8
|
-
const copied = state.matches("copied")
|
|
9
|
-
|
|
10
|
-
return {
|
|
11
|
-
copied,
|
|
12
|
-
value: state.context.value,
|
|
13
|
-
setValue(value) {
|
|
14
|
-
send({ type: "VALUE.SET", value })
|
|
15
|
-
},
|
|
16
|
-
copy() {
|
|
17
|
-
send({ type: "COPY" })
|
|
18
|
-
},
|
|
19
|
-
|
|
20
|
-
getRootProps() {
|
|
21
|
-
return normalize.element({
|
|
22
|
-
...parts.root.attrs,
|
|
23
|
-
"data-copied": dataAttr(copied),
|
|
24
|
-
id: dom.getRootId(state.context),
|
|
25
|
-
})
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
getLabelProps() {
|
|
29
|
-
return normalize.label({
|
|
30
|
-
...parts.label.attrs,
|
|
31
|
-
htmlFor: dom.getInputId(state.context),
|
|
32
|
-
"data-copied": dataAttr(copied),
|
|
33
|
-
id: dom.getLabelId(state.context),
|
|
34
|
-
})
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
getControlProps() {
|
|
38
|
-
return normalize.element({
|
|
39
|
-
...parts.control.attrs,
|
|
40
|
-
"data-copied": dataAttr(copied),
|
|
41
|
-
})
|
|
42
|
-
},
|
|
43
|
-
|
|
44
|
-
getInputProps() {
|
|
45
|
-
return normalize.input({
|
|
46
|
-
...parts.input.attrs,
|
|
47
|
-
defaultValue: state.context.value,
|
|
48
|
-
"data-copied": dataAttr(copied),
|
|
49
|
-
readOnly: true,
|
|
50
|
-
"data-readonly": "true",
|
|
51
|
-
id: dom.getInputId(state.context),
|
|
52
|
-
onFocus(event) {
|
|
53
|
-
event.currentTarget.select()
|
|
54
|
-
},
|
|
55
|
-
onCopy() {
|
|
56
|
-
send({ type: "INPUT.COPY" })
|
|
57
|
-
},
|
|
58
|
-
})
|
|
59
|
-
},
|
|
60
|
-
|
|
61
|
-
getTriggerProps() {
|
|
62
|
-
return normalize.button({
|
|
63
|
-
...parts.trigger.attrs,
|
|
64
|
-
"aria-label": copied ? "Copied to clipboard" : "Copy to clipboard",
|
|
65
|
-
"data-copied": dataAttr(copied),
|
|
66
|
-
onClick() {
|
|
67
|
-
send({ type: "COPY" })
|
|
68
|
-
},
|
|
69
|
-
})
|
|
70
|
-
},
|
|
71
|
-
|
|
72
|
-
getIndicatorProps(props) {
|
|
73
|
-
return normalize.element({
|
|
74
|
-
...parts.indicator.attrs,
|
|
75
|
-
hidden: props.copied !== copied,
|
|
76
|
-
})
|
|
77
|
-
},
|
|
78
|
-
}
|
|
79
|
-
}
|
package/src/clipboard.dom.ts
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { createScope, getWindow } from "@zag-js/dom-query"
|
|
2
|
-
import type { MachineContext as Ctx } from "./clipboard.types"
|
|
3
|
-
|
|
4
|
-
export const dom = createScope({
|
|
5
|
-
getRootId: (ctx: Ctx) => ctx.ids?.root ?? `clip:${ctx.id}`,
|
|
6
|
-
getInputId: (ctx: Ctx) => ctx.ids?.input ?? `clip:${ctx.id}:input`,
|
|
7
|
-
getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `clip:${ctx.id}:label`,
|
|
8
|
-
getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
|
|
9
|
-
writeToClipboard: (ctx: Ctx) => copyText(dom.getDoc(ctx), ctx.value),
|
|
10
|
-
})
|
|
11
|
-
|
|
12
|
-
function createNode(doc: Document, text: string): HTMLElement {
|
|
13
|
-
const node = doc.createElement("pre")
|
|
14
|
-
Object.assign(node.style, {
|
|
15
|
-
width: "1px",
|
|
16
|
-
height: "1px",
|
|
17
|
-
position: "fixed",
|
|
18
|
-
top: "5px",
|
|
19
|
-
})
|
|
20
|
-
node.textContent = text
|
|
21
|
-
return node
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
function copyNode(node: HTMLElement): Promise<void> {
|
|
25
|
-
const win = getWindow(node)
|
|
26
|
-
|
|
27
|
-
const selection = win.getSelection()
|
|
28
|
-
|
|
29
|
-
if (selection == null) {
|
|
30
|
-
return Promise.reject(new Error())
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
selection.removeAllRanges()
|
|
34
|
-
|
|
35
|
-
const doc = node.ownerDocument
|
|
36
|
-
|
|
37
|
-
const range = doc.createRange()
|
|
38
|
-
range.selectNodeContents(node)
|
|
39
|
-
selection.addRange(range)
|
|
40
|
-
|
|
41
|
-
doc.execCommand("copy")
|
|
42
|
-
selection.removeAllRanges()
|
|
43
|
-
|
|
44
|
-
return Promise.resolve()
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
function copyText(doc: Document, text: string): Promise<void> {
|
|
48
|
-
const win = doc.defaultView || window
|
|
49
|
-
|
|
50
|
-
if (win.navigator.clipboard?.writeText !== undefined) {
|
|
51
|
-
return win.navigator.clipboard.writeText(text)
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
if (!doc.body) {
|
|
55
|
-
return Promise.reject(new Error())
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
const node = createNode(doc, text)
|
|
59
|
-
|
|
60
|
-
doc.body.appendChild(node)
|
|
61
|
-
copyNode(node)
|
|
62
|
-
doc.body.removeChild(node)
|
|
63
|
-
|
|
64
|
-
return Promise.resolve()
|
|
65
|
-
}
|
package/src/clipboard.machine.ts
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { createMachine } from "@zag-js/core"
|
|
2
|
-
import { compact } from "@zag-js/utils"
|
|
3
|
-
import { dom } from "./clipboard.dom"
|
|
4
|
-
import type { MachineContext, MachineState, UserDefinedContext } from "./clipboard.types"
|
|
5
|
-
|
|
6
|
-
export function machine(userContext: UserDefinedContext) {
|
|
7
|
-
const ctx = compact(userContext)
|
|
8
|
-
return createMachine<MachineContext, MachineState>(
|
|
9
|
-
{
|
|
10
|
-
id: "clipboard",
|
|
11
|
-
initial: "idle",
|
|
12
|
-
context: {
|
|
13
|
-
value: "",
|
|
14
|
-
timeout: 3000,
|
|
15
|
-
...ctx,
|
|
16
|
-
},
|
|
17
|
-
watch: {
|
|
18
|
-
value: ["syncInputElement"],
|
|
19
|
-
},
|
|
20
|
-
on: {
|
|
21
|
-
"VALUE.SET": {
|
|
22
|
-
actions: ["setValue"],
|
|
23
|
-
},
|
|
24
|
-
COPY: {
|
|
25
|
-
target: "copied",
|
|
26
|
-
actions: ["copyToClipboard", "invokeOnCopy"],
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
states: {
|
|
30
|
-
idle: {
|
|
31
|
-
on: {
|
|
32
|
-
"INPUT.COPY": {
|
|
33
|
-
target: "copied",
|
|
34
|
-
actions: ["invokeOnCopy"],
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
copied: {
|
|
39
|
-
after: {
|
|
40
|
-
COPY_TIMEOUT: "idle",
|
|
41
|
-
},
|
|
42
|
-
on: {
|
|
43
|
-
COPY: {
|
|
44
|
-
target: "copied",
|
|
45
|
-
actions: ["copyToClipboard", "invokeOnCopy"],
|
|
46
|
-
},
|
|
47
|
-
"INPUT.COPY": {
|
|
48
|
-
actions: ["invokeOnCopy"],
|
|
49
|
-
},
|
|
50
|
-
},
|
|
51
|
-
},
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
actions: {
|
|
56
|
-
setValue(ctx, evt) {
|
|
57
|
-
ctx.value = evt.value
|
|
58
|
-
},
|
|
59
|
-
copyToClipboard(ctx) {
|
|
60
|
-
dom.writeToClipboard(ctx)
|
|
61
|
-
},
|
|
62
|
-
invokeOnCopy(ctx) {
|
|
63
|
-
ctx.onStatusChange?.({ copied: true })
|
|
64
|
-
},
|
|
65
|
-
syncInputElement(ctx) {
|
|
66
|
-
dom.setValue(dom.getInputEl(ctx), ctx.value)
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
delays: {
|
|
70
|
-
COPY_TIMEOUT: (ctx) => ctx.timeout,
|
|
71
|
-
},
|
|
72
|
-
},
|
|
73
|
-
)
|
|
74
|
-
}
|
package/src/clipboard.props.ts
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { createProps } from "@zag-js/types"
|
|
2
|
-
import type { IndicatorProps, UserDefinedContext } from "./clipboard.types"
|
|
3
|
-
import { createSplitProps } from "@zag-js/utils"
|
|
4
|
-
|
|
5
|
-
export const props = createProps<UserDefinedContext>()([
|
|
6
|
-
"getRootNode",
|
|
7
|
-
"id",
|
|
8
|
-
"ids",
|
|
9
|
-
"value",
|
|
10
|
-
"timeout",
|
|
11
|
-
"onStatusChange",
|
|
12
|
-
])
|
|
13
|
-
export const contextProps = createSplitProps<UserDefinedContext>(props)
|
|
14
|
-
|
|
15
|
-
export const indicatorProps = createProps<IndicatorProps>()(["copied"])
|
|
16
|
-
export const splitIndicatorProps = createSplitProps<IndicatorProps>(indicatorProps)
|
package/src/clipboard.types.ts
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import type { Machine, StateMachine as S } from "@zag-js/core"
|
|
2
|
-
import type { CommonProperties, PropTypes, RequiredBy } from "@zag-js/types"
|
|
3
|
-
|
|
4
|
-
export interface CopyStatusDetails {
|
|
5
|
-
copied: boolean
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export type ElementIds = Partial<{
|
|
9
|
-
root: string
|
|
10
|
-
input: string
|
|
11
|
-
label: string
|
|
12
|
-
}>
|
|
13
|
-
|
|
14
|
-
interface PublicContext extends CommonProperties {
|
|
15
|
-
/**
|
|
16
|
-
* The ids of the elements in the clipboard. Useful for composition.
|
|
17
|
-
*/
|
|
18
|
-
ids?: ElementIds
|
|
19
|
-
/**
|
|
20
|
-
* The value to be copied to the clipboard
|
|
21
|
-
*/
|
|
22
|
-
value: string
|
|
23
|
-
/**
|
|
24
|
-
* The function to be called when the value is copied to the clipboard
|
|
25
|
-
*/
|
|
26
|
-
onStatusChange?: (details: CopyStatusDetails) => void
|
|
27
|
-
/**
|
|
28
|
-
* The timeout for the copy operation
|
|
29
|
-
* @default 3000
|
|
30
|
-
*/
|
|
31
|
-
timeout: number
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
interface PrivateContext {}
|
|
35
|
-
|
|
36
|
-
type ComputedContext = Readonly<{}>
|
|
37
|
-
|
|
38
|
-
export type UserDefinedContext = RequiredBy<PublicContext, "id">
|
|
39
|
-
|
|
40
|
-
export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
|
|
41
|
-
|
|
42
|
-
export interface MachineState {
|
|
43
|
-
value: "idle" | "copied"
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export type State = S.State<MachineContext, MachineState>
|
|
47
|
-
|
|
48
|
-
export type Send = S.Send<S.AnyEventObject>
|
|
49
|
-
|
|
50
|
-
export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
|
|
51
|
-
|
|
52
|
-
/* -----------------------------------------------------------------------------
|
|
53
|
-
* Component API
|
|
54
|
-
* -----------------------------------------------------------------------------*/
|
|
55
|
-
|
|
56
|
-
export interface IndicatorProps {
|
|
57
|
-
copied: boolean
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
export interface MachineApi<T extends PropTypes = PropTypes> {
|
|
61
|
-
/**
|
|
62
|
-
* Whether the value has been copied to the clipboard
|
|
63
|
-
*/
|
|
64
|
-
copied: boolean
|
|
65
|
-
/**
|
|
66
|
-
* The value to be copied to the clipboard
|
|
67
|
-
*/
|
|
68
|
-
value: string
|
|
69
|
-
/**
|
|
70
|
-
* Set the value to be copied to the clipboard
|
|
71
|
-
*/
|
|
72
|
-
setValue(value: string): void
|
|
73
|
-
/**
|
|
74
|
-
* Copy the value to the clipboard
|
|
75
|
-
*/
|
|
76
|
-
copy(): void
|
|
77
|
-
|
|
78
|
-
getRootProps(): T["element"]
|
|
79
|
-
getLabelProps(): T["label"]
|
|
80
|
-
getControlProps(): T["element"]
|
|
81
|
-
getTriggerProps(): T["button"]
|
|
82
|
-
getInputProps(): T["input"]
|
|
83
|
-
getIndicatorProps(props: IndicatorProps): T["element"]
|
|
84
|
-
}
|
package/src/index.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export { anatomy } from "./clipboard.anatomy"
|
|
2
|
-
export { connect } from "./clipboard.connect"
|
|
3
|
-
export { machine } from "./clipboard.machine"
|
|
4
|
-
export * from "./clipboard.props"
|
|
5
|
-
export type {
|
|
6
|
-
MachineApi as Api,
|
|
7
|
-
UserDefinedContext as Context,
|
|
8
|
-
CopyStatusDetails,
|
|
9
|
-
ElementIds,
|
|
10
|
-
IndicatorProps,
|
|
11
|
-
Service,
|
|
12
|
-
} from "./clipboard.types"
|