{"_id":"@askdialog/dialog-vue","_rev":"82-b14b0f5378f1a56bceb06596c42b9e90","name":"@askdialog/dialog-vue","dist-tags":{"beta":"0.0.0-beta-20260929090414","latest":"3.9.0"},"versions":{"1.0.0":{"name":"@askdialog/dialog-vue","version":"1.0.0","author":{"name":"Dialog"},"_id":"@askdialog/dialog-vue@1.0.0","maintainers":[{"name":"louisdialog","email":"louis@askdialog.com"},{"name":"carton","email":"benjamin.changala@gmail.com"}],"dist":{"shasum":"a2f75275f83d71bdd5c2c0113b763dc97648bd83","tarball":"https://registry.npmjs.org/@askdialog/dialog-vue/-/dialog-vue-1.0.0.tgz","fileCount":6,"integrity":"sha512-tYxtzWvlgvtIwQg0RaI6TnHW4N6n94UcKb4/000F/h16EROyUzLwz8cRAAFDf7EMQW3sxNxD3yBu9VlZneiyQA==","signatures":[{"sig":"MEUCIQCCxaVW+1jw4yURNn0hngWtwcYw/UKjCzzJdBT+MjIP0gIgEezQLNJtTJ2G1lr+7Qs1Em9hgOHpHNY92X16yNItsQA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":461018},"main":"./dist/dialog-vue.umd.js","type":"module","_from":"file:askdialog-dialog-vue-1.0.0.tgz","types":"./dist/main.d.ts","module":"./dist/dialog-vue.js","exports":{".":{"types":"./dist/main.d.ts","import":"./dist/dialog-vue.js","default":"./dist/dialog-vue.js","require":"./dist/dialog-vue.umd.js"},"./style.css":"./dist/dialog-vue.css"},"private":false,"scripts":{"dev":"vite","link":"pnpm run build && pnpm link --global","build":"pnpm run clean && vue-tsc -b && vite build","clean":"rm -rf dist","preview":"vite preview","test-linter":"ESLINT_USE_FLAT_CONFIG=true eslint --ext .ts,.vue . --fix"},"_npmUser":{"name":"carton","email":"benjamin.changala@gmail.com"},"_resolved":"/private/var/folders/31/n9c946xn3474tg_tm1ln1x240000gn/T/8d1318e2352b5046097df66a123cf386/askdialog-dialog-vue-1.0.0.tgz","_integrity":"sha512-tYxtzWvlgvtIwQg0RaI6TnHW4N6n94UcKb4/000F/h16EROyUzLwz8cRAAFDf7EMQW3sxNxD3yBu9VlZneiyQA==","_npmVersion":"10.8.2","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n\n\n \n\n```\n\n## Available Components\n\n### DialogProductBlock\n\nProduct block with up to 2 product questions and an \"Ask something else\" button that opens the assistant with up to 5 product questions about the product. The button label is in English, French or Spanish depending on the client locale (English otherwise).\n\n**Props:**\n- `client` (Dialog) - Dialog SDK client instance (required)\n- `productId` (string) - Product ID (required)\n- `productTitle` (string) - Product title (required)\n- `selectedVariantId` (string, optional) - Selected variant ID\n- `enableInput` (boolean, optional) - Deprecated. Shows the input field instead of the \"Ask something else\" button (default: false)\n\n**Example:**\n```vue\n\n```\n\n### DialogInput\n\nStandalone input component for asking questions. It shows the fixed \"Ask the AI a question\" text and an AI disclosure line, in English, French or Spanish depending on the client locale (English otherwise).\n\n**Props:**\n- `client` (Dialog) - Dialog SDK client instance (required)\n- `productId` (string) - Product ID (required)\n- `productTitle` (string) - Product title (required)\n- `placeholder` (string, optional) - Deprecated, ignored\n- `selectedVariantId` (string, optional) - Selected variant ID\n\n**Example:**\n```vue\n\n```\n\n### Storefront search\n\n`useDialogSearch` binds the SDK controller to component state. The controller manages requests and analytics; components handle rendering and navigation.\n\n```vue\n\n\n\n \n \n\n```\n\n#### useDialogSearch\n\nCreates one search controller per composable instance and disposes it on unmount.\n\n**Options:**\n- `client` (Dialog) - Dialog SDK client instance (required)\n- `language` (string, required) - Lowercase ISO 639-1 language code, e.g. `fr`\n- `currency` (string, required) - ISO 4217 currency, e.g. `EUR`\n- `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)\n- `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `` links navigate natively.\n- `debounceMs` (number, optional) - Keystroke debounce (default: 250)\n- `hitsPerPage` (number, optional) - Results per page (default: 12)\n- `sections` (SearchSection[], optional) - Extra indices searched alongside the products; `collections` fills the collections column of `DialogSearchResults`. Only request an index the catalog exposes: a missing one fails the whole search.\n\nSearch language and currency are explicit and independent of `client.locale`, which can be a regional locale such as `fr-FR`.\n\nOptions are read once during setup — later changes don't rebind the live controller.\n\n**Returns:** `{ controller, state, theme }` — pass them to the components below; `theme` is the client's theme, for `DialogSearchResults`. `state` is a `ShallowRef`; `state.value.status` is `idle` / `loading` / `success` / `empty` / `error`.\n\nWith the collections column, for a catalog that exposes a collections index:\n\n```ts\nconst { controller, state, theme } = useDialogSearch({\n client,\n language: 'en',\n currency: client.currency,\n sections: [{ index: 'collections', hitsPerPage: 5 }],\n});\n```\n\n#### DialogSearchBar\n\nSearch input: typing runs a debounced search, submitting (Enter) searches immediately.\n\n**Props:**\n- `controller` (SearchController) - From `useDialogSearch` (required)\n- `placeholder` (string, optional) - Input placeholder text (default: `'Search products...'`)\n- `autoFocus` (boolean, optional) - Focus the input on mount (default: false)\n- `submitAriaLabel` (string, optional) - Accessible label of the submit button (default: `'Search'`)\n\n#### DialogSearchResults\n\nFloating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, centered on the bar (up to 1440px wide, filling the viewport) and 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. It shows the same layout as the Shopify search overlay: a collections column on the left when `sections` requests them, the products on the right as a list or a 3-column grid, the query match emphasized in every title, and either a \"See all results\" button or the pagination controls. Below 768px the panel stacks, collections in a horizontal rail above the products. Colors, radii and font follow the SDK theme (dark palette when `backgroundColor` is dark, straight or rounded corners from `ctaBorderType`). 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.\n\n**Props:**\n- `controller` (SearchController) - From `useDialogSearch` (required)\n- `state` (SearchControllerState) - From `useDialogSearch` (required)\n- `locale` (string, optional) - BCP 47 locale for prices, counts and labels (English labels and browser number format when omitted)\n- `theme` (Theme, optional) - The client's theme, as returned by `useDialogSearch`; styles the panel (palette, radii, font)\n- `layout` (`'list' | 'grid'`, optional) - Products layout (default: `'list'`)\n- `seeAllHref` ((query) => string, optional) - Link of the \"See all results\" footer button; omitted, the panel paginates instead\n\n#### DialogSearchPagination\n\nPrevious/next controls with a page indicator; hidden while there is a single page. Rendered by `DialogSearchResults` — exported only for custom layouts.\n\n**Props:**\n- `controller` (SearchController) - From `useDialogSearch` (required)\n- `state` (SearchControllerState) - From `useDialogSearch` (required)\n- `locale` (string, optional) - Locale of the button labels\n\n## Theming\n\nThe components use CSS variables for theming. You can customize the theme through the Dialog SDK client:\n\n```ts\nconst client = new Dialog({\n apiKey: 'your-api-key',\n theme: {\n backgroundColor: 'pink',\n primaryColor: 'pink',\n ctaTextColor: 'white',\n ctaBorderType: 'rounded',\n capitalizeCtas: true,\n fontFamily: 'Arial',\n highlightProductName: true,\n title: {\n fontSize: '22px',\n color: 'purple',\n },\n description: {\n color: 'blue',\n fontSize: '18px',\n },\n content: {\n color: 'green',\n fontSize: '10px',\n },\n },\n});\n```\n\n## Development\n\nThis section is for contributors working on the library itself.\n\n### Prerequisites\n\n- Node.js >= 22\n- pnpm >= 10\n\n### Setup\n\n```bash\n# From monorepo root\npnpm install\n```\n\n### Development Workflows\n\n#### Daily Development\n\nWork on components with instant feedback:\n\n```bash\n# From monorepo root\npnpm dev:vue-example\n# Opens vue-example app at http://localhost:5173\n```\n\n**What happens:**\n- The example app runs with Vite dev server\n- Components are resolved from **source files** (`packages/vue/src/`) via alias\n- Changes to components are immediately reflected (HMR enabled)\n- No rebuild required\n\n#### Testing Built Library\n\nTest the library as consumers would receive it from npm:\n\n```bash\n# Step 1: Build the library\npnpm build:vue\n\n# Step 2: Run example app against built dist/\ncd packages/vue-example\npnpm dev:test-dist\n# Or from root: TEST_DIST=true pnpm dev:vue-example\n```\n\n**When to use:**\n- Before creating a pull request\n- After modifying build configuration\n- To verify the build works correctly\n- Before publishing a new version\n\n### Build Commands\n\n```bash\n# Build the library only\npnpm build:vue\n\n# Build all packages in the monorepo\npnpm build\n\n# Clean dist folder\npnpm --filter @askdialog/dialog-vue clean\n\n# Lint code\npnpm --filter @askdialog/dialog-vue lint\n\n# Fix linting issues\npnpm --filter @askdialog/dialog-vue lint:fix\n```\n\n### Project Structure\n\n```\npackages/vue/\n├── src/\n│ ├── main.ts # Library entry point\n│ ├── components/ # Exported components\n│ │ ├── index.ts # Component barrel export\n│ │ ├── DialogProductBlock/\n│ │ │ ├── DialogProductBlock.vue\n│ │ │ ├── DialogInput.vue\n│ │ │ ├── ThemeProvider.vue\n│ │ │ └── ...\n│ │ └── DialogSearch/\n│ │ ├── DialogSearchBar.vue\n│ │ ├── DialogSearchResults.vue\n│ │ ├── useDialogSearch.ts\n│ │ └── ...\n│ └── icons/ # Icon components\n├── dist/ # Build output (gitignored)\n├── package.json\n├── vite.config.ts # Library build configuration\n└── project.json # Nx configuration\n```\n\n### Publishing\n\n```bash\n# From monorepo root\npnpm publish:vue\n```\n\n**Pre-publish checklist:**\n- [ ] All tests pass\n- [ ] Version updated in `package.json`\n- [ ] Tested with built library (`pnpm dev:test-dist`)\n- [ ] Tarball inspected with `pnpm pack`\n- [ ] CHANGELOG updated\n\n## TypeScript\n\nThis package includes TypeScript type definitions. The types are automatically available when you install the package.\n\n## Vue Version\n\nThis package requires Vue 3 or higher as a peer dependency.\n\n","readmeFilename":"README.md"}