@embedpdf/plugin-search 1.5.0 → 2.0.0-next.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.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +324 -199
- package/dist/index.js.map +1 -1
- package/dist/lib/actions.d.ts +58 -22
- package/dist/lib/index.d.ts +2 -2
- package/dist/lib/reducer.d.ts +2 -1
- package/dist/lib/search-plugin.d.ts +8 -8
- package/dist/lib/types.d.ts +76 -63
- package/dist/preact/adapter.d.ts +1 -1
- package/dist/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +49 -18
- package/dist/preact/index.js.map +1 -1
- package/dist/react/adapter.d.ts +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +49 -18
- package/dist/react/index.js.map +1 -1
- package/dist/shared/components/search-layer.d.ts +3 -2
- package/dist/shared/hooks/use-search.d.ts +4 -4
- package/dist/shared-preact/components/search-layer.d.ts +3 -2
- package/dist/shared-preact/hooks/use-search.d.ts +4 -4
- package/dist/shared-react/components/search-layer.d.ts +3 -2
- package/dist/shared-react/hooks/use-search.d.ts +4 -4
- package/dist/svelte/components/SearchLayer.svelte.d.ts +4 -3
- package/dist/svelte/hooks/use-search.svelte.d.ts +11 -5
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.cjs.map +1 -1
- package/dist/svelte/index.js +69 -35
- package/dist/svelte/index.js.map +1 -1
- package/dist/vue/components/search-layer.vue.d.ts +4 -2
- package/dist/vue/hooks/use-search.d.ts +9 -64
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.js +77 -32
- package/dist/vue/index.js.map +1 -1
- package/package.json +4 -6
package/dist/svelte/index.js
CHANGED
|
@@ -1,77 +1,111 @@
|
|
|
1
1
|
import * as $ from "svelte/internal/client";
|
|
2
|
-
import { usePlugin, useCapability } from "@embedpdf/core/svelte";
|
|
3
|
-
import { SearchPlugin,
|
|
2
|
+
import { usePlugin, useCapability, useDocumentState } from "@embedpdf/core/svelte";
|
|
3
|
+
import { SearchPlugin, initialSearchDocumentState } from "@embedpdf/plugin-search";
|
|
4
4
|
export * from "@embedpdf/plugin-search";
|
|
5
5
|
import "svelte/internal/disclose-version";
|
|
6
6
|
const useSearchPlugin = () => usePlugin(SearchPlugin.id);
|
|
7
7
|
const useSearchCapability = () => useCapability(SearchPlugin.id);
|
|
8
|
-
const useSearch = () => {
|
|
8
|
+
const useSearch = (getDocumentId) => {
|
|
9
9
|
const capability = useSearchCapability();
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
14
|
-
state: initialState
|
|
15
|
-
});
|
|
10
|
+
let searchState = $.state($.proxy(initialSearchDocumentState));
|
|
11
|
+
const documentId = $.derived(getDocumentId);
|
|
12
|
+
const scopedProvides = $.derived(() => capability.provides && $.get(documentId) ? capability.provides.forDocument($.get(documentId)) : null);
|
|
16
13
|
$.user_effect(() => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
const provides = capability.provides;
|
|
15
|
+
const docId = $.get(documentId);
|
|
16
|
+
if (!provides || !docId) {
|
|
17
|
+
$.set(searchState, initialSearchDocumentState, true);
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
const scope = provides.forDocument(docId);
|
|
21
|
+
$.set(searchState, scope.getState(), true);
|
|
22
|
+
return scope.onStateChange((state) => {
|
|
23
|
+
$.set(searchState, state, true);
|
|
20
24
|
});
|
|
21
25
|
});
|
|
22
|
-
return
|
|
26
|
+
return {
|
|
27
|
+
get provides() {
|
|
28
|
+
return $.get(scopedProvides);
|
|
29
|
+
},
|
|
30
|
+
get state() {
|
|
31
|
+
return $.get(searchState);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
23
34
|
};
|
|
24
35
|
var root_3 = $.from_html(`<div></div>`);
|
|
25
36
|
var root_1 = $.from_html(`<div></div>`);
|
|
26
37
|
function SearchLayer($$anchor, $$props) {
|
|
27
38
|
$.push($$props, true);
|
|
28
|
-
|
|
39
|
+
let highlightColor = $.prop($$props, "highlightColor", 3, "#FFFF00"), activeHighlightColor = $.prop($$props, "activeHighlightColor", 3, "#FFBF00"), divProps = $.rest_props($$props, [
|
|
29
40
|
"$$slots",
|
|
30
41
|
"$$events",
|
|
31
42
|
"$$legacy",
|
|
43
|
+
"documentId",
|
|
32
44
|
"pageIndex",
|
|
33
45
|
"scale",
|
|
34
46
|
"highlightColor",
|
|
35
47
|
"activeHighlightColor"
|
|
36
48
|
]);
|
|
37
49
|
const searchCapability = useSearchCapability();
|
|
50
|
+
const documentState = useDocumentState(() => $$props.documentId);
|
|
38
51
|
let searchResultState = $.state(null);
|
|
52
|
+
const scope = $.derived(() => {
|
|
53
|
+
var _a;
|
|
54
|
+
return ((_a = searchCapability.provides) == null ? void 0 : _a.forDocument($$props.documentId)) ?? null;
|
|
55
|
+
});
|
|
56
|
+
const actualScale = $.derived(() => {
|
|
57
|
+
var _a;
|
|
58
|
+
return $$props.scale !== void 0 ? $$props.scale : ((_a = documentState.current) == null ? void 0 : _a.scale) ?? 1;
|
|
59
|
+
});
|
|
39
60
|
$.user_effect(() => {
|
|
40
|
-
if (
|
|
41
|
-
|
|
61
|
+
if (!$.get(scope)) {
|
|
62
|
+
$.set(searchResultState, null);
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
const currentState = $.get(scope).getState();
|
|
66
|
+
$.set(
|
|
67
|
+
searchResultState,
|
|
68
|
+
{
|
|
69
|
+
results: currentState.results,
|
|
70
|
+
activeResultIndex: currentState.activeResultIndex,
|
|
71
|
+
showAllResults: currentState.showAllResults,
|
|
72
|
+
active: currentState.active
|
|
73
|
+
},
|
|
74
|
+
true
|
|
75
|
+
);
|
|
76
|
+
return $.get(scope).onSearchResultStateChange((state) => {
|
|
42
77
|
$.set(searchResultState, state, true);
|
|
43
78
|
});
|
|
44
79
|
});
|
|
45
80
|
const pageResults = $.derived(() => $.get(searchResultState) ? $.get(searchResultState).results.map((result, originalIndex) => ({ result, originalIndex })).filter(({ result }) => result.pageIndex === $$props.pageIndex) : []);
|
|
81
|
+
const resultsToShow = $.derived(() => $.get(searchResultState) ? $.get(pageResults).filter(({ originalIndex }) => $.get(searchResultState).showAllResults || originalIndex === $.get(searchResultState).activeResultIndex) : []);
|
|
46
82
|
var fragment = $.comment();
|
|
47
83
|
var node = $.first_child(fragment);
|
|
48
84
|
{
|
|
49
85
|
var consequent = ($$anchor2) => {
|
|
50
86
|
var div = root_1();
|
|
51
|
-
$.attribute_effect(div, () => ({ ...divProps }));
|
|
52
|
-
$.each(div,
|
|
87
|
+
$.attribute_effect(div, () => ({ ...divProps, [$.STYLE]: { "pointer-events": "none" } }));
|
|
88
|
+
$.each(div, 23, () => $.get(resultsToShow), ({ result, originalIndex }, idx) => `result-${idx}`, ($$anchor3, $$item, idx) => {
|
|
53
89
|
let result = () => $.get($$item).result;
|
|
54
90
|
let originalIndex = () => $.get($$item).originalIndex;
|
|
55
91
|
var fragment_1 = $.comment();
|
|
56
92
|
var node_1 = $.first_child(fragment_1);
|
|
57
|
-
$.each(node_1,
|
|
93
|
+
$.each(node_1, 19, () => result().rects, (rect, rectIdx) => `rect-${$.get(idx)}-${rectIdx}`, ($$anchor4, rect) => {
|
|
58
94
|
var div_1 = root_3();
|
|
59
95
|
let styles;
|
|
60
|
-
$.template_effect((
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
})
|
|
74
|
-
]);
|
|
96
|
+
$.template_effect(() => styles = $.set_style(div_1, "", styles, {
|
|
97
|
+
position: "absolute",
|
|
98
|
+
top: `${$.get(rect).origin.y * $.get(actualScale)}px`,
|
|
99
|
+
left: `${$.get(rect).origin.x * $.get(actualScale)}px`,
|
|
100
|
+
width: `${$.get(rect).size.width * $.get(actualScale)}px`,
|
|
101
|
+
height: `${$.get(rect).size.height * $.get(actualScale)}px`,
|
|
102
|
+
"background-color": originalIndex() === $.get(searchResultState).activeResultIndex ? activeHighlightColor() : highlightColor(),
|
|
103
|
+
"mix-blend-mode": "multiply",
|
|
104
|
+
transform: "scale(1.02)",
|
|
105
|
+
"transform-origin": "center",
|
|
106
|
+
transition: "opacity .3s ease-in-out",
|
|
107
|
+
opacity: "1"
|
|
108
|
+
}));
|
|
75
109
|
$.append($$anchor4, div_1);
|
|
76
110
|
});
|
|
77
111
|
$.append($$anchor3, fragment_1);
|
|
@@ -80,7 +114,7 @@ function SearchLayer($$anchor, $$props) {
|
|
|
80
114
|
$.append($$anchor2, div);
|
|
81
115
|
};
|
|
82
116
|
$.if(node, ($$render) => {
|
|
83
|
-
if ($.get(searchResultState)) $$render(consequent);
|
|
117
|
+
if ($.get(searchResultState) && $.get(searchResultState).active) $$render(consequent);
|
|
84
118
|
});
|
|
85
119
|
}
|
|
86
120
|
$.append($$anchor, fragment);
|
package/dist/svelte/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-search.svelte.ts","../../src/svelte/components/SearchLayer.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/svelte/hooks/use-search.svelte.ts","../../src/svelte/components/SearchLayer.svelte"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/svelte';\nimport {\n SearchPlugin,\n SearchDocumentState,\n SearchScope,\n initialSearchDocumentState,\n} from '@embedpdf/plugin-search';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\n// Define the return type explicitly to maintain type safety\ninterface UseSearchReturn {\n provides: SearchScope | null;\n state: SearchDocumentState;\n}\n\n/**\n * Hook for search state for a specific document\n * @param getDocumentId Function that returns the document ID\n */\nexport const useSearch = (getDocumentId: () => string | null): UseSearchReturn => {\n const capability = useSearchCapability();\n\n let searchState = $state<SearchDocumentState>(initialSearchDocumentState);\n\n // Reactive documentId\n const documentId = $derived(getDocumentId());\n\n // Scoped capability for current docId\n const scopedProvides = $derived(\n capability.provides && documentId ? capability.provides.forDocument(documentId) : null,\n );\n\n $effect(() => {\n const provides = capability.provides;\n const docId = documentId;\n\n if (!provides || !docId) {\n searchState = initialSearchDocumentState;\n return;\n }\n\n const scope = provides.forDocument(docId);\n\n // Set initial state\n searchState = scope.getState();\n\n // Subscribe to changes\n return scope.onStateChange((state) => {\n searchState = state;\n });\n });\n\n return {\n get provides() {\n return scopedProvides;\n },\n get state() {\n return searchState;\n },\n };\n};\n","<script lang=\"ts\">\n import type { SearchResultState } from '@embedpdf/plugin-search';\n import { useDocumentState } from '@embedpdf/core/svelte';\n import { useSearchCapability } from '../hooks';\n import type { HTMLAttributes } from 'svelte/elements';\n\n interface SearchLayerProps extends HTMLAttributes<HTMLDivElement> {\n documentId: string;\n pageIndex: number;\n scale?: number;\n highlightColor?: string;\n activeHighlightColor?: string;\n }\n\n let {\n documentId,\n pageIndex,\n scale: scaleOverride,\n highlightColor = '#FFFF00',\n activeHighlightColor = '#FFBF00',\n ...divProps\n }: SearchLayerProps = $props();\n\n const searchCapability = useSearchCapability();\n const documentState = useDocumentState(() => documentId);\n\n let searchResultState = $state<SearchResultState | null>(null);\n\n const scope = $derived(searchCapability.provides?.forDocument(documentId) ?? null);\n\n const actualScale = $derived(\n scaleOverride !== undefined ? scaleOverride : (documentState.current?.scale ?? 1),\n );\n\n $effect(() => {\n if (!scope) {\n searchResultState = null;\n return;\n }\n\n // Set initial state\n const currentState = scope.getState();\n searchResultState = {\n results: currentState.results,\n activeResultIndex: currentState.activeResultIndex,\n showAllResults: currentState.showAllResults,\n active: currentState.active,\n };\n\n // Subscribe to changes\n return scope.onSearchResultStateChange((state) => {\n searchResultState = state;\n });\n });\n\n // Filter results for current page while preserving original indices\n const pageResults = $derived(\n searchResultState\n ? searchResultState.results\n .map((result, originalIndex) => ({ result, originalIndex }))\n .filter(({ result }) => result.pageIndex === pageIndex)\n : [],\n );\n\n // Decide which results to show\n const resultsToShow = $derived(\n searchResultState\n ? pageResults.filter(\n ({ originalIndex }) =>\n searchResultState!.showAllResults ||\n originalIndex === searchResultState!.activeResultIndex,\n )\n : [],\n );\n</script>\n\n{#if searchResultState && searchResultState.active}\n <div style:pointer-events=\"none\" {...divProps}>\n {#each resultsToShow as { result, originalIndex }, idx (`result-${idx}`)}\n {#each result.rects as rect, rectIdx (`rect-${idx}-${rectIdx}`)}\n <div\n style:position=\"absolute\"\n style:top=\"{rect.origin.y * actualScale}px\"\n style:left=\"{rect.origin.x * actualScale}px\"\n style:width=\"{rect.size.width * actualScale}px\"\n style:height=\"{rect.size.height * actualScale}px\"\n style:background-color={originalIndex === searchResultState.activeResultIndex\n ? activeHighlightColor\n : highlightColor}\n style:mix-blend-mode=\"multiply\"\n style:transform=\"scale(1.02)\"\n style:transform-origin=\"center\"\n style:transition=\"opacity .3s ease-in-out\"\n style:opacity=\"1\"\n ></div>\n {/each}\n {/each}\n </div>\n{/if}\n"],"names":["$$anchor"],"mappings":"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"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
interface SearchLayerProps {
|
|
2
|
+
documentId: string;
|
|
2
3
|
pageIndex: number;
|
|
3
|
-
scale
|
|
4
|
+
scale?: number;
|
|
4
5
|
highlightColor?: string;
|
|
5
6
|
activeHighlightColor?: string;
|
|
6
7
|
}
|
|
7
|
-
declare const
|
|
8
|
+
declare const __VLS_export: import('vue').DefineComponent<SearchLayerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<SearchLayerProps> & Readonly<{}>, {
|
|
8
9
|
highlightColor: string;
|
|
9
10
|
activeHighlightColor: string;
|
|
10
11
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
12
|
+
declare const _default: typeof __VLS_export;
|
|
11
13
|
export default _default;
|
|
@@ -1,67 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MaybeRefOrGetter, Ref, ComputedRef } from 'vue';
|
|
2
|
+
import { SearchPlugin, SearchDocumentState, SearchScope } from '../../lib/index.ts';
|
|
2
3
|
export declare const useSearchPlugin: () => import('@embedpdf/core/vue').PluginState<SearchPlugin>;
|
|
3
4
|
export declare const useSearchCapability: () => import('@embedpdf/core/vue').CapabilityState<Readonly<import('../../lib/index.ts').SearchCapability>>;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
rects: {
|
|
12
|
-
origin: {
|
|
13
|
-
x: number;
|
|
14
|
-
y: number;
|
|
15
|
-
};
|
|
16
|
-
size: {
|
|
17
|
-
width: number;
|
|
18
|
-
height: number;
|
|
19
|
-
};
|
|
20
|
-
}[];
|
|
21
|
-
context: {
|
|
22
|
-
before: string;
|
|
23
|
-
match: string;
|
|
24
|
-
after: string;
|
|
25
|
-
truncatedLeft: boolean;
|
|
26
|
-
truncatedRight: boolean;
|
|
27
|
-
};
|
|
28
|
-
}[];
|
|
29
|
-
total: number;
|
|
30
|
-
activeResultIndex: number;
|
|
31
|
-
showAllResults: boolean;
|
|
32
|
-
query: string;
|
|
33
|
-
loading: boolean;
|
|
34
|
-
active: boolean;
|
|
35
|
-
}, SearchState | {
|
|
36
|
-
flags: import('@embedpdf/models').MatchFlag[];
|
|
37
|
-
results: {
|
|
38
|
-
pageIndex: number;
|
|
39
|
-
charIndex: number;
|
|
40
|
-
charCount: number;
|
|
41
|
-
rects: {
|
|
42
|
-
origin: {
|
|
43
|
-
x: number;
|
|
44
|
-
y: number;
|
|
45
|
-
};
|
|
46
|
-
size: {
|
|
47
|
-
width: number;
|
|
48
|
-
height: number;
|
|
49
|
-
};
|
|
50
|
-
}[];
|
|
51
|
-
context: {
|
|
52
|
-
before: string;
|
|
53
|
-
match: string;
|
|
54
|
-
after: string;
|
|
55
|
-
truncatedLeft: boolean;
|
|
56
|
-
truncatedRight: boolean;
|
|
57
|
-
};
|
|
58
|
-
}[];
|
|
59
|
-
total: number;
|
|
60
|
-
activeResultIndex: number;
|
|
61
|
-
showAllResults: boolean;
|
|
62
|
-
query: string;
|
|
63
|
-
loading: boolean;
|
|
64
|
-
active: boolean;
|
|
65
|
-
}>;
|
|
66
|
-
provides: import('vue').Ref<Readonly<import('../../lib/index.ts').SearchCapability> | null, Readonly<import('../../lib/index.ts').SearchCapability> | null>;
|
|
5
|
+
/**
|
|
6
|
+
* Hook for search state for a specific document
|
|
7
|
+
* @param documentId Document ID (can be ref, computed, getter, or plain value)
|
|
8
|
+
*/
|
|
9
|
+
export declare const useSearch: (documentId: MaybeRefOrGetter<string>) => {
|
|
10
|
+
state: Ref<SearchDocumentState>;
|
|
11
|
+
provides: ComputedRef<SearchScope | null>;
|
|
67
12
|
};
|
package/dist/vue/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=require("@embedpdf/core/vue"),l=require("@embedpdf/plugin-search"),a=()=>t.useCapability(l.SearchPlugin.id),r=e.defineComponent({__name:"search-layer",props:{documentId:{},pageIndex:{},scale:{},highlightColor:{default:"#FFFF00"},activeHighlightColor:{default:"#FFBF00"}},setup(l){const r=l,{provides:o}=a(),n=t.useDocumentState(()=>r.documentId),u=e.ref(null),i=e.computed(()=>{var e;return(null==(e=o.value)?void 0:e.forDocument(r.documentId))??null}),c=e.computed(()=>{var e;return void 0!==r.scale?r.scale:(null==(e=n.value)?void 0:e.scale)??1});e.watch(i,(e,t,l)=>{if(!e)return void(u.value=null);const a=e.getState();u.value={results:a.results,activeResultIndex:a.activeResultIndex,showAllResults:a.showAllResults,active:a.active};l(e.onSearchResultStateChange(e=>{u.value=e}))},{immediate:!0});const s=e.computed(()=>u.value?u.value.results.map((e,t)=>({result:e,originalIndex:t})).filter(({result:e})=>e.pageIndex===r.pageIndex):[]),d=e.computed(()=>u.value?s.value.filter(({originalIndex:e})=>u.value.showAllResults||e===u.value.activeResultIndex):[]);return(t,a)=>u.value&&u.value.active?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,style:{pointerEvents:"none"}},t.$attrs),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(d.value,({result:t,originalIndex:a},r)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:`result-${r}`},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.rects,(t,o)=>(e.openBlock(),e.createElementBlock("div",{key:`rect-${r}-${o}`,style:e.normalizeStyle({position:"absolute",top:t.origin.y*c.value+"px",left:t.origin.x*c.value+"px",width:t.size.width*c.value+"px",height:t.size.height*c.value+"px",backgroundColor:a===u.value.activeResultIndex?l.activeHighlightColor:l.highlightColor,mixBlendMode:"multiply",transform:"scale(1.02)",transformOrigin:"center",transition:"opacity .3s ease-in-out",opacity:1})},null,4))),128))],64))),128))],16)):e.createCommentVNode("",!0)}});exports.SearchLayer=r,exports.useSearch=t=>{const{provides:r}=a(),o=e.ref(l.initialSearchDocumentState);e.watch([r,()=>e.toValue(t)],([e,t],a,r)=>{if(!e)return void(o.value=l.initialSearchDocumentState);const n=e.forDocument(t);o.value=n.getState();r(n.onStateChange(e=>{o.value=e}))},{immediate:!0});const n=e.computed(()=>{var l;const a=e.toValue(t);return(null==(l=r.value)?void 0:l.forDocument(a))??null});return{state:o,provides:n}},exports.useSearchCapability=a,exports.useSearchPlugin=()=>t.usePlugin(l.SearchPlugin.id),Object.keys(l).forEach(e=>{"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:()=>l[e]})});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/vue/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-search.ts","../../src/vue/components/search-layer.vue"],"sourcesContent":["import { ref,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/vue/hooks/use-search.ts","../../src/vue/components/search-layer.vue"],"sourcesContent":["import { ref, watch, computed, toValue, type MaybeRefOrGetter, Ref, ComputedRef } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport {\n SearchPlugin,\n SearchDocumentState,\n SearchScope,\n initialSearchDocumentState,\n} from '@embedpdf/plugin-search';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\n/**\n * Hook for search state for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value)\n */\nexport const useSearch = (\n documentId: MaybeRefOrGetter<string>,\n): {\n state: Ref<SearchDocumentState>;\n provides: ComputedRef<SearchScope | null>;\n} => {\n const { provides } = useSearchCapability();\n const searchState = ref<SearchDocumentState>(initialSearchDocumentState);\n\n watch(\n [provides, () => toValue(documentId)],\n ([providesValue, docId], _, onCleanup) => {\n if (!providesValue) {\n searchState.value = initialSearchDocumentState;\n return;\n }\n\n const scope = providesValue.forDocument(docId);\n\n // Set initial state\n searchState.value = scope.getState();\n\n // Subscribe to changes\n const unsubscribe = scope.onStateChange((state) => {\n searchState.value = state;\n });\n\n onCleanup(unsubscribe);\n },\n { immediate: true },\n );\n\n const scopedProvides = computed(() => {\n const docId = toValue(documentId);\n return provides.value?.forDocument(docId) ?? null;\n });\n\n return {\n state: searchState,\n provides: scopedProvides,\n };\n};\n","<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport type { SearchResultState } from '@embedpdf/plugin-search';\nimport { useSearchCapability } from '../hooks/use-search';\n\ninterface SearchLayerProps {\n documentId: string;\n pageIndex: number;\n scale?: number;\n highlightColor?: string;\n activeHighlightColor?: string;\n}\n\nconst props = withDefaults(defineProps<SearchLayerProps>(), {\n highlightColor: '#FFFF00',\n activeHighlightColor: '#FFBF00',\n});\n\nconst { provides: searchProvides } = useSearchCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst searchResultState = ref<SearchResultState | null>(null);\n\nconst scope = computed(() => searchProvides.value?.forDocument(props.documentId) ?? null);\n\nconst actualScale = computed(() => {\n if (props.scale !== undefined) return props.scale;\n return documentState.value?.scale ?? 1;\n});\n\nwatch(\n scope,\n (scopeValue, _, onCleanup) => {\n if (!scopeValue) {\n searchResultState.value = null;\n return;\n }\n\n // Set initial state\n const currentState = scopeValue.getState();\n searchResultState.value = {\n results: currentState.results,\n activeResultIndex: currentState.activeResultIndex,\n showAllResults: currentState.showAllResults,\n active: currentState.active,\n };\n\n // Subscribe to changes\n const unsubscribe = scopeValue.onSearchResultStateChange((state) => {\n searchResultState.value = state;\n });\n\n onCleanup(unsubscribe);\n },\n { immediate: true },\n);\n\n// Filter results for current page while preserving original indices\nconst pageResults = computed(() => {\n if (!searchResultState.value) return [];\n\n return searchResultState.value.results\n .map((result, originalIndex) => ({ result, originalIndex }))\n .filter(({ result }) => result.pageIndex === props.pageIndex);\n});\n\n// Decide which results to show\nconst resultsToShow = computed(() => {\n if (!searchResultState.value) return [];\n\n return pageResults.value.filter(\n ({ originalIndex }) =>\n searchResultState.value!.showAllResults ||\n originalIndex === searchResultState.value!.activeResultIndex,\n );\n});\n</script>\n\n<template>\n <div\n v-if=\"searchResultState && searchResultState.active\"\n :style=\"{\n pointerEvents: 'none',\n }\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"({ result, originalIndex }, idx) in resultsToShow\" :key=\"`result-${idx}`\">\n <div\n v-for=\"(rect, rectIdx) in result.rects\"\n :key=\"`rect-${idx}-${rectIdx}`\"\n :style=\"{\n position: 'absolute',\n top: `${rect.origin.y * actualScale}px`,\n left: `${rect.origin.x * actualScale}px`,\n width: `${rect.size.width * actualScale}px`,\n height: `${rect.size.height * actualScale}px`,\n backgroundColor:\n originalIndex === searchResultState.activeResultIndex\n ? activeHighlightColor\n : highlightColor,\n mixBlendMode: 'multiply',\n transform: 'scale(1.02)',\n transformOrigin: 'center',\n transition: 'opacity .3s ease-in-out',\n opacity: 1,\n }\"\n />\n </template>\n </div>\n</template>\n"],"names":["useSearchCapability","useCapability","SearchPlugin","id","props","__props","provides","searchProvides","documentState","useDocumentState","documentId","searchResultState","ref","scope","computed","_a","value","forDocument","actualScale","scale","watch","scopeValue","_","onCleanup","currentState","getState","results","activeResultIndex","showAllResults","active","onSearchResultStateChange","state","immediate","pageResults","map","result","originalIndex","filter","pageIndex","resultsToShow","_openBlock","_createElementBlock","_mergeProps","style","$attrs","_Fragment","idx","rects","rect","rectIdx","key","_normalizeStyle","top","origin","y","left","x","width","size","height","activeHighlightColor","highlightColor","searchState","initialSearchDocumentState","toValue","providesValue","docId","onStateChange","scopedProvides","usePlugin"],"mappings":"4KAUaA,EAAsB,IAAMC,gBAA4BC,EAAAA,aAAaC,gLCIlF,MAAMC,EAAQC,GAKNC,SAAUC,GAAmBP,IAC/BQ,EAAgBC,EAAAA,iBAAiB,IAAML,EAAMM,YAC7CC,EAAoBC,EAAAA,IAA8B,MAElDC,EAAQC,WAAS,WAAM,OAAA,OAAAC,EAAAR,EAAeS,YAAf,EAAAD,EAAsBE,YAAYb,EAAMM,cAAe,OAE9EQ,EAAcJ,EAAAA,SAAS,WAC3B,YAAoB,IAAhBV,EAAMe,MAA4Bf,EAAMe,OACrC,OAAAJ,EAAAP,EAAcQ,YAAd,EAAAD,EAAqBI,QAAS,IAGvCC,EAAAA,MACEP,EACA,CAACQ,EAAYC,EAAGC,KACd,IAAKF,EAEH,YADAV,EAAkBK,MAAQ,MAK5B,MAAMQ,EAAeH,EAAWI,WAChCd,EAAkBK,MAAQ,CACxBU,QAASF,EAAaE,QACtBC,kBAAmBH,EAAaG,kBAChCC,eAAgBJ,EAAaI,eAC7BC,OAAQL,EAAaK,QAQvBN,EAJoBF,EAAWS,0BAA2BC,IACxDpB,EAAkBK,MAAQe,MAK9B,CAAEC,WAAW,IAIf,MAAMC,EAAcnB,EAAAA,SAAS,IACtBH,EAAkBK,MAEhBL,EAAkBK,MAAMU,QAC5BQ,IAAI,CAACC,EAAQC,KAAA,CAAqBD,SAAQC,mBAC1CC,OAAO,EAAGF,YAAaA,EAAOG,YAAclC,EAAMkC,WAJhB,IAQjCC,EAAgBzB,EAAAA,SAAS,IACxBH,EAAkBK,MAEhBiB,EAAYjB,MAAMqB,OACvB,EAAGD,mBACDzB,EAAkBK,MAAOY,gBACzBQ,IAAkBzB,EAAkBK,MAAOW,mBALV,iBAY7BhB,EAAAK,OAAqBL,EAAAK,MAAkBa,QAD/CW,EAAAA,YAAAC,EAAAA,mBA6BM,MA7BNC,aA6BM,OA3BHC,MAAO,wBAGAC,EAAAA,QAAM,EAEdJ,EAAAA,WAAA,GAAAC,qBAqBWI,EAAAA,2BArB0CN,EAAAvB,MAAa,EAA9CmB,SAAQC,iBAAiBU,kEAAuCA,OAClFN,EAAAA,WAAA,GAAAC,EAAAA,mBAmBEI,6BAlB0BV,EAAOY,MAAK,CAA9BC,EAAMC,mBADhBR,EAAAA,mBAmBE,MAAA,CAjBCS,IAAG,QAAUJ,KAAOG,IACpBN,MAAKQ,EAAAA,eAAA,qBAAsDC,IAAAJ,EAAKK,OAAOC,EAAIpC,EAAAF,MAAhB,KAAoDuC,KAAAP,EAAKK,OAAOG,EAAItC,EAAAF,MAAhB,KAAqDyC,MAAAT,EAAKU,KAAKD,MAAQvC,EAAAF,MAAlB,KAAwD2C,OAAAX,EAAKU,KAAKC,OAASzC,EAAAF,MAAnB,qBAA2EoB,IAAkBzB,EAAAK,MAAkBW,kBAAkCtB,EAAAuD,qBAAqCvD,EAAAwD,oPDzEzZnD,IAKA,MAAMJ,SAAEA,GAAaN,IACf8D,EAAclD,EAAAA,IAAyBmD,8BAE7C3C,EAAAA,MACE,CAACd,EAAU,IAAM0D,UAAQtD,IACzB,EAAEuD,EAAeC,GAAQ5C,EAAGC,KAC1B,IAAK0C,EAEH,YADAH,EAAY9C,MAAQ+C,EAAAA,4BAItB,MAAMlD,EAAQoD,EAAchD,YAAYiD,GAGxCJ,EAAY9C,MAAQH,EAAMY,WAO1BF,EAJoBV,EAAMsD,cAAepC,IACvC+B,EAAY9C,MAAQe,MAKxB,CAAEC,WAAW,IAGf,MAAMoC,EAAiBtD,EAAAA,SAAS,WAC9B,MAAMoD,EAAQF,EAAAA,QAAQtD,GACtB,OAAO,OAAAK,EAAAT,EAASU,YAAT,EAAAD,EAAgBE,YAAYiD,KAAU,OAG/C,MAAO,CACLnC,MAAO+B,EACPxD,SAAU8D,0DA9CiB,IAAMC,YAAwBnE,EAAAA,aAAaC"}
|
package/dist/vue/index.js
CHANGED
|
@@ -1,29 +1,42 @@
|
|
|
1
|
-
import { ref,
|
|
2
|
-
import { usePlugin, useCapability } from "@embedpdf/core/vue";
|
|
3
|
-
import { SearchPlugin,
|
|
1
|
+
import { ref, watch, toValue, computed, defineComponent, createElementBlock, createCommentVNode, openBlock, mergeProps, Fragment, renderList, normalizeStyle } from "vue";
|
|
2
|
+
import { usePlugin, useCapability, useDocumentState } from "@embedpdf/core/vue";
|
|
3
|
+
import { SearchPlugin, initialSearchDocumentState } from "@embedpdf/plugin-search";
|
|
4
4
|
export * from "@embedpdf/plugin-search";
|
|
5
5
|
const useSearchPlugin = () => usePlugin(SearchPlugin.id);
|
|
6
6
|
const useSearchCapability = () => useCapability(SearchPlugin.id);
|
|
7
|
-
const useSearch = () => {
|
|
7
|
+
const useSearch = (documentId) => {
|
|
8
8
|
const { provides } = useSearchCapability();
|
|
9
|
-
const searchState = ref(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
const searchState = ref(initialSearchDocumentState);
|
|
10
|
+
watch(
|
|
11
|
+
[provides, () => toValue(documentId)],
|
|
12
|
+
([providesValue, docId], _, onCleanup) => {
|
|
13
|
+
if (!providesValue) {
|
|
14
|
+
searchState.value = initialSearchDocumentState;
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
const scope = providesValue.forDocument(docId);
|
|
18
|
+
searchState.value = scope.getState();
|
|
19
|
+
const unsubscribe = scope.onStateChange((state) => {
|
|
20
|
+
searchState.value = state;
|
|
21
|
+
});
|
|
22
|
+
onCleanup(unsubscribe);
|
|
23
|
+
},
|
|
24
|
+
{ immediate: true }
|
|
25
|
+
);
|
|
26
|
+
const scopedProvides = computed(() => {
|
|
27
|
+
var _a;
|
|
28
|
+
const docId = toValue(documentId);
|
|
29
|
+
return ((_a = provides.value) == null ? void 0 : _a.forDocument(docId)) ?? null;
|
|
18
30
|
});
|
|
19
31
|
return {
|
|
20
32
|
state: searchState,
|
|
21
|
-
provides
|
|
33
|
+
provides: scopedProvides
|
|
22
34
|
};
|
|
23
35
|
};
|
|
24
36
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
25
37
|
__name: "search-layer",
|
|
26
38
|
props: {
|
|
39
|
+
documentId: {},
|
|
27
40
|
pageIndex: {},
|
|
28
41
|
scale: {},
|
|
29
42
|
highlightColor: { default: "#FFFF00" },
|
|
@@ -32,25 +45,57 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
32
45
|
setup(__props) {
|
|
33
46
|
const props = __props;
|
|
34
47
|
const { provides: searchProvides } = useSearchCapability();
|
|
48
|
+
const documentState = useDocumentState(() => props.documentId);
|
|
35
49
|
const searchResultState = ref(null);
|
|
50
|
+
const scope = computed(() => {
|
|
51
|
+
var _a;
|
|
52
|
+
return ((_a = searchProvides.value) == null ? void 0 : _a.forDocument(props.documentId)) ?? null;
|
|
53
|
+
});
|
|
54
|
+
const actualScale = computed(() => {
|
|
55
|
+
var _a;
|
|
56
|
+
if (props.scale !== void 0) return props.scale;
|
|
57
|
+
return ((_a = documentState.value) == null ? void 0 : _a.scale) ?? 1;
|
|
58
|
+
});
|
|
59
|
+
watch(
|
|
60
|
+
scope,
|
|
61
|
+
(scopeValue, _, onCleanup) => {
|
|
62
|
+
if (!scopeValue) {
|
|
63
|
+
searchResultState.value = null;
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
const currentState = scopeValue.getState();
|
|
67
|
+
searchResultState.value = {
|
|
68
|
+
results: currentState.results,
|
|
69
|
+
activeResultIndex: currentState.activeResultIndex,
|
|
70
|
+
showAllResults: currentState.showAllResults,
|
|
71
|
+
active: currentState.active
|
|
72
|
+
};
|
|
73
|
+
const unsubscribe = scopeValue.onSearchResultStateChange((state) => {
|
|
74
|
+
searchResultState.value = state;
|
|
75
|
+
});
|
|
76
|
+
onCleanup(unsubscribe);
|
|
77
|
+
},
|
|
78
|
+
{ immediate: true }
|
|
79
|
+
);
|
|
36
80
|
const pageResults = computed(() => {
|
|
37
81
|
if (!searchResultState.value) return [];
|
|
38
82
|
return searchResultState.value.results.map((result, originalIndex) => ({ result, originalIndex })).filter(({ result }) => result.pageIndex === props.pageIndex);
|
|
39
83
|
});
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
});
|
|
46
|
-
});
|
|
47
|
-
onUnmounted(() => {
|
|
48
|
-
unsubscribe == null ? void 0 : unsubscribe();
|
|
84
|
+
const resultsToShow = computed(() => {
|
|
85
|
+
if (!searchResultState.value) return [];
|
|
86
|
+
return pageResults.value.filter(
|
|
87
|
+
({ originalIndex }) => searchResultState.value.showAllResults || originalIndex === searchResultState.value.activeResultIndex
|
|
88
|
+
);
|
|
49
89
|
});
|
|
50
90
|
return (_ctx, _cache) => {
|
|
51
|
-
return searchResultState.value ? (openBlock(), createElementBlock("div",
|
|
52
|
-
|
|
53
|
-
|
|
91
|
+
return searchResultState.value && searchResultState.value.active ? (openBlock(), createElementBlock("div", mergeProps({
|
|
92
|
+
key: 0,
|
|
93
|
+
style: {
|
|
94
|
+
pointerEvents: "none"
|
|
95
|
+
}
|
|
96
|
+
}, _ctx.$attrs), [
|
|
97
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(resultsToShow.value, ({ result, originalIndex }, idx) => {
|
|
98
|
+
return openBlock(), createElementBlock(Fragment, {
|
|
54
99
|
key: `result-${idx}`
|
|
55
100
|
}, [
|
|
56
101
|
(openBlock(true), createElementBlock(Fragment, null, renderList(result.rects, (rect, rectIdx) => {
|
|
@@ -58,11 +103,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
58
103
|
key: `rect-${idx}-${rectIdx}`,
|
|
59
104
|
style: normalizeStyle({
|
|
60
105
|
position: "absolute",
|
|
61
|
-
top: `${rect.origin.y *
|
|
62
|
-
left: `${rect.origin.x *
|
|
63
|
-
width: `${rect.size.width *
|
|
64
|
-
height: `${rect.size.height *
|
|
65
|
-
backgroundColor: originalIndex === searchResultState.value.activeResultIndex ?
|
|
106
|
+
top: `${rect.origin.y * actualScale.value}px`,
|
|
107
|
+
left: `${rect.origin.x * actualScale.value}px`,
|
|
108
|
+
width: `${rect.size.width * actualScale.value}px`,
|
|
109
|
+
height: `${rect.size.height * actualScale.value}px`,
|
|
110
|
+
backgroundColor: originalIndex === searchResultState.value.activeResultIndex ? __props.activeHighlightColor : __props.highlightColor,
|
|
66
111
|
mixBlendMode: "multiply",
|
|
67
112
|
transform: "scale(1.02)",
|
|
68
113
|
transformOrigin: "center",
|
|
@@ -71,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
71
116
|
})
|
|
72
117
|
}, null, 4);
|
|
73
118
|
}), 128))
|
|
74
|
-
]);
|
|
119
|
+
], 64);
|
|
75
120
|
}), 128))
|
|
76
121
|
], 16)) : createCommentVNode("", true);
|
|
77
122
|
};
|
package/dist/vue/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-search.ts","../../src/vue/components/search-layer.vue"],"sourcesContent":["import { ref,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/vue/hooks/use-search.ts","../../src/vue/components/search-layer.vue"],"sourcesContent":["import { ref, watch, computed, toValue, type MaybeRefOrGetter, Ref, ComputedRef } from 'vue';\nimport { useCapability, usePlugin } from '@embedpdf/core/vue';\nimport {\n SearchPlugin,\n SearchDocumentState,\n SearchScope,\n initialSearchDocumentState,\n} from '@embedpdf/plugin-search';\n\nexport const useSearchPlugin = () => usePlugin<SearchPlugin>(SearchPlugin.id);\nexport const useSearchCapability = () => useCapability<SearchPlugin>(SearchPlugin.id);\n\n/**\n * Hook for search state for a specific document\n * @param documentId Document ID (can be ref, computed, getter, or plain value)\n */\nexport const useSearch = (\n documentId: MaybeRefOrGetter<string>,\n): {\n state: Ref<SearchDocumentState>;\n provides: ComputedRef<SearchScope | null>;\n} => {\n const { provides } = useSearchCapability();\n const searchState = ref<SearchDocumentState>(initialSearchDocumentState);\n\n watch(\n [provides, () => toValue(documentId)],\n ([providesValue, docId], _, onCleanup) => {\n if (!providesValue) {\n searchState.value = initialSearchDocumentState;\n return;\n }\n\n const scope = providesValue.forDocument(docId);\n\n // Set initial state\n searchState.value = scope.getState();\n\n // Subscribe to changes\n const unsubscribe = scope.onStateChange((state) => {\n searchState.value = state;\n });\n\n onCleanup(unsubscribe);\n },\n { immediate: true },\n );\n\n const scopedProvides = computed(() => {\n const docId = toValue(documentId);\n return provides.value?.forDocument(docId) ?? null;\n });\n\n return {\n state: searchState,\n provides: scopedProvides,\n };\n};\n","<script setup lang=\"ts\">\nimport { ref, watch, computed } from 'vue';\nimport { useDocumentState } from '@embedpdf/core/vue';\nimport type { SearchResultState } from '@embedpdf/plugin-search';\nimport { useSearchCapability } from '../hooks/use-search';\n\ninterface SearchLayerProps {\n documentId: string;\n pageIndex: number;\n scale?: number;\n highlightColor?: string;\n activeHighlightColor?: string;\n}\n\nconst props = withDefaults(defineProps<SearchLayerProps>(), {\n highlightColor: '#FFFF00',\n activeHighlightColor: '#FFBF00',\n});\n\nconst { provides: searchProvides } = useSearchCapability();\nconst documentState = useDocumentState(() => props.documentId);\nconst searchResultState = ref<SearchResultState | null>(null);\n\nconst scope = computed(() => searchProvides.value?.forDocument(props.documentId) ?? null);\n\nconst actualScale = computed(() => {\n if (props.scale !== undefined) return props.scale;\n return documentState.value?.scale ?? 1;\n});\n\nwatch(\n scope,\n (scopeValue, _, onCleanup) => {\n if (!scopeValue) {\n searchResultState.value = null;\n return;\n }\n\n // Set initial state\n const currentState = scopeValue.getState();\n searchResultState.value = {\n results: currentState.results,\n activeResultIndex: currentState.activeResultIndex,\n showAllResults: currentState.showAllResults,\n active: currentState.active,\n };\n\n // Subscribe to changes\n const unsubscribe = scopeValue.onSearchResultStateChange((state) => {\n searchResultState.value = state;\n });\n\n onCleanup(unsubscribe);\n },\n { immediate: true },\n);\n\n// Filter results for current page while preserving original indices\nconst pageResults = computed(() => {\n if (!searchResultState.value) return [];\n\n return searchResultState.value.results\n .map((result, originalIndex) => ({ result, originalIndex }))\n .filter(({ result }) => result.pageIndex === props.pageIndex);\n});\n\n// Decide which results to show\nconst resultsToShow = computed(() => {\n if (!searchResultState.value) return [];\n\n return pageResults.value.filter(\n ({ originalIndex }) =>\n searchResultState.value!.showAllResults ||\n originalIndex === searchResultState.value!.activeResultIndex,\n );\n});\n</script>\n\n<template>\n <div\n v-if=\"searchResultState && searchResultState.active\"\n :style=\"{\n pointerEvents: 'none',\n }\"\n v-bind=\"$attrs\"\n >\n <template v-for=\"({ result, originalIndex }, idx) in resultsToShow\" :key=\"`result-${idx}`\">\n <div\n v-for=\"(rect, rectIdx) in result.rects\"\n :key=\"`rect-${idx}-${rectIdx}`\"\n :style=\"{\n position: 'absolute',\n top: `${rect.origin.y * actualScale}px`,\n left: `${rect.origin.x * actualScale}px`,\n width: `${rect.size.width * actualScale}px`,\n height: `${rect.size.height * actualScale}px`,\n backgroundColor:\n originalIndex === searchResultState.activeResultIndex\n ? activeHighlightColor\n : highlightColor,\n mixBlendMode: 'multiply',\n transform: 'scale(1.02)',\n transformOrigin: 'center',\n transition: 'opacity .3s ease-in-out',\n opacity: 1,\n }\"\n />\n </template>\n </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs","_Fragment","_normalizeStyle"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@embedpdf/plugin-search",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-next.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -34,14 +34,13 @@
|
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@embedpdf/models": "
|
|
37
|
+
"@embedpdf/models": "2.0.0-next.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/react": "^18.2.0",
|
|
41
41
|
"typescript": "^5.0.0",
|
|
42
42
|
"@embedpdf/build": "1.1.0",
|
|
43
|
-
"@embedpdf/core": "
|
|
44
|
-
"@embedpdf/plugin-loader": "1.5.0"
|
|
43
|
+
"@embedpdf/core": "2.0.0-next.1"
|
|
45
44
|
},
|
|
46
45
|
"peerDependencies": {
|
|
47
46
|
"react": ">=16.8.0",
|
|
@@ -49,8 +48,7 @@
|
|
|
49
48
|
"preact": "^10.26.4",
|
|
50
49
|
"vue": ">=3.2.0",
|
|
51
50
|
"svelte": ">=5 <6",
|
|
52
|
-
"@embedpdf/core": "
|
|
53
|
-
"@embedpdf/plugin-loader": "1.5.0"
|
|
51
|
+
"@embedpdf/core": "2.0.0-next.1"
|
|
54
52
|
},
|
|
55
53
|
"files": [
|
|
56
54
|
"dist",
|