duoyun-ui 0.0.2

package/elements/chart-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-tooltip.js","sourceRoot":"","sources":["../src/elements/chart-tooltip.ts"],"names":[],"mappings":"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"}

package/elements/chart-zoom.d.ts

@@ -0,0 +1,20 @@
+import { GemElement, Emitter } from '@mantou/gem';
+import '@mantou/gem/elements/gesture';
+import './area-chart';
+declare type State = {
+    grabing: boolean;
+    newValue?: number[];
+};
+/**
+ * @customElement dy-chart-zoom
+ */
+export declare class DuoyunChartZoomElement extends GemElement<State> {
+    #private;
+    values?: (number | null)[][];
+    value: number[];
+    change: Emitter<number[]>;
+    state: State;
+    render: () => import("@mantou/gem").TemplateResult;
+}
+export {};
+//# sourceMappingURL=chart-zoom.d.ts.map

package/elements/chart-zoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-zoom.d.ts","sourceRoot":"","sources":["../src/elements/chart-zoom.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAUV,OAAO,EACR,MAAM,aAAa,CAAC;AAMrB,OAAO,8BAA8B,CAAC;AACtC,OAAO,cAAc,CAAC;AA+DtB,aAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,qBAEa,sBAAuB,SAAQ,UAAU,CAAC,KAAK,CAAC;;IACjD,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC7B,KAAK,WAAU;IAChB,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IAEnC,KAAK,EAAE,KAAK,CAEV;IAoEF,MAAM,6CA4CJ;CACH"}

package/elements/chart-zoom.js

@@ -0,0 +1,207 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DuoyunChartZoomElement_getMovement, _DuoyunChartZoomElement_getCurrent, _DuoyunChartZoomElement_panAdjust, _DuoyunChartZoomElement_adjust, _DuoyunChartZoomElement_onPanStart, _DuoyunChartZoomElement_onPanStop, _DuoyunChartZoomElement_onNewStart, _DuoyunChartZoomElement_onNewChange, _DuoyunChartZoomElement_onNewEnd, _DuoyunChartZoomElement_onGrabStart, _DuoyunChartZoomElement_onPan, _DuoyunChartZoomElement_onGrabEnd;
+import { GemElement, html, adoptedStyle, createCSSSheet, css, customElement, property, classMap, styleMap, emitter, } from '@mantou/gem';
+import { clamp } from '../lib/number';
+import { theme } from '../lib/theme';
+import '@mantou/gem/elements/gesture';
+import './area-chart';
+const style = createCSSSheet(css `
+  :host {
+    position: relative;
+    display: block;
+    border-radius: ${theme.normalRound};
+    border: 1px solid ${theme.borderColor};
+  }
+  dy-area-chart {
+    aspect-ratio: 30;
+    pointer-events: none;
+    opacity: 0.4;
+    background: ${theme.lightBackgroundColor};
+  }
+  .bg {
+    cursor: crosshair;
+    position: absolute;
+    inset: 0;
+  }
+  .new-range,
+  .range {
+    position: absolute;
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    background: #2680eb22;
+    border: 1px solid ${theme.describeColor};
+    border-width: 0 1px;
+    border-radius: inherit;
+  }
+  .grab {
+    cursor: grab;
+    height: 50%;
+  }
+  .crosshair {
+    cursor: crosshair;
+    height: 50%;
+  }
+  .grabing {
+    cursor: grabbing;
+  }
+  .start,
+  .stop {
+    cursor: col-resize;
+    position: absolute;
+    top: 50%;
+    background: ${theme.backgroundColor};
+    height: 1em;
+    width: 3px;
+    border-radius: 10em;
+    border: 1px solid ${theme.describeColor};
+  }
+  .start {
+    left: 0;
+    transform: translate(-50%, -50%);
+  }
+  .stop {
+    right: 0;
+    transform: translate(50%, -50%);
+  }
+`);
+/**
+ * @customElement dy-chart-zoom
+ */
+let DuoyunChartZoomElement = class DuoyunChartZoomElement extends GemElement {
+    constructor() {
+        super(...arguments);
+        this.value = [0, 1];
+        this.state = {
+            grabing: false,
+        };
+        _DuoyunChartZoomElement_getMovement.set(this, (detail) => {
+            const { left, right, width } = this.getBoundingClientRect();
+            if (detail.clientX < left || detail.clientX > right)
+                return 0;
+            return detail.x / width;
+        });
+        _DuoyunChartZoomElement_getCurrent.set(this, (clientX) => {
+            const { left, width } = this.getBoundingClientRect();
+            return clamp(0, (clientX - left) / width, 1);
+        });
+        _DuoyunChartZoomElement_panAdjust.set(this, ([start, stop], detail) => {
+            const movement = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getMovement, "f").call(this, detail);
+            const m = movement < 0 ? Math.max(0 - start, movement) : Math.min(1 - stop, movement);
+            return [start + m, stop + m];
+        });
+        _DuoyunChartZoomElement_adjust.set(this, (detail, isStop) => {
+            let [start, stop] = this.value;
+            if (isStop)
+                [stop, start] = [start, stop];
+            const movement = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getMovement, "f").call(this, detail);
+            const newStart = clamp(0, start + movement, 1);
+            const newValue = [Math.min(newStart, stop), Math.max(newStart, stop)];
+            if (newValue[1] - newValue[0] < 0.01)
+                return __classPrivateFieldGet(this, _DuoyunChartZoomElement_panAdjust, "f").call(this, this.value, detail);
+            return newValue;
+        });
+        _DuoyunChartZoomElement_onPanStart.set(this, (evt) => {
+            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_adjust, "f").call(this, evt.detail, false);
+            this.change(newValue);
+        });
+        _DuoyunChartZoomElement_onPanStop.set(this, (evt) => {
+            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_adjust, "f").call(this, evt.detail, true);
+            this.change(newValue);
+        });
+        _DuoyunChartZoomElement_onNewStart.set(this, ({ clientX }) => {
+            const v = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getCurrent, "f").call(this, clientX);
+            this.setState({ newValue: [v, v] });
+        });
+        _DuoyunChartZoomElement_onNewChange.set(this, ({ detail }) => {
+            const v = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getCurrent, "f").call(this, detail.clientX);
+            this.setState({ newValue: [this.state.newValue[0], v] });
+        });
+        _DuoyunChartZoomElement_onNewEnd.set(this, () => {
+            const { newValue } = this.state;
+            this.change([Math.min(...newValue), Math.max(...newValue)]);
+            this.setState({ newValue: undefined });
+        });
+        _DuoyunChartZoomElement_onGrabStart.set(this, () => {
+            this.setState({ grabing: true });
+        });
+        _DuoyunChartZoomElement_onPan.set(this, ({ detail }) => {
+            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_panAdjust, "f").call(this, this.value, detail);
+            this.change(newValue);
+        });
+        _DuoyunChartZoomElement_onGrabEnd.set(this, () => {
+            this.setState({ grabing: false });
+        });
+        this.render = () => {
+            const { grabing, newValue } = this.state;
+            const [start, stop] = this.value;
+            return html `
+      <dy-area-chart
+        .stageHeight=${12}
+        .colors=${[theme.informativeColor]}
+        .xAxi=${null}
+        .yAxi=${null}
+        .sequences=${this.values && [{ label: '', values: this.values }]}
+      ></dy-area-chart>
+      <gem-gesture class="bg" @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewStart, "f")} @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewChange, "f")} @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewEnd, "f")}>
+        ${newValue
+                ? html `
+              <div
+                class="new-range"
+                style=${styleMap({
+                    left: `calc(${Math.min(...newValue) * 100}% - 1px)`,
+                    right: `calc(${(1 - Math.max(...newValue)) * 100}% - 2px)`,
+                })}
+              ></div>
+            `
+                : ''}
+      </gem-gesture>
+      <div
+        class=${classMap({ range: true, grabing })}
+        style=${styleMap({ left: `calc(${start * 100}% - 1px)`, right: `calc(${(1 - stop) * 100}% - 2px)` })}
+      >
+        <gem-gesture
+          class=${classMap({ grab: true, grabing })}
+          @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onGrabStart, "f")}
+          @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPan, "f")}
+          @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onGrabEnd, "f")}
+        ></gem-gesture>
+        <gem-gesture
+          class="crosshair"
+          @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewStart, "f")}
+          @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewChange, "f")}
+          @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewEnd, "f")}
+        ></gem-gesture>
+        <gem-gesture class="start" @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPanStart, "f")}></gem-gesture>
+        <gem-gesture class="stop" @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPanStop, "f")}></gem-gesture>
+      </div>
+    `;
+        };
+    }
+};
+_DuoyunChartZoomElement_getMovement = new WeakMap(), _DuoyunChartZoomElement_getCurrent = new WeakMap(), _DuoyunChartZoomElement_panAdjust = new WeakMap(), _DuoyunChartZoomElement_adjust = new WeakMap(), _DuoyunChartZoomElement_onPanStart = new WeakMap(), _DuoyunChartZoomElement_onPanStop = new WeakMap(), _DuoyunChartZoomElement_onNewStart = new WeakMap(), _DuoyunChartZoomElement_onNewChange = new WeakMap(), _DuoyunChartZoomElement_onNewEnd = new WeakMap(), _DuoyunChartZoomElement_onGrabStart = new WeakMap(), _DuoyunChartZoomElement_onPan = new WeakMap(), _DuoyunChartZoomElement_onGrabEnd = new WeakMap();
+__decorate([
+    property
+], DuoyunChartZoomElement.prototype, "values", void 0);
+__decorate([
+    property
+], DuoyunChartZoomElement.prototype, "value", void 0);
+__decorate([
+    emitter
+], DuoyunChartZoomElement.prototype, "change", void 0);
+DuoyunChartZoomElement = __decorate([
+    customElement('dy-chart-zoom'),
+    adoptedStyle(style)
+], DuoyunChartZoomElement);
+export { DuoyunChartZoomElement };
+//# sourceMappingURL=chart-zoom.js.map

package/elements/chart-zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-zoom.js","sourceRoot":"","sources":["../src/elements/chart-zoom.ts"],"names":[],"mappings":"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"}

package/elements/checkbox.d.ts

@@ -0,0 +1,20 @@
+import { Emitter, GemElement } from '@mantou/gem';
+import '@mantou/gem/elements/use';
+/**
+ * @customElement dy-checkbox
+ * @attr checked
+ * @attr indeterminate
+ * @attr value
+ * @attr disabled
+ */
+export declare class DuoyunCheckboxElement extends GemElement {
+    #private;
+    checked: boolean;
+    indeterminate: boolean;
+    disabled: boolean;
+    change: Emitter<boolean>;
+    value: string;
+    constructor();
+    render: () => import("@mantou/gem").TemplateResult;
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/elements/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../src/elements/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,OAAO,EACP,UAAU,EAGX,MAAM,aAAa,CAAC;AAMrB,OAAO,0BAA0B,CAAC;AAuClC;;;;;;GAMG;AACH,qBAEa,qBAAsB,SAAQ,UAAU;;IACpC,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;;IAYzB,MAAM,6CAcJ;CACH"}

package/elements/checkbox.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DuoyunCheckboxElement_onClick;
+import { adoptedStyle, attribute, boolattribute, createCSSSheet, css, customElement, GemElement, globalemitter, html, } from '@mantou/gem';
+import { theme } from '../lib/theme';
+import { icons } from '../lib/icons';
+import { commonHandle } from '../lib/hotkeys';
+import '@mantou/gem/elements/use';
+const style = createCSSSheet(css `
+  :host {
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+  .checkbox {
+    box-sizing: border-box;
+    width: 1em;
+    aspect-ratio: 1;
+    background-clip: content-box;
+    padding: 0;
+    color: ${theme.backgroundColor};
+    border: 1px solid ${theme.primaryColor};
+    border-radius: ${theme.smallRound};
+    transform: scale(1.001);
+  }
+  .checkbox::part(icon) {
+    stroke-width: 1px;
+    stroke: white;
+  }
+  :host([checked]) .checkbox {
+    background-color: ${theme.primaryColor};
+  }
+  :host([indeterminate]) .checkbox {
+    padding: 2px;
+    background-color: ${theme.primaryColor};
+  }
+  :host([disabled]) .checkbox {
+    background-color: ${theme.disabledColor};
+  }
+`);
+/**
+ * @customElement dy-checkbox
+ * @attr checked
+ * @attr indeterminate
+ * @attr value
+ * @attr disabled
+ */
+let DuoyunCheckboxElement = class DuoyunCheckboxElement extends GemElement {
+    constructor() {
+        super();
+        _DuoyunCheckboxElement_onClick.set(this, () => {
+            if (this.disabled)
+                return;
+            this.change(!this.checked);
+        });
+        this.render = () => {
+            return html `
+      <gem-use
+        role="checkbox"
+        tabindex="0"
+        @keydown=${commonHandle}
+        aria-disabled=${this.disabled}
+        aria-labelledby="label"
+        aria-checked=${this.indeterminate ? 'mixed' : this.checked}
+        class="checkbox"
+        .element=${this.checked ? icons.check : undefined}
+      ></gem-use>
+      <slot id="label"></slot>
+    `;
+        };
+        this.addEventListener('click', __classPrivateFieldGet(this, _DuoyunCheckboxElement_onClick, "f"));
+    }
+};
+_DuoyunCheckboxElement_onClick = new WeakMap();
+__decorate([
+    boolattribute
+], DuoyunCheckboxElement.prototype, "checked", void 0);
+__decorate([
+    boolattribute
+], DuoyunCheckboxElement.prototype, "indeterminate", void 0);
+__decorate([
+    boolattribute
+], DuoyunCheckboxElement.prototype, "disabled", void 0);
+__decorate([
+    globalemitter
+], DuoyunCheckboxElement.prototype, "change", void 0);
+__decorate([
+    attribute
+], DuoyunCheckboxElement.prototype, "value", void 0);
+DuoyunCheckboxElement = __decorate([
+    customElement('dy-checkbox'),
+    adoptedStyle(style)
+], DuoyunCheckboxElement);
+export { DuoyunCheckboxElement };
+//# sourceMappingURL=checkbox.js.map

package/elements/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../src/elements/checkbox.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACL,YAAY,EACZ,SAAS,EACT,aAAa,EACb,cAAc,EACd,GAAG,EACH,aAAa,EAEb,UAAU,EACV,aAAa,EACb,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,0BAA0B,CAAC;AAElC,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;aAgBnB,KAAK,CAAC,eAAe;wBACV,KAAK,CAAC,YAAY;qBACrB,KAAK,CAAC,UAAU;;;;;;;;wBAQb,KAAK,CAAC,YAAY;;;;wBAIlB,KAAK,CAAC,YAAY;;;wBAGlB,KAAK,CAAC,aAAa;;CAE1C,CAAC,CAAC;AAEH;;;;;;GAMG;AAGH,IAAa,qBAAqB,GAAlC,MAAa,qBAAsB,SAAQ,UAAU;IAOnD;QACE,KAAK,EAAE,CAAC;QAIV,yCAAW,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7B,CAAC,EAAC;QAEF,WAAM,GAAG,GAAG,EAAE;YACZ,OAAO,IAAI,CAAA;;;;mBAII,YAAY;wBACP,IAAI,CAAC,QAAQ;;uBAEd,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;;mBAE/C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;;;KAGpD,CAAC;QACJ,CAAC,CAAC;QAtBA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,uBAAA,IAAI,sCAAS,CAAC,CAAC;IAChD,CAAC;CAsBF,CAAA;;AA/BgB;IAAd,aAAa;sDAAkB;AACjB;IAAd,aAAa;4DAAwB;AACvB;IAAd,aAAa;uDAAmB;AAClB;IAAd,aAAa;qDAA0B;AAC7B;IAAV,SAAS;oDAAe;AALd,qBAAqB;IAFjC,aAAa,CAAC,aAAa,CAAC;IAC5B,YAAY,CAAC,KAAK,CAAC;GACP,qBAAqB,CAgCjC;SAhCY,qBAAqB"}

package/elements/coach-mark.d.ts

@@ -0,0 +1,39 @@
+import { DuoyunVisibleBaseElement } from './base/visible';
+import './card';
+import './paragraph';
+import './button';
+export declare type Tour = {
+    title: string;
+    description: string;
+    before?: () => Promise<void> | void;
+    preview?: string;
+    /**only last tour */
+    finish?: () => Promise<void> | void;
+};
+declare type Store = {
+    currentIndex: number;
+    opened: boolean;
+};
+export declare function openTour(currentIndex?: number): Promise<void>;
+export declare function setTours(tours: Tour[], { opened, currentIndex }?: Partial<Store>): Promise<void>;
+/**
+ * parent element must is relative position
+ *
+ * @customElement dy-coach-mark
+ * @attr index
+ * @attr width
+ * @attr size
+ * @attr color
+ */
+export declare class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
+    #private;
+    index: number;
+    width: string;
+    size: 'small' | 'medium' | 'large';
+    color: string;
+    constructor();
+    mounted: () => void;
+    render: () => import("@mantou/gem").TemplateResult;
+}
+export {};
+//# sourceMappingURL=coach-mark.d.ts.map

package/elements/coach-mark.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"coach-mark.d.ts","sourceRoot":"","sources":["../src/elements/coach-mark.ts"],"names":[],"mappings":"AAmBA,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,QAAQ,CAAC;AAChB,OAAO,aAAa,CAAC;AACrB,OAAO,UAAU,CAAC;AAElB,oBAAY,IAAI,GAAG;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;CACrC,CAAC;AAGF,aAAK,KAAK,GAAG;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAOF,wBAAsB,QAAQ,CAAC,YAAY,SAAqB,iBAI/D;AAED,wBAAsB,QAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,MAAa,EAAE,YAAgB,EAAE,GAAE,OAAO,CAAC,KAAK,CAAM,iBAKrG;AAmED;;;;;;;;GAQG;AACH,qBAIa,sBAAuB,SAAQ,wBAAwB;;IACpD,KAAK,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;;IAwDzB,OAAO,aAML;IAEF,MAAM,6CAoBJ;CACH"}

package/elements/coach-mark.js

@@ -0,0 +1,212 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _DuoyunCoachMarkElement_instances, _DuoyunCoachMarkElement_tour_get, _DuoyunCoachMarkElement_width_get, _DuoyunCoachMarkElement_skip, _DuoyunCoachMarkElement_open;
+// https://spectrum.adobe.com/page/coach-mark/
+import { html, adoptedStyle, createCSSSheet, css, customElement, attribute, numattribute, createStore, connectStore, updateStore, } from '@mantou/gem';
+import { splice } from '@mantou/gem/helper/i18n';
+import { theme } from '../lib/theme';
+import { locale } from '../lib/locale';
+import { ContextMenu } from './menu';
+import { DuoyunVisibleBaseElement } from './base/visible';
+import './card';
+import './paragraph';
+import './button';
+let tourList = [];
+const store = createStore({
+    currentIndex: 0,
+    opened: false,
+});
+export async function openTour(currentIndex = store.currentIndex) {
+    var _a, _b;
+    if (!tourList[currentIndex])
+        throw new Error('missing tours');
+    await ((_b = (_a = tourList[currentIndex]).before) === null || _b === void 0 ? void 0 : _b.call(_a));
+    updateStore(store, { opened: true, currentIndex });
+}
+export async function setTours(tours, { opened = true, currentIndex = 0 } = {}) {
+    if (tours.length === 0)
+        throw new Error('missing tours');
+    tourList = tours;
+    await openTour(currentIndex);
+    updateStore(store, { opened });
+}
+function closeTour() {
+    updateStore(store, { opened: false });
+}
+function nextTour() {
+    var _a, _b;
+    const isFinish = store.currentIndex === tourList.length - 1;
+    if (isFinish) {
+        updateStore(store, {
+            currentIndex: 0,
+            opened: false,
+        });
+        ContextMenu.close();
+        (_b = (_a = tourList[store.currentIndex]).finish) === null || _b === void 0 ? void 0 : _b.call(_a);
+    }
+    else {
+        openTour(store.currentIndex + 1);
+    }
+}
+const style = createCSSSheet(css `
+  :host {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 3em;
+    aspect-ratio: 1;
+    border-radius: 10em;
+  }
+  :host([size='small']) {
+    transform: translate(-50%, -50%) scale(0.8);
+  }
+  :host([size='large']) {
+    transform: translate(-50%, -50%) scale(1.2);
+  }
+  .ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: 6px solid currentColor;
+    opacity: 0;
+    transform: scale(1.2);
+    animation: glow-grow 2s ease-out infinite;
+  }
+  .ring:nth-of-type(2) {
+    animation-delay: 0.66s;
+  }
+  .ring:nth-of-type(3) {
+    animation-delay: 1.33s;
+  }
+  @keyframes glow-grow {
+    0% {
+      opacity: 0;
+      transform: scale(0.5);
+    }
+    66% {
+      opacity: 1;
+    }
+    100% {
+      border-width: 2px;
+      opacity: 0;
+      transform: scale(1);
+    }
+  }
+`);
+/**
+ * parent element must is relative position
+ *
+ * @customElement dy-coach-mark
+ * @attr index
+ * @attr width
+ * @attr size
+ * @attr color
+ */
+let DuoyunCoachMarkElement = class DuoyunCoachMarkElement extends DuoyunVisibleBaseElement {
+    constructor() {
+        super();
+        _DuoyunCoachMarkElement_instances.add(this);
+        _DuoyunCoachMarkElement_skip.set(this, () => {
+            ContextMenu.close();
+            closeTour();
+        });
+        _DuoyunCoachMarkElement_open.set(this, async () => {
+            if (!__classPrivateFieldGet(this, _DuoyunCoachMarkElement_instances, "a", _DuoyunCoachMarkElement_tour_get))
+                return;
+            const { description, preview = '', title } = __classPrivateFieldGet(this, _DuoyunCoachMarkElement_instances, "a", _DuoyunCoachMarkElement_tour_get);
+            const isFinish = store.currentIndex === tourList.length - 1;
+            this.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            if (!this.visibility)
+                await new Promise((res) => this.addEventListener('visible', res, { once: true }));
+            ContextMenu.open(html `
+        <dy-card
+          style="margin: -0.8em -1em; border: none; border-radius: 0;"
+          .header=${title}
+          .detailRight=${isFinish
+                ? '🎉'
+                : splice(locale.currentOfTotal, String(store.currentIndex + 1), String(tourList.length))}
+          .preview=${preview}
+        >
+          <dy-paragraph slot="body">${description}</dy-paragraph>
+          <div slot="footer">
+            ${isFinish
+                ? ''
+                : html `<dy-button @click=${() => __classPrivateFieldGet(this, _DuoyunCoachMarkElement_skip, "f").call(this)} small color="cancel">${locale.skipTour}</dy-button>`}
+            <dy-button @click=${() => nextTour()} small>${isFinish ? locale.finishTour : locale.nextTour}</dy-button>
+          </div>
+        </dy-card>
+      `, {
+                activeElement: this,
+                width: __classPrivateFieldGet(this, _DuoyunCoachMarkElement_instances, "a", _DuoyunCoachMarkElement_width_get),
+            }).then(() => {
+                closeTour();
+            });
+        });
+        this.mounted = () => {
+            this.effect(() => {
+                if (__classPrivateFieldGet(this, _DuoyunCoachMarkElement_instances, "a", _DuoyunCoachMarkElement_tour_get)) {
+                    __classPrivateFieldGet(this, _DuoyunCoachMarkElement_open, "f").call(this);
+                }
+            });
+        };
+        this.render = () => {
+            if (!__classPrivateFieldGet(this, _DuoyunCoachMarkElement_instances, "a", _DuoyunCoachMarkElement_tour_get)) {
+                return html `
+        <style>
+          :host {
+            display: none;
+          }
+        </style>
+      `;
+            }
+            return html `
+      <style>
+        :host {
+          color: ${this.color || theme.informativeColor};
+        }
+      </style>
+      <span class="ring"></span>
+      <span class="ring"></span>
+      <span class="ring"></span>
+    `;
+        };
+        this.addEventListener('pointerdown', (e) => e.stopPropagation());
+        this.addEventListener('pointerup', (e) => e.stopPropagation());
+        this.addEventListener('click', (e) => e.stopPropagation());
+    }
+};
+_DuoyunCoachMarkElement_skip = new WeakMap(), _DuoyunCoachMarkElement_open = new WeakMap(), _DuoyunCoachMarkElement_instances = new WeakSet(), _DuoyunCoachMarkElement_tour_get = function _DuoyunCoachMarkElement_tour_get() {
+    return this.index === store.currentIndex && store.opened && tourList[this.index];
+}, _DuoyunCoachMarkElement_width_get = function _DuoyunCoachMarkElement_width_get() {
+    return this.width || '16em';
+};
+__decorate([
+    numattribute
+], DuoyunCoachMarkElement.prototype, "index", void 0);
+__decorate([
+    attribute
+], DuoyunCoachMarkElement.prototype, "width", void 0);
+__decorate([
+    attribute
+], DuoyunCoachMarkElement.prototype, "size", void 0);
+__decorate([
+    attribute
+], DuoyunCoachMarkElement.prototype, "color", void 0);
+DuoyunCoachMarkElement = __decorate([
+    customElement('dy-coach-mark'),
+    adoptedStyle(style),
+    connectStore(store),
+    connectStore(locale)
+], DuoyunCoachMarkElement);
+export { DuoyunCoachMarkElement };
+//# sourceMappingURL=coach-mark.js.map

package/elements/coach-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"coach-mark.js","sourceRoot":"","sources":["../src/elements/coach-mark.ts"],"names":[],"mappings":"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"}