@askdialog/dialog-vue 3.4.0 → 3.4.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/README.md +324 -0
- package/dist/dialog-vue.js +2 -2
- package/dist/dialog-vue.umd.cjs +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
# @askdialog/dialog-vue
|
|
2
|
+
|
|
3
|
+
Vue 3 component library for Dialog AI-powered product assistance.
|
|
4
|
+
|
|
5
|
+
## Table of contents
|
|
6
|
+
|
|
7
|
+
- [Installation](#installation)
|
|
8
|
+
- [Usage](#usage)
|
|
9
|
+
- [Available Components](#available-components)
|
|
10
|
+
- [DialogProductBlock](#dialogproductblock)
|
|
11
|
+
- [DialogInput](#dialoginput)
|
|
12
|
+
- [Storefront search](#storefront-search)
|
|
13
|
+
- [useDialogSearch](#usedialogsearch)
|
|
14
|
+
- [DialogSearchBar](#dialogsearchbar)
|
|
15
|
+
- [DialogSearchResults](#dialogsearchresults)
|
|
16
|
+
- [DialogSearchPagination](#dialogsearchpagination)
|
|
17
|
+
- [Theming](#theming)
|
|
18
|
+
- [Development](#development)
|
|
19
|
+
- [TypeScript](#typescript)
|
|
20
|
+
- [Vue Version](#vue-version)
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @askdialog/dialog-vue @askdialog/dialog-sdk
|
|
26
|
+
# or
|
|
27
|
+
pnpm add @askdialog/dialog-vue @askdialog/dialog-sdk
|
|
28
|
+
# or
|
|
29
|
+
yarn add @askdialog/dialog-vue @askdialog/dialog-sdk
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## Usage
|
|
33
|
+
|
|
34
|
+
```vue
|
|
35
|
+
<script setup lang="ts">
|
|
36
|
+
import { Dialog } from '@askdialog/dialog-sdk';
|
|
37
|
+
import { DialogProductBlock } from '@askdialog/dialog-vue';
|
|
38
|
+
import '@askdialog/dialog-vue/style.css';
|
|
39
|
+
|
|
40
|
+
const client = new Dialog({
|
|
41
|
+
apiKey: 'your-api-key',
|
|
42
|
+
locale: 'en',
|
|
43
|
+
callbacks: {
|
|
44
|
+
addToCart: () => Promise.resolve(),
|
|
45
|
+
getProduct: () => Promise.resolve({
|
|
46
|
+
// Product data
|
|
47
|
+
}),
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
|
|
52
|
+
<template>
|
|
53
|
+
<DialogProductBlock
|
|
54
|
+
:client="client"
|
|
55
|
+
product-id="product-123"
|
|
56
|
+
product-title="Product Name"
|
|
57
|
+
/>
|
|
58
|
+
</template>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Available Components
|
|
62
|
+
|
|
63
|
+
### DialogProductBlock
|
|
64
|
+
|
|
65
|
+
Full-featured dialog component with suggestions and input.
|
|
66
|
+
|
|
67
|
+
**Props:**
|
|
68
|
+
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
69
|
+
- `productId` (string) - Product ID (required)
|
|
70
|
+
- `productTitle` (string) - Product title (required)
|
|
71
|
+
- `selectedVariantId` (string, optional) - Selected variant ID
|
|
72
|
+
- `enableInput` (boolean, optional) - Enable input field (default: true)
|
|
73
|
+
|
|
74
|
+
**Example:**
|
|
75
|
+
```vue
|
|
76
|
+
<DialogProductBlock
|
|
77
|
+
:client="client"
|
|
78
|
+
product-id="9403924119882"
|
|
79
|
+
product-title="Blizzard King All-Mountain Snowboard"
|
|
80
|
+
selected-variant-id="variant-123"
|
|
81
|
+
:enable-input="true"
|
|
82
|
+
/>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### DialogInput
|
|
86
|
+
|
|
87
|
+
Standalone input component for asking questions.
|
|
88
|
+
|
|
89
|
+
**Props:**
|
|
90
|
+
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
91
|
+
- `productId` (string) - Product ID (required)
|
|
92
|
+
- `productTitle` (string) - Product title (required)
|
|
93
|
+
- `placeholder` (string, optional) - Input placeholder text
|
|
94
|
+
- `selectedVariantId` (string, optional) - Selected variant ID
|
|
95
|
+
|
|
96
|
+
**Example:**
|
|
97
|
+
```vue
|
|
98
|
+
<DialogInput
|
|
99
|
+
:client="client"
|
|
100
|
+
product-id="9403924119882"
|
|
101
|
+
product-title="Product Name"
|
|
102
|
+
placeholder="Ask something about this product..."
|
|
103
|
+
/>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
### Storefront search
|
|
107
|
+
|
|
108
|
+
Vue binding of the SDK search controller (`createSearchController`): debounce, cancellation, stale-response protection, pagination and search attribution analytics all come from the SDK — these components only render and route.
|
|
109
|
+
|
|
110
|
+
```vue
|
|
111
|
+
<script setup lang="ts">
|
|
112
|
+
import { Dialog } from '@askdialog/dialog-sdk';
|
|
113
|
+
import {
|
|
114
|
+
DialogSearchBar,
|
|
115
|
+
DialogSearchResults,
|
|
116
|
+
useDialogSearch,
|
|
117
|
+
} from '@askdialog/dialog-vue';
|
|
118
|
+
import '@askdialog/dialog-vue/style.css';
|
|
119
|
+
|
|
120
|
+
const client = new Dialog({ apiKey: 'your-api-key', locale: 'en' });
|
|
121
|
+
|
|
122
|
+
const { controller, state } = useDialogSearch({ client });
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<template>
|
|
126
|
+
<DialogSearchBar :controller="controller" placeholder="Search products..." />
|
|
127
|
+
<DialogSearchResults :controller="controller" :state="state" />
|
|
128
|
+
</template>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
#### useDialogSearch
|
|
132
|
+
|
|
133
|
+
Creates one search controller per composable instance and disposes it on unmount.
|
|
134
|
+
|
|
135
|
+
**Options:**
|
|
136
|
+
- `client` (Dialog) - Dialog SDK client instance (required)
|
|
137
|
+
- `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)
|
|
138
|
+
- `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
|
|
139
|
+
- `debounceMs` (number, optional) - Keystroke debounce (default: 250)
|
|
140
|
+
- `hitsPerPage` (number, optional) - Results per page (default: 12)
|
|
141
|
+
- `locale` (string, optional) - Locale forwarded to the search request
|
|
142
|
+
|
|
143
|
+
Options are read once during setup — later changes don't rebind the live controller.
|
|
144
|
+
|
|
145
|
+
**Returns:** `{ controller, state }` — pass both to the components below. `state` is a `ShallowRef`; `state.value.status` is `idle` / `loading` / `success` / `empty` / `error`.
|
|
146
|
+
|
|
147
|
+
#### DialogSearchBar
|
|
148
|
+
|
|
149
|
+
Search input: typing runs a debounced search, submitting (Enter) searches immediately.
|
|
150
|
+
|
|
151
|
+
**Props:**
|
|
152
|
+
- `controller` (SearchController) - From `useDialogSearch` (required)
|
|
153
|
+
- `placeholder` (string, optional) - Input placeholder text (default: `'Search products...'`)
|
|
154
|
+
- `autoFocus` (boolean, optional) - Focus the input on mount (default: false)
|
|
155
|
+
- `submitAriaLabel` (string, optional) - Accessible label of the submit button (default: `'Search'`)
|
|
156
|
+
|
|
157
|
+
#### DialogSearchResults
|
|
158
|
+
|
|
159
|
+
Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. Renders the controller states; successful searches render a scrollable list of `DialogSearchProductCard` rows plus the pagination controls. Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
|
|
160
|
+
|
|
161
|
+
**Props:**
|
|
162
|
+
- `controller` (SearchController) - From `useDialogSearch` (required)
|
|
163
|
+
- `state` (SearchControllerState) - From `useDialogSearch` (required)
|
|
164
|
+
- `locale` (string, optional) - BCP 47 locale used to format the card prices via `Intl.NumberFormat` (browser default when omitted)
|
|
165
|
+
|
|
166
|
+
#### DialogSearchPagination
|
|
167
|
+
|
|
168
|
+
Previous/next controls with a page indicator; hidden while there is a single page. Rendered by `DialogSearchResults` — exported only for custom layouts.
|
|
169
|
+
|
|
170
|
+
**Props:**
|
|
171
|
+
- `controller` (SearchController) - From `useDialogSearch` (required)
|
|
172
|
+
- `state` (SearchControllerState) - From `useDialogSearch` (required)
|
|
173
|
+
|
|
174
|
+
## Theming
|
|
175
|
+
|
|
176
|
+
The components use CSS variables for theming. You can customize the theme through the Dialog SDK client:
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
const client = new Dialog({
|
|
180
|
+
apiKey: 'your-api-key',
|
|
181
|
+
theme: {
|
|
182
|
+
backgroundColor: 'pink',
|
|
183
|
+
primaryColor: 'pink',
|
|
184
|
+
ctaTextColor: 'white',
|
|
185
|
+
ctaBorderType: 'rounded',
|
|
186
|
+
capitalizeCtas: true,
|
|
187
|
+
fontFamily: 'Arial',
|
|
188
|
+
highlightProductName: true,
|
|
189
|
+
title: {
|
|
190
|
+
fontSize: '22px',
|
|
191
|
+
color: 'purple',
|
|
192
|
+
},
|
|
193
|
+
description: {
|
|
194
|
+
color: 'blue',
|
|
195
|
+
fontSize: '18px',
|
|
196
|
+
},
|
|
197
|
+
content: {
|
|
198
|
+
color: 'green',
|
|
199
|
+
fontSize: '10px',
|
|
200
|
+
},
|
|
201
|
+
},
|
|
202
|
+
});
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## Development
|
|
206
|
+
|
|
207
|
+
This section is for contributors working on the library itself.
|
|
208
|
+
|
|
209
|
+
### Prerequisites
|
|
210
|
+
|
|
211
|
+
- Node.js >= 22
|
|
212
|
+
- pnpm >= 10
|
|
213
|
+
|
|
214
|
+
### Setup
|
|
215
|
+
|
|
216
|
+
```bash
|
|
217
|
+
# From monorepo root
|
|
218
|
+
pnpm install
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Development Workflows
|
|
222
|
+
|
|
223
|
+
#### Daily Development
|
|
224
|
+
|
|
225
|
+
Work on components with instant feedback:
|
|
226
|
+
|
|
227
|
+
```bash
|
|
228
|
+
# From monorepo root
|
|
229
|
+
pnpm dev:vue-example
|
|
230
|
+
# Opens vue-example app at http://localhost:5173
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
**What happens:**
|
|
234
|
+
- The example app runs with Vite dev server
|
|
235
|
+
- Components are resolved from **source files** (`packages/vue/src/`) via alias
|
|
236
|
+
- Changes to components are immediately reflected (HMR enabled)
|
|
237
|
+
- No rebuild required
|
|
238
|
+
|
|
239
|
+
#### Testing Built Library
|
|
240
|
+
|
|
241
|
+
Test the library as consumers would receive it from npm:
|
|
242
|
+
|
|
243
|
+
```bash
|
|
244
|
+
# Step 1: Build the library
|
|
245
|
+
pnpm build:vue
|
|
246
|
+
|
|
247
|
+
# Step 2: Run example app against built dist/
|
|
248
|
+
cd packages/vue-example
|
|
249
|
+
pnpm dev:test-dist
|
|
250
|
+
# Or from root: TEST_DIST=true pnpm dev:vue-example
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
**When to use:**
|
|
254
|
+
- Before creating a pull request
|
|
255
|
+
- After modifying build configuration
|
|
256
|
+
- To verify the build works correctly
|
|
257
|
+
- Before publishing a new version
|
|
258
|
+
|
|
259
|
+
### Build Commands
|
|
260
|
+
|
|
261
|
+
```bash
|
|
262
|
+
# Build the library only
|
|
263
|
+
pnpm build:vue
|
|
264
|
+
|
|
265
|
+
# Build all packages in the monorepo
|
|
266
|
+
pnpm build
|
|
267
|
+
|
|
268
|
+
# Clean dist folder
|
|
269
|
+
pnpm --filter @askdialog/dialog-vue clean
|
|
270
|
+
|
|
271
|
+
# Lint code
|
|
272
|
+
pnpm --filter @askdialog/dialog-vue lint
|
|
273
|
+
|
|
274
|
+
# Fix linting issues
|
|
275
|
+
pnpm --filter @askdialog/dialog-vue lint:fix
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
### Project Structure
|
|
279
|
+
|
|
280
|
+
```
|
|
281
|
+
packages/vue/
|
|
282
|
+
├── src/
|
|
283
|
+
│ ├── main.ts # Library entry point
|
|
284
|
+
│ ├── components/ # Exported components
|
|
285
|
+
│ │ ├── index.ts # Component barrel export
|
|
286
|
+
│ │ ├── DialogProductBlock/
|
|
287
|
+
│ │ │ ├── DialogProductBlock.vue
|
|
288
|
+
│ │ │ ├── DialogInput.vue
|
|
289
|
+
│ │ │ ├── ThemeProvider.vue
|
|
290
|
+
│ │ │ └── ...
|
|
291
|
+
│ │ └── DialogSearch/
|
|
292
|
+
│ │ ├── DialogSearchBar.vue
|
|
293
|
+
│ │ ├── DialogSearchResults.vue
|
|
294
|
+
│ │ ├── useDialogSearch.ts
|
|
295
|
+
│ │ └── ...
|
|
296
|
+
│ └── icons/ # Icon components
|
|
297
|
+
├── dist/ # Build output (gitignored)
|
|
298
|
+
├── package.json
|
|
299
|
+
├── vite.config.ts # Library build configuration
|
|
300
|
+
└── project.json # Nx configuration
|
|
301
|
+
```
|
|
302
|
+
|
|
303
|
+
### Publishing
|
|
304
|
+
|
|
305
|
+
```bash
|
|
306
|
+
# From monorepo root
|
|
307
|
+
pnpm publish:vue
|
|
308
|
+
```
|
|
309
|
+
|
|
310
|
+
**Pre-publish checklist:**
|
|
311
|
+
- [ ] All tests pass
|
|
312
|
+
- [ ] Version updated in `package.json`
|
|
313
|
+
- [ ] Tested with built library (`pnpm dev:test-dist`)
|
|
314
|
+
- [ ] Tarball inspected with `pnpm pack`
|
|
315
|
+
- [ ] CHANGELOG updated
|
|
316
|
+
|
|
317
|
+
## TypeScript
|
|
318
|
+
|
|
319
|
+
This package includes TypeScript type definitions. The types are automatically available when you install the package.
|
|
320
|
+
|
|
321
|
+
## Vue Version
|
|
322
|
+
|
|
323
|
+
This package requires Vue 3 or higher as a peer dependency.
|
|
324
|
+
|
package/dist/dialog-vue.js
CHANGED
|
@@ -523,7 +523,7 @@ const We = /* @__PURE__ */ O(Qe, [["render", je], ["__scopeId", "data-v-26a64b58
|
|
|
523
523
|
H(() => {
|
|
524
524
|
oe({
|
|
525
525
|
method: "vue",
|
|
526
|
-
version: "3.4.
|
|
526
|
+
version: "3.4.1"
|
|
527
527
|
}), be("pdp-block");
|
|
528
528
|
});
|
|
529
529
|
const o = A(!0), n = A(void 0), a = A(0), r = T(() => {
|
|
@@ -990,7 +990,7 @@ const dt = /* @__PURE__ */ O(ct, [["render", ut]]), pt = {
|
|
|
990
990
|
return H(() => {
|
|
991
991
|
oe({
|
|
992
992
|
method: "vue",
|
|
993
|
-
version: "3.4.
|
|
993
|
+
version: "3.4.1"
|
|
994
994
|
});
|
|
995
995
|
}), ee(() => {
|
|
996
996
|
i(), a.dispose();
|
package/dist/dialog-vue.umd.cjs
CHANGED
|
@@ -16,4 +16,4 @@
|
|
|
16
16
|
9.01742C10.137 8.83469 9.83145 8.71718 9.22043 8.48217L6.66675 7.49999L9.22043
|
|
17
17
|
6.5178C9.83145 6.28279 10.137 6.16529 10.3939 5.98256C10.6217 5.82061 10.8207
|
|
18
18
|
5.62162 10.9827 5.39386C11.1654 5.13688 11.2829 4.83136 11.5179 4.22034L12.5001
|
|
19
|
-
1.66666Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,ge)]),r[0]||(r[0]=e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"clip0_466_934"},[e.createElementVNode("rect",{width:"20",height:"20",fill:"white"})])],-1))]))}}),Se=["onClick"],ke={class:"dialog-block-suggestions-item-label"},Ce=N(e.defineComponent({__name:"DialogBlockSuggestions",props:{client:{},questions:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=r=>{t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:r,fromQuestionSuggestion:!0})};return(r,i)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.questions,c=>(e.openBlock(),e.createElementBlock("button",{key:c.question,class:"dialog-block-suggestions-item",onClick:a=>n(c.question)},[e.createVNode(Ee,{class:"dialog-block-suggestions-item-icon",color:t.client.theme.primaryColor},null,8,["color"]),e.createElementVNode("span",ke,e.toDisplayString(c.question),1)],8,Se))),128))}}),[["__scopeId","data-v-db34d4b4"]]),be={};function ye(o,t){return e.openBlock(),e.createElementBlock(e.Fragment,null,[t[0]||(t[0]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[1]||(t[1]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[2]||(t[2]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1))],64)}const Te=N(be,[["render",ye],["__scopeId","data-v-26a64b58"]]),we={class:"dialog-block-suggestions-container"},Re=N(e.defineComponent({__name:"DialogBlockSuggestionsContainer",props:{client:{},questions:{},isLoading:{type:Boolean},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("div",we,[t.isLoading||!t.questions?(e.openBlock(),e.createBlock(Te,{key:0})):(e.openBlock(),e.createBlock(Ce,{key:1,client:t.client,questions:t.questions,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t.selectedVariantId},null,8,["client","questions","product-id","product-title","selected-variant-id"]))]))}}),[["__scopeId","data-v-18c9e78b"]]),Ie={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Ne=["stroke"],Be=e.defineComponent({__name:"ArrowIcon",props:{color:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("svg",Ie,[e.createElementVNode("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:t.color||"#ffffff","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ne)]))}}),De=["placeholder"],Ae=["disabled"],x=N(e.defineComponent({__name:"DialogInput",props:{client:{},placeholder:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=e.ref(),r=e.ref(""),i=()=>{var a;(a=n.value)==null||a.focus()},c=()=>{const a=r.value;a.trim()&&(t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:a,fromQuestionSuggestion:!0}),r.value="")};return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:"dialog-input-wrapper",onClick:i},[e.withDirectives(e.createElementVNode("input",{id:"dialog-ask-anything-input-ai-input",ref_key:"inputRef",ref:n,"onUpdate:modelValue":s[0]||(s[0]=p=>r.value=p),class:"dialog-ask-anything-input-ai-input",placeholder:t.placeholder??"Ask anything...",onKeydown:e.withKeys(c,["enter"])},null,40,De),[[e.vModelText,r.value]]),e.createElementVNode("button",{id:"send-message-button-ai-input",class:"dialog-input-submit",disabled:!r.value.trim(),onClick:c},[e.createVNode(Be,{color:t.client.theme.ctaTextColor},null,8,["color"])],8,Ae)]))}}),[["__scopeId","data-v-4f5901c9"]]),Le=e.defineComponent({__name:"ThemeProvider",props:{theme:{}},setup(o){const t=o,n=document.body,r=c=>c.replace(/([A-Z])/g,"-$1").toLowerCase(),i=c=>{c&&Object.keys(c).forEach(a=>{const s=a,p=r(a);if(c[s]!==void 0){if(typeof c[s]=="object"){Object.keys(c[s]).forEach(_=>{var u;const d=_;if(d!==void 0){const g=r(_),C=c[s];n.style.setProperty(`--dialog-theme-${p}-${g}`,(u=C[d])==null?void 0:u.toString())}});return}if(s==="ctaBorderType"){const _=c[s]==="rounded"?"24px":"0";n.style.setProperty(`--dialog-theme-${p}`,_);return}n.style.setProperty(`--dialog-theme-${p}`,c[s].toString())}})};return e.onMounted(()=>{t.theme&&i(t.theme)}),e.watch(()=>t.theme,c=>{c&&i(c)},{deep:!0}),(c,a)=>e.renderSlot(c.$slots,"default")}}),Ve=["dir"],$e=N(e.defineComponent({__name:"DialogProductBlock",props:{client:{},productId:{},productTitle:{},selectedVariantId:{default:void 0},enableInput:{type:Boolean,default:!0}},setup(o){const t=o;e.onMounted(()=>{U({method:"vue",version:"3.4.0"}),v("pdp-block")});const n=e.ref(!0),r=e.ref(void 0),i=e.ref(0),c=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.assistantName}),a=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.description}),s=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.inputPlaceholder}),p=e.computed(()=>{var d;return W((d=t.client.getLocalizationInformations())==null?void 0:d.languageCode)}),_=async()=>{const d=++i.value;n.value=!0,r.value=void 0;try{const u=await t.client.getSuggestions(t.productId);d===i.value&&(r.value=u)}catch(u){console.error("error",u)}finally{d===i.value&&(n.value=!1)}};return e.watch(()=>[t.client,t.productId],()=>{_()},{immediate:!0}),(d,u)=>(e.openBlock(),e.createBlock(Le,{theme:t.client.theme},{default:e.withCtx(()=>{var g;return[e.createElementVNode("div",{id:"dialog-instant",class:"dialog-block-container",dir:p.value},[e.createVNode(me,{title:c.value,description:a.value},null,8,["title","description"]),e.createVNode(Re,{client:t.client,questions:(g=r.value)==null?void 0:g.questions,"is-loading":n.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","questions","is-loading","product-id","product-title","selected-variant-id"]),t.enableInput?(e.openBlock(),e.createBlock(x,{key:0,client:t.client,placeholder:s.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","placeholder","product-id","product-title","selected-variant-id"])):e.createCommentVNode("",!0)],8,Ve)]}),_:1},8,["theme"]))}}),[["__scopeId","data-v-c57aa677"]]),Pe={},Oe={width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"};function Ue(o,t){return e.openBlock(),e.createElementBlock("svg",Oe,t[0]||(t[0]=[e.createElementVNode("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))}const Me=N(Pe,[["render",Ue]]),qe={width:"16",height:"16",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},xe=["fill"],He="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",Ke=e.defineComponent({__name:"ShurikenIcon",props:{color:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("svg",qe,[e.createElementVNode("path",{d:He,fill:t.color||"currentColor"},null,8,xe)]))}}),Fe={class:"dialog-search-bar-field"},Ge={class:"dialog-search-bar-icon"},je=["aria-label","placeholder","autofocus"],Qe=["aria-label"],We=e.defineComponent({__name:"DialogSearchBar",props:{controller:{},placeholder:{default:"Search products..."},autoFocus:{type:Boolean,default:!1},submitAriaLabel:{default:"Search"}},setup(o){const t=o,n=e.ref(""),r=()=>{t.controller.setQuery(n.value)},i=()=>{t.controller.submit(n.value)};return(c,a)=>(e.openBlock(),e.createElementBlock("form",{class:"dialog-search-bar",role:"search",onSubmit:e.withModifiers(i,["prevent"])},[e.createElementVNode("div",Fe,[e.createElementVNode("span",Ge,[e.createVNode(Ke)]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=s=>n.value=s),type:"text",name:"dialog-search-query",class:"dialog-search-bar-input","aria-label":t.placeholder,placeholder:t.placeholder,autofocus:t.autoFocus,onInput:r},null,40,je),[[e.vModelText,n.value]])]),e.createElementVNode("button",{type:"submit",class:"dialog-search-bar-submit","aria-label":t.submitAriaLabel},[e.createVNode(Me)],8,Qe)],32))}}),Ye={key:0,"aria-label":"Search results pages",class:"dialog-search-pagination"},ze=["disabled"],Xe=["disabled"],H=e.defineComponent({__name:"DialogSearchPagination",props:{controller:{},state:{}},setup(o){const t=o,n=e.computed(()=>t.state.response);return(r,i)=>n.value!==void 0&&n.value.nbPages>1?(e.openBlock(),e.createElementBlock("nav",Ye,[e.createElementVNode("button",{type:"button",disabled:n.value.page===0,onClick:i[0]||(i[0]=c=>t.controller.setPage(n.value.page-1))}," Previous ",8,ze),e.createElementVNode("span",null," Page "+e.toDisplayString(n.value.page+1)+" / "+e.toDisplayString(n.value.nbPages),1),e.createElementVNode("button",{type:"button",disabled:n.value.page>=n.value.nbPages-1,onClick:i[1]||(i[1]=c=>t.controller.setPage(n.value.page+1))}," Next ",8,Xe)])):e.createCommentVNode("",!0)}}),L=({amount:o,currencyCode:t},n)=>new Intl.NumberFormat(n,{style:"currency",currency:t}).format(Number(o)),K=({min:o,max:t},n)=>o.amount===t.amount?L(o,n):`${L(o,n)} – ${L(t,n)}`,Ze=(o,t)=>{if(o===void 0)return"";try{return K(o,t)}catch{return""}},ve=(o,t)=>{const n=o.priceRange,r=o.compareAtPriceRange;if(n===void 0||r===void 0||Number(r.min.amount)<=Number(n.min.amount))return"";try{return K(r,t)}catch{return""}},Je=o=>{try{const{protocol:t}=new URL(o,window.location.href);return t==="http:"||t==="https:"?o:void 0}catch{return}},et={class:"dialog-search-card-image"},tt=["src","alt"],ot={class:"dialog-search-card-info"},nt={class:"dialog-search-card-title"},rt={key:0,class:"dialog-search-card-price"},st={key:0,class:"dialog-search-card-compare-at"},F=e.defineComponent({__name:"DialogSearchProductCardContent",props:{hit:{},locale:{}},setup(o){const t=o,n=e.computed(()=>t.hit.product.title??t.hit.product.id),r=e.computed(()=>Ze(t.hit.product.priceRange,t.locale)),i=e.computed(()=>ve(t.hit.product,t.locale));return(c,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",et,[t.hit.product.imageUrl!==void 0?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.hit.product.imageUrl,alt:n.value,loading:"lazy"},null,8,tt)):e.createCommentVNode("",!0)]),e.createElementVNode("div",ot,[e.createElementVNode("p",nt,e.toDisplayString(n.value),1),r.value!==""?(e.openBlock(),e.createElementBlock("p",rt,[e.createTextVNode(e.toDisplayString(r.value),1),i.value!==""?(e.openBlock(),e.createElementBlock("s",st,e.toDisplayString(" "+i.value),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])],64))}}),ct={key:0,class:"dialog-search-card-body"},at=["href"],G=e.defineComponent({__name:"DialogSearchProductCard",props:{controller:{},hit:{},index:{},locale:{}},setup(o){const t=o,n=e.ref();e.watch(()=>t.hit,()=>{n.value!==void 0&&t.controller.observeResult(n.value,t.index)},{immediate:!0,flush:"post"});const r=a=>{const s=a.metaKey||a.ctrlKey||a.shiftKey||a.altKey;t.controller.selectResult(t.index,{navigate:!s})&&a.preventDefault()},i=a=>{a.button===1&&t.controller.selectResult(t.index,{navigate:!1})},c=e.computed(()=>t.hit.product.url===void 0?void 0:Je(t.hit.product.url));return(a,s)=>(e.openBlock(),e.createElementBlock("li",{ref_key:"cardRef",ref:n,class:"dialog-search-card"},[c.value===void 0?(e.openBlock(),e.createElementBlock("div",ct,[e.createVNode(F,{hit:t.hit,locale:t.locale},null,8,["hit","locale"])])):(e.openBlock(),e.createElementBlock("a",{key:1,class:"dialog-search-card-body",href:c.value,onClick:r,onAuxclick:i},[e.createVNode(F,{hit:t.hit,locale:t.locale},null,8,["hit","locale"])],40,at))],512))}}),it=o=>{const t=e.ref(),n=e.ref(void 0),r=e.ref(0);return e.watch(o,(i,c,a)=>{if(!i)return;const s=()=>{const p=t.value;if(p===void 0)return;const _=p.previousElementSibling??p,{top:d,bottom:u,left:g,width:C}=_.getBoundingClientRect();r.value=window.innerHeight;const l=n.value;(l===void 0||l.top!==d||l.bottom!==u||l.left!==g||l.width!==C)&&(n.value={top:d,bottom:u,left:g,width:C})};s(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s),a(()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)})},{immediate:!0,flush:"post"}),{anchorRef:t,rect:n,viewportHeight:r}},lt=(o,t)=>{const n=e.ref(!1),r=e.ref(),i=e.computed(()=>o.value.status!==y.IDLE&&!n.value);e.watch(()=>o.value.query,()=>{n.value=!1}),e.watch(i,(a,s,p)=>{if(!a)return;const _=d=>{var k,b;const u=d.target;if(!(u instanceof Node))return;const g=(k=t.value)==null?void 0:k.previousElementSibling,C=((b=r.value)==null?void 0:b.contains(u))??!1,l=(g==null?void 0:g.contains(u))??!1;!C&&!l&&(n.value=!0)};document.addEventListener("pointerdown",_),p(()=>document.removeEventListener("pointerdown",_))},{immediate:!0});const c=()=>{n.value=!1};return e.onMounted(()=>{var a,s;(s=(a=t.value)==null?void 0:a.previousElementSibling)==null||s.addEventListener("focusin",c)}),e.onUnmounted(()=>{var a,s;(s=(a=t.value)==null?void 0:a.previousElementSibling)==null||s.removeEventListener("focusin",c)}),{isOpen:i,panelRef:r}},dt={key:0,role:"status",class:"dialog-search-status"},ut={key:1,class:"dialog-search-error"},pt={role:"alert",class:"dialog-search-status dialog-search-status-error"},mt={key:2,role:"status",class:"dialog-search-status"},_t={role:"status",class:"dialog-search-status"},ht={class:"dialog-search-results"},A=8,j=16,ft=200,gt=e.defineComponent({__name:"DialogSearchResults",props:{controller:{},state:{},locale:{}},setup(o){const t=o,n=l=>l instanceof Y?`Search failed (${l.status}${l.code?` ${l.code}`:""}): ${l.message}`:"Search failed: network error. Check your connection and try again.",r=(l,k)=>l.bottom>0&&l.top<k,i=(l,k)=>{const b=k-l.bottom-A-j,w=l.top-A-j,m={left:`${l.left}px`,width:`${l.width}px`};return b<ft&&w>b?{...m,bottom:`${k-l.top+A}px`,maxHeight:`${Math.max(w,0)}px`}:{...m,top:`${l.bottom+A}px`,maxHeight:`${Math.max(b,0)}px`}},c=e.computed(()=>t.state),a=e.computed(()=>t.state.status!==y.IDLE),{anchorRef:s,rect:p,viewportHeight:_}=it(a),{isOpen:d,panelRef:u}=lt(c,s),g=e.computed(()=>d.value&&p.value!==void 0&&r(p.value,_.value)),C=e.computed(()=>p.value===void 0?void 0:i(p.value,_.value));return(l,k)=>{var b;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"anchorRef",ref:s},null,512),g.value?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"body"},[e.createElementVNode("div",{ref_key:"panelRef",ref:u,class:"dialog-search-panel",style:e.normalizeStyle(C.value)},[t.state.status===e.unref(y).LOADING?(e.openBlock(),e.createElementBlock("p",dt," Searching “"+e.toDisplayString(t.state.query)+"”… ",1)):t.state.status===e.unref(y).ERROR?(e.openBlock(),e.createElementBlock("div",ut,[e.createElementVNode("p",pt,e.toDisplayString(n(t.state.error)),1),e.createElementVNode("button",{type:"button",class:"dialog-search-retry",onClick:k[0]||(k[0]=w=>t.controller.retry())}," Retry ")])):t.state.status===e.unref(y).EMPTY?(e.openBlock(),e.createElementBlock("p",mt," No products match “"+e.toDisplayString((b=t.state.response)==null?void 0:b.query)+"”. ",1)):t.state.status===e.unref(y).SUCCESS&&t.state.response!==void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createElementVNode("p",_t,e.toDisplayString(t.state.response.nbHits)+" result"+e.toDisplayString(t.state.response.nbHits>1?"s":""),1),e.createElementVNode("ul",ht,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.state.response.hits,(w,m)=>(e.openBlock(),e.createBlock(G,{key:w.id,controller:t.controller,hit:w,index:m,locale:t.locale},null,8,["controller","hit","index","locale"]))),128))]),e.createVNode(H,{controller:t.controller,state:t.state},null,8,["controller","state"])],64)):e.createCommentVNode("",!0)],4)])):e.createCommentVNode("",!0)],64)}}}),Et=o=>{const{client:t,surface:n="search_page",...r}=o,i=ie({search:(s,p)=>t.search(s,p),analytics:{surface:n,trackViewSearchResults:s=>t.trackViewSearchResults(s),trackSelectSearchResult:s=>t.trackSelectSearchResult(s)},...r}),c=e.shallowRef(i.getState()),a=i.subscribe(()=>{c.value=i.getState()});return e.onMounted(()=>{U({method:"vue",version:"3.4.0"})}),e.onUnmounted(()=>{a(),i.dispose()}),{controller:i,state:c}};S.DialogInput=x,S.DialogProductBlock=$e,S.DialogSearchBar=We,S.DialogSearchPagination=H,S.DialogSearchProductCard=G,S.DialogSearchResults=gt,S.useDialogSearch=Et,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
|
|
19
|
+
1.66666Z`,stroke:t.color||"#181825","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,ge)]),r[0]||(r[0]=e.createElementVNode("defs",null,[e.createElementVNode("clipPath",{id:"clip0_466_934"},[e.createElementVNode("rect",{width:"20",height:"20",fill:"white"})])],-1))]))}}),Se=["onClick"],ke={class:"dialog-block-suggestions-item-label"},Ce=N(e.defineComponent({__name:"DialogBlockSuggestions",props:{client:{},questions:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=r=>{t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:r,fromQuestionSuggestion:!0})};return(r,i)=>(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.questions,c=>(e.openBlock(),e.createElementBlock("button",{key:c.question,class:"dialog-block-suggestions-item",onClick:a=>n(c.question)},[e.createVNode(Ee,{class:"dialog-block-suggestions-item-icon",color:t.client.theme.primaryColor},null,8,["color"]),e.createElementVNode("span",ke,e.toDisplayString(c.question),1)],8,Se))),128))}}),[["__scopeId","data-v-db34d4b4"]]),be={};function ye(o,t){return e.openBlock(),e.createElementBlock(e.Fragment,null,[t[0]||(t[0]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[1]||(t[1]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1)),t[2]||(t[2]=e.createElementVNode("div",{class:"dialog-block-suggestions-skeleton-item"},null,-1))],64)}const Te=N(be,[["render",ye],["__scopeId","data-v-26a64b58"]]),we={class:"dialog-block-suggestions-container"},Re=N(e.defineComponent({__name:"DialogBlockSuggestionsContainer",props:{client:{},questions:{},isLoading:{type:Boolean},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("div",we,[t.isLoading||!t.questions?(e.openBlock(),e.createBlock(Te,{key:0})):(e.openBlock(),e.createBlock(Ce,{key:1,client:t.client,questions:t.questions,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t.selectedVariantId},null,8,["client","questions","product-id","product-title","selected-variant-id"]))]))}}),[["__scopeId","data-v-18c9e78b"]]),Ie={width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},Ne=["stroke"],Be=e.defineComponent({__name:"ArrowIcon",props:{color:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("svg",Ie,[e.createElementVNode("path",{d:"M10 16.6667V3.33334M10 3.33334L5 8.33334M10 3.33334L15 8.33334",stroke:t.color||"#ffffff","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,8,Ne)]))}}),De=["placeholder"],Ae=["disabled"],x=N(e.defineComponent({__name:"DialogInput",props:{client:{},placeholder:{},productId:{},productTitle:{},selectedVariantId:{}},setup(o){const t=o,n=e.ref(),r=e.ref(""),i=()=>{var a;(a=n.value)==null||a.focus()},c=()=>{const a=r.value;a.trim()&&(t.client.sendProductMessage({productId:t.productId,productTitle:t.productTitle,selectedVariantId:t.selectedVariantId,question:a,fromQuestionSuggestion:!0}),r.value="")};return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:"dialog-input-wrapper",onClick:i},[e.withDirectives(e.createElementVNode("input",{id:"dialog-ask-anything-input-ai-input",ref_key:"inputRef",ref:n,"onUpdate:modelValue":s[0]||(s[0]=p=>r.value=p),class:"dialog-ask-anything-input-ai-input",placeholder:t.placeholder??"Ask anything...",onKeydown:e.withKeys(c,["enter"])},null,40,De),[[e.vModelText,r.value]]),e.createElementVNode("button",{id:"send-message-button-ai-input",class:"dialog-input-submit",disabled:!r.value.trim(),onClick:c},[e.createVNode(Be,{color:t.client.theme.ctaTextColor},null,8,["color"])],8,Ae)]))}}),[["__scopeId","data-v-4f5901c9"]]),Le=e.defineComponent({__name:"ThemeProvider",props:{theme:{}},setup(o){const t=o,n=document.body,r=c=>c.replace(/([A-Z])/g,"-$1").toLowerCase(),i=c=>{c&&Object.keys(c).forEach(a=>{const s=a,p=r(a);if(c[s]!==void 0){if(typeof c[s]=="object"){Object.keys(c[s]).forEach(_=>{var u;const d=_;if(d!==void 0){const g=r(_),C=c[s];n.style.setProperty(`--dialog-theme-${p}-${g}`,(u=C[d])==null?void 0:u.toString())}});return}if(s==="ctaBorderType"){const _=c[s]==="rounded"?"24px":"0";n.style.setProperty(`--dialog-theme-${p}`,_);return}n.style.setProperty(`--dialog-theme-${p}`,c[s].toString())}})};return e.onMounted(()=>{t.theme&&i(t.theme)}),e.watch(()=>t.theme,c=>{c&&i(c)},{deep:!0}),(c,a)=>e.renderSlot(c.$slots,"default")}}),Ve=["dir"],$e=N(e.defineComponent({__name:"DialogProductBlock",props:{client:{},productId:{},productTitle:{},selectedVariantId:{default:void 0},enableInput:{type:Boolean,default:!0}},setup(o){const t=o;e.onMounted(()=>{U({method:"vue",version:"3.4.1"}),v("pdp-block")});const n=e.ref(!0),r=e.ref(void 0),i=e.ref(0),c=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.assistantName}),a=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.description}),s=e.computed(()=>{var d;return n.value?"":(d=r.value)==null?void 0:d.inputPlaceholder}),p=e.computed(()=>{var d;return W((d=t.client.getLocalizationInformations())==null?void 0:d.languageCode)}),_=async()=>{const d=++i.value;n.value=!0,r.value=void 0;try{const u=await t.client.getSuggestions(t.productId);d===i.value&&(r.value=u)}catch(u){console.error("error",u)}finally{d===i.value&&(n.value=!1)}};return e.watch(()=>[t.client,t.productId],()=>{_()},{immediate:!0}),(d,u)=>(e.openBlock(),e.createBlock(Le,{theme:t.client.theme},{default:e.withCtx(()=>{var g;return[e.createElementVNode("div",{id:"dialog-instant",class:"dialog-block-container",dir:p.value},[e.createVNode(me,{title:c.value,description:a.value},null,8,["title","description"]),e.createVNode(Re,{client:t.client,questions:(g=r.value)==null?void 0:g.questions,"is-loading":n.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","questions","is-loading","product-id","product-title","selected-variant-id"]),t.enableInput?(e.openBlock(),e.createBlock(x,{key:0,client:t.client,placeholder:s.value,"product-id":t.productId,"product-title":t.productTitle,"selected-variant-id":t==null?void 0:t.selectedVariantId},null,8,["client","placeholder","product-id","product-title","selected-variant-id"])):e.createCommentVNode("",!0)],8,Ve)]}),_:1},8,["theme"]))}}),[["__scopeId","data-v-c57aa677"]]),Pe={},Oe={width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"};function Ue(o,t){return e.openBlock(),e.createElementBlock("svg",Oe,t[0]||(t[0]=[e.createElementVNode("path",{d:"M8 13V3M8 3L3 8M8 3L13 8",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)]))}const Me=N(Pe,[["render",Ue]]),qe={width:"16",height:"16",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},xe=["fill"],He="M5.3217 0.588255C5.63241 -0.196084 6.36759 -0.196085 6.6783 0.588254C6.98901 1.37259 7.68193 2.82807 8.42693 3.57307C9.17193 4.31807 10.6274 5.01099 11.4117 5.3217C12.1961 5.63241 12.1961 6.36759 11.4117 6.6783C10.6274 6.98901 9.17193 7.68193 8.42693 8.42693C7.68193 9.17193 6.98901 10.6274 6.6783 11.4117C6.36759 12.1961 5.63241 12.1961 5.3217 11.4117C5.01099 10.6274 4.31807 9.17193 3.57307 8.42693C2.82808 7.68193 1.37259 6.98901 0.588255 6.6783C-0.196084 6.36759 -0.196085 5.63241 0.588254 5.3217C1.37259 5.01099 2.82807 4.31807 3.57307 3.57307C4.31807 2.82808 5.01099 1.37259 5.3217 0.588255Z",Ke=e.defineComponent({__name:"ShurikenIcon",props:{color:{}},setup(o){const t=o;return(n,r)=>(e.openBlock(),e.createElementBlock("svg",qe,[e.createElementVNode("path",{d:He,fill:t.color||"currentColor"},null,8,xe)]))}}),Fe={class:"dialog-search-bar-field"},Ge={class:"dialog-search-bar-icon"},je=["aria-label","placeholder","autofocus"],Qe=["aria-label"],We=e.defineComponent({__name:"DialogSearchBar",props:{controller:{},placeholder:{default:"Search products..."},autoFocus:{type:Boolean,default:!1},submitAriaLabel:{default:"Search"}},setup(o){const t=o,n=e.ref(""),r=()=>{t.controller.setQuery(n.value)},i=()=>{t.controller.submit(n.value)};return(c,a)=>(e.openBlock(),e.createElementBlock("form",{class:"dialog-search-bar",role:"search",onSubmit:e.withModifiers(i,["prevent"])},[e.createElementVNode("div",Fe,[e.createElementVNode("span",Ge,[e.createVNode(Ke)]),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":a[0]||(a[0]=s=>n.value=s),type:"text",name:"dialog-search-query",class:"dialog-search-bar-input","aria-label":t.placeholder,placeholder:t.placeholder,autofocus:t.autoFocus,onInput:r},null,40,je),[[e.vModelText,n.value]])]),e.createElementVNode("button",{type:"submit",class:"dialog-search-bar-submit","aria-label":t.submitAriaLabel},[e.createVNode(Me)],8,Qe)],32))}}),Ye={key:0,"aria-label":"Search results pages",class:"dialog-search-pagination"},ze=["disabled"],Xe=["disabled"],H=e.defineComponent({__name:"DialogSearchPagination",props:{controller:{},state:{}},setup(o){const t=o,n=e.computed(()=>t.state.response);return(r,i)=>n.value!==void 0&&n.value.nbPages>1?(e.openBlock(),e.createElementBlock("nav",Ye,[e.createElementVNode("button",{type:"button",disabled:n.value.page===0,onClick:i[0]||(i[0]=c=>t.controller.setPage(n.value.page-1))}," Previous ",8,ze),e.createElementVNode("span",null," Page "+e.toDisplayString(n.value.page+1)+" / "+e.toDisplayString(n.value.nbPages),1),e.createElementVNode("button",{type:"button",disabled:n.value.page>=n.value.nbPages-1,onClick:i[1]||(i[1]=c=>t.controller.setPage(n.value.page+1))}," Next ",8,Xe)])):e.createCommentVNode("",!0)}}),L=({amount:o,currencyCode:t},n)=>new Intl.NumberFormat(n,{style:"currency",currency:t}).format(Number(o)),K=({min:o,max:t},n)=>o.amount===t.amount?L(o,n):`${L(o,n)} – ${L(t,n)}`,Ze=(o,t)=>{if(o===void 0)return"";try{return K(o,t)}catch{return""}},ve=(o,t)=>{const n=o.priceRange,r=o.compareAtPriceRange;if(n===void 0||r===void 0||Number(r.min.amount)<=Number(n.min.amount))return"";try{return K(r,t)}catch{return""}},Je=o=>{try{const{protocol:t}=new URL(o,window.location.href);return t==="http:"||t==="https:"?o:void 0}catch{return}},et={class:"dialog-search-card-image"},tt=["src","alt"],ot={class:"dialog-search-card-info"},nt={class:"dialog-search-card-title"},rt={key:0,class:"dialog-search-card-price"},st={key:0,class:"dialog-search-card-compare-at"},F=e.defineComponent({__name:"DialogSearchProductCardContent",props:{hit:{},locale:{}},setup(o){const t=o,n=e.computed(()=>t.hit.product.title??t.hit.product.id),r=e.computed(()=>Ze(t.hit.product.priceRange,t.locale)),i=e.computed(()=>ve(t.hit.product,t.locale));return(c,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",et,[t.hit.product.imageUrl!==void 0?(e.openBlock(),e.createElementBlock("img",{key:0,src:t.hit.product.imageUrl,alt:n.value,loading:"lazy"},null,8,tt)):e.createCommentVNode("",!0)]),e.createElementVNode("div",ot,[e.createElementVNode("p",nt,e.toDisplayString(n.value),1),r.value!==""?(e.openBlock(),e.createElementBlock("p",rt,[e.createTextVNode(e.toDisplayString(r.value),1),i.value!==""?(e.openBlock(),e.createElementBlock("s",st,e.toDisplayString(" "+i.value),1)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0)])],64))}}),ct={key:0,class:"dialog-search-card-body"},at=["href"],G=e.defineComponent({__name:"DialogSearchProductCard",props:{controller:{},hit:{},index:{},locale:{}},setup(o){const t=o,n=e.ref();e.watch(()=>t.hit,()=>{n.value!==void 0&&t.controller.observeResult(n.value,t.index)},{immediate:!0,flush:"post"});const r=a=>{const s=a.metaKey||a.ctrlKey||a.shiftKey||a.altKey;t.controller.selectResult(t.index,{navigate:!s})&&a.preventDefault()},i=a=>{a.button===1&&t.controller.selectResult(t.index,{navigate:!1})},c=e.computed(()=>t.hit.product.url===void 0?void 0:Je(t.hit.product.url));return(a,s)=>(e.openBlock(),e.createElementBlock("li",{ref_key:"cardRef",ref:n,class:"dialog-search-card"},[c.value===void 0?(e.openBlock(),e.createElementBlock("div",ct,[e.createVNode(F,{hit:t.hit,locale:t.locale},null,8,["hit","locale"])])):(e.openBlock(),e.createElementBlock("a",{key:1,class:"dialog-search-card-body",href:c.value,onClick:r,onAuxclick:i},[e.createVNode(F,{hit:t.hit,locale:t.locale},null,8,["hit","locale"])],40,at))],512))}}),it=o=>{const t=e.ref(),n=e.ref(void 0),r=e.ref(0);return e.watch(o,(i,c,a)=>{if(!i)return;const s=()=>{const p=t.value;if(p===void 0)return;const _=p.previousElementSibling??p,{top:d,bottom:u,left:g,width:C}=_.getBoundingClientRect();r.value=window.innerHeight;const l=n.value;(l===void 0||l.top!==d||l.bottom!==u||l.left!==g||l.width!==C)&&(n.value={top:d,bottom:u,left:g,width:C})};s(),window.addEventListener("scroll",s,!0),window.addEventListener("resize",s),a(()=>{window.removeEventListener("scroll",s,!0),window.removeEventListener("resize",s)})},{immediate:!0,flush:"post"}),{anchorRef:t,rect:n,viewportHeight:r}},lt=(o,t)=>{const n=e.ref(!1),r=e.ref(),i=e.computed(()=>o.value.status!==y.IDLE&&!n.value);e.watch(()=>o.value.query,()=>{n.value=!1}),e.watch(i,(a,s,p)=>{if(!a)return;const _=d=>{var k,b;const u=d.target;if(!(u instanceof Node))return;const g=(k=t.value)==null?void 0:k.previousElementSibling,C=((b=r.value)==null?void 0:b.contains(u))??!1,l=(g==null?void 0:g.contains(u))??!1;!C&&!l&&(n.value=!0)};document.addEventListener("pointerdown",_),p(()=>document.removeEventListener("pointerdown",_))},{immediate:!0});const c=()=>{n.value=!1};return e.onMounted(()=>{var a,s;(s=(a=t.value)==null?void 0:a.previousElementSibling)==null||s.addEventListener("focusin",c)}),e.onUnmounted(()=>{var a,s;(s=(a=t.value)==null?void 0:a.previousElementSibling)==null||s.removeEventListener("focusin",c)}),{isOpen:i,panelRef:r}},dt={key:0,role:"status",class:"dialog-search-status"},ut={key:1,class:"dialog-search-error"},pt={role:"alert",class:"dialog-search-status dialog-search-status-error"},mt={key:2,role:"status",class:"dialog-search-status"},_t={role:"status",class:"dialog-search-status"},ht={class:"dialog-search-results"},A=8,j=16,ft=200,gt=e.defineComponent({__name:"DialogSearchResults",props:{controller:{},state:{},locale:{}},setup(o){const t=o,n=l=>l instanceof Y?`Search failed (${l.status}${l.code?` ${l.code}`:""}): ${l.message}`:"Search failed: network error. Check your connection and try again.",r=(l,k)=>l.bottom>0&&l.top<k,i=(l,k)=>{const b=k-l.bottom-A-j,w=l.top-A-j,m={left:`${l.left}px`,width:`${l.width}px`};return b<ft&&w>b?{...m,bottom:`${k-l.top+A}px`,maxHeight:`${Math.max(w,0)}px`}:{...m,top:`${l.bottom+A}px`,maxHeight:`${Math.max(b,0)}px`}},c=e.computed(()=>t.state),a=e.computed(()=>t.state.status!==y.IDLE),{anchorRef:s,rect:p,viewportHeight:_}=it(a),{isOpen:d,panelRef:u}=lt(c,s),g=e.computed(()=>d.value&&p.value!==void 0&&r(p.value,_.value)),C=e.computed(()=>p.value===void 0?void 0:i(p.value,_.value));return(l,k)=>{var b;return e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("div",{ref_key:"anchorRef",ref:s},null,512),g.value?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"body"},[e.createElementVNode("div",{ref_key:"panelRef",ref:u,class:"dialog-search-panel",style:e.normalizeStyle(C.value)},[t.state.status===e.unref(y).LOADING?(e.openBlock(),e.createElementBlock("p",dt," Searching “"+e.toDisplayString(t.state.query)+"”… ",1)):t.state.status===e.unref(y).ERROR?(e.openBlock(),e.createElementBlock("div",ut,[e.createElementVNode("p",pt,e.toDisplayString(n(t.state.error)),1),e.createElementVNode("button",{type:"button",class:"dialog-search-retry",onClick:k[0]||(k[0]=w=>t.controller.retry())}," Retry ")])):t.state.status===e.unref(y).EMPTY?(e.openBlock(),e.createElementBlock("p",mt," No products match “"+e.toDisplayString((b=t.state.response)==null?void 0:b.query)+"”. ",1)):t.state.status===e.unref(y).SUCCESS&&t.state.response!==void 0?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createElementVNode("p",_t,e.toDisplayString(t.state.response.nbHits)+" result"+e.toDisplayString(t.state.response.nbHits>1?"s":""),1),e.createElementVNode("ul",ht,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.state.response.hits,(w,m)=>(e.openBlock(),e.createBlock(G,{key:w.id,controller:t.controller,hit:w,index:m,locale:t.locale},null,8,["controller","hit","index","locale"]))),128))]),e.createVNode(H,{controller:t.controller,state:t.state},null,8,["controller","state"])],64)):e.createCommentVNode("",!0)],4)])):e.createCommentVNode("",!0)],64)}}}),Et=o=>{const{client:t,surface:n="search_page",...r}=o,i=ie({search:(s,p)=>t.search(s,p),analytics:{surface:n,trackViewSearchResults:s=>t.trackViewSearchResults(s),trackSelectSearchResult:s=>t.trackSelectSearchResult(s)},...r}),c=e.shallowRef(i.getState()),a=i.subscribe(()=>{c.value=i.getState()});return e.onMounted(()=>{U({method:"vue",version:"3.4.1"})}),e.onUnmounted(()=>{a(),i.dispose()}),{controller:i,state:c}};S.DialogInput=x,S.DialogProductBlock=$e,S.DialogSearchBar=We,S.DialogSearchPagination=H,S.DialogSearchProductCard=G,S.DialogSearchResults=gt,S.useDialogSearch=Et,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
|