mirror of
https://github.com/modernweb-dev/rocket.git
synced 2026-03-21 08:51:18 +00:00
Compare commits
7 Commits
@rocket/el
...
@rocket/el
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
156719f977 | ||
|
|
295cfbdbd8 | ||
|
|
7dd6f4c64f | ||
|
|
b68923b608 | ||
|
|
86c3a4b0e8 | ||
|
|
897892d6f9 | ||
|
|
7b2dc6430f |
23
package.json
23
package.json
@@ -28,6 +28,7 @@
|
||||
"rocket:build": "node packages/cli/src/cli.js build",
|
||||
"search": "node packages/cli/src/cli.js search",
|
||||
"setup": "npm run setup:ts-configs",
|
||||
"setup:patches": "npx patch-package",
|
||||
"setup:ts-configs": "node scripts/generate-ts-configs.mjs",
|
||||
"start": "node packages/cli/src/cli.js start",
|
||||
"test": "yarn test:node && yarn test:web",
|
||||
@@ -50,22 +51,22 @@
|
||||
"@types/chai": "^4.2.14",
|
||||
"@types/fs-extra": "^9.0.6",
|
||||
"@types/mocha": "^8.2.0",
|
||||
"@types/node": "^14.14.16",
|
||||
"@types/node": "^14.14.20",
|
||||
"@types/sinon": "^9.0.10",
|
||||
"@typescript-eslint/eslint-plugin": "^4.11.1",
|
||||
"@typescript-eslint/parser": "^4.11.1",
|
||||
"@web/test-runner": "^0.11.5",
|
||||
"@web/test-runner-commands": "^0.3.0",
|
||||
"@web/test-runner-playwright": "^0.7.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.13.0",
|
||||
"@typescript-eslint/parser": "^4.13.0",
|
||||
"@web/test-runner": "^0.12.2",
|
||||
"@web/test-runner-commands": "^0.4.0",
|
||||
"@web/test-runner-playwright": "^0.8.0",
|
||||
"chai": "^4.2.0",
|
||||
"concurrently": "^5.3.0",
|
||||
"copyfiles": "^2.4.1",
|
||||
"deepmerge": "^4.2.2",
|
||||
"esbuild": "^0.8.26",
|
||||
"eslint": "^7.16.0",
|
||||
"esbuild": "^0.8.31",
|
||||
"eslint": "^7.17.0",
|
||||
"eslint-config-prettier": "^7.1.0",
|
||||
"hanbi": "^0.4.1",
|
||||
"husky": "^4.3.6",
|
||||
"husky": "^4.3.7",
|
||||
"lint-staged": "^10.5.3",
|
||||
"mocha": "^8.2.1",
|
||||
"node-fetch": "^2.6.1",
|
||||
@@ -76,9 +77,9 @@
|
||||
"puppeteer": "^5.5.0",
|
||||
"remark-emoji": "^2.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.35.1",
|
||||
"rollup": "^2.36.1",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"sinon": "^9.2.2",
|
||||
"sinon": "^9.2.3",
|
||||
"ts-node": "^9.1.1",
|
||||
"typescript": "^4.1.3"
|
||||
},
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @rocket/building-rollup
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/building-rollup",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -57,7 +57,7 @@
|
||||
"@web/rollup-plugin-html": "^1.4.0",
|
||||
"@web/rollup-plugin-import-meta-assets": "^1.0.4",
|
||||
"@web/rollup-plugin-polyfills-loader": "^1.0.3",
|
||||
"browserslist": "^4.16.0",
|
||||
"browserslist": "^4.16.1",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"rollup-plugin-workbox": "^6.1.0"
|
||||
}
|
||||
|
||||
@@ -1,5 +1,15 @@
|
||||
# @rocket/cli
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
- 295cfbd: Better support for windows paths
|
||||
- Updated dependencies [897892d]
|
||||
- @rocket/building-rollup@0.1.2
|
||||
- @rocket/eleventy-rocket-nav@0.2.1
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/cli",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -51,16 +51,16 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@11ty/eleventy": "^0.11.1",
|
||||
"@11ty/eleventy-img": "^0.7.3",
|
||||
"@rocket/building-rollup": "^0.1.1",
|
||||
"@11ty/eleventy-img": "^0.7.4",
|
||||
"@rocket/building-rollup": "^0.1.2",
|
||||
"@rocket/core": "^0.1.1",
|
||||
"@rocket/eleventy-plugin-mdjs-unified": "^0.2.0",
|
||||
"@rocket/eleventy-rocket-nav": "^0.2.0",
|
||||
"@rocket/eleventy-rocket-nav": "^0.2.1",
|
||||
"@rollup/plugin-babel": "^5.2.2",
|
||||
"@rollup/plugin-node-resolve": "^11.0.1",
|
||||
"@web/config-loader": "^0.1.3",
|
||||
"@web/dev-server": "^0.1.2",
|
||||
"@web/dev-server-rollup": "^0.3.0",
|
||||
"@web/dev-server": "^0.1.4",
|
||||
"@web/dev-server-rollup": "^0.3.2",
|
||||
"@web/rollup-plugin-copy": "^0.2.0",
|
||||
"command-line-args": "^5.1.1",
|
||||
"command-line-usage": "^6.1.1",
|
||||
|
||||
@@ -36,7 +36,7 @@ export async function normalizeConfig(inConfig) {
|
||||
watch: true,
|
||||
inputDir: 'docs',
|
||||
outputDir: '_site',
|
||||
outputDevDir: path.resolve('_site-dev'),
|
||||
outputDevDir: '_site-dev',
|
||||
build: {},
|
||||
devServer: {},
|
||||
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { processContentWithTitle } = require('@rocket/core/title');
|
||||
const { createPageSocialImage } = require('./createPageSocialImage.cjs');
|
||||
|
||||
@@ -36,7 +35,7 @@ module.exports = {
|
||||
if (data.page.filePathStem) {
|
||||
// filePathStem: '/sub/subsub/index'
|
||||
// filePathStem: '/index',
|
||||
const parts = data.page.filePathStem.split(path.sep);
|
||||
const parts = data.page.filePathStem.split('/');
|
||||
if (parts.length > 2) {
|
||||
return parts[1];
|
||||
}
|
||||
|
||||
@@ -215,7 +215,7 @@ describe('RocketCli e2e', () => {
|
||||
type: 'start',
|
||||
});
|
||||
expect(indexHtml).to.equal(
|
||||
'<p>You can show rocket config data like rocketConfig.absoluteBaseUrl = http://test-domain.com/</p>',
|
||||
'<p>You can show rocket config data like rocketConfig.absoluteBaseUrl = <a href="http://test-domain.com/">http://test-domain.com/</a></p>',
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @rocket/drawer
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/drawer",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -33,7 +33,7 @@
|
||||
"testing"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/overlays": "^0.22.8",
|
||||
"@lion/overlays": "^0.23.2",
|
||||
"lit-element": "^2.4.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @rocket/eleventy-rocket-nav
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/eleventy-rocket-nav",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -27,7 +27,7 @@
|
||||
"eleventy-plugin"
|
||||
],
|
||||
"dependencies": {
|
||||
"dependency-graph": "^0.9.0",
|
||||
"dependency-graph": "^0.10.0",
|
||||
"sax-wasm": "^2.0.0"
|
||||
},
|
||||
"types": "dist-types/index.d.ts"
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
# @rocket/launch
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 86c3a4b: adds themable CSS custom properties to <inline-notification>
|
||||
- 7dd6f4c: Make default logo work with auto generating social media images
|
||||
- Updated dependencies [897892d]
|
||||
- @rocket/drawer@0.1.2
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
@@ -31,26 +31,29 @@ export class InlineNotification extends LitElement {
|
||||
}
|
||||
|
||||
:host([type='tip']) {
|
||||
background-color: rgba(221, 221, 221, 0.3);
|
||||
border-color: #42b983;
|
||||
background-color: var(--inline-notification-tip-background-color, rgba(221, 221, 221, 0.3));
|
||||
border-color: var(--inline-notification-tip-border-color, #42b983);
|
||||
}
|
||||
|
||||
:host([type='warning']) {
|
||||
background-color: rgba(255, 229, 100, 0.2);
|
||||
border-color: #e7c000;
|
||||
}
|
||||
|
||||
:host([type='warning']) h3 {
|
||||
color: #b29400;
|
||||
background-color: var(
|
||||
--inline-notification-warning-background-color,
|
||||
rgba(255, 229, 100, 0.2)
|
||||
);
|
||||
border-color: var(--inline-notification-warning-border-color, #e7c000);
|
||||
}
|
||||
|
||||
:host([type='danger']) {
|
||||
background-color: rgba(192, 0, 0, 0.1);
|
||||
border-color: #c00;
|
||||
background-color: var(--inline-notification-danger-background-color, rgba(192, 0, 0, 0.1));
|
||||
border-color: var(--inline-notification-danger-border-color, #c00);
|
||||
}
|
||||
|
||||
:host([type='warning']) h3 {
|
||||
color: var(--inline-notification-warning-heading-color, #b29400);
|
||||
}
|
||||
|
||||
:host([type='danger']) h3 {
|
||||
color: #900;
|
||||
color: var(--inline-notification-danger-heading-color, #900);
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/launch",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -31,7 +31,7 @@
|
||||
"preset"
|
||||
],
|
||||
"dependencies": {
|
||||
"@rocket/drawer": "^0.1.1",
|
||||
"@rocket/drawer": "^0.1.2",
|
||||
"@rocket/navigation": "^0.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 511.998 511.998" style="enable-background:new 0 0 511.998 511.998;" xml:space="preserve">
|
||||
<g>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.6 KiB |
@@ -1,5 +1,12 @@
|
||||
# Change Log
|
||||
|
||||
## 0.6.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
- b68923b: Add gfm to support markdown tables
|
||||
|
||||
## 0.6.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@mdjs/core",
|
||||
"version": "0.6.1",
|
||||
"version": "0.6.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -54,10 +54,11 @@
|
||||
"rehype-raw": "^5.0.0",
|
||||
"rehype-slug": "^4.0.1",
|
||||
"rehype-stringify": "^8.0.0",
|
||||
"remark": "^11.0.2",
|
||||
"remark": "^13.0.0",
|
||||
"remark-gfm": "^1.0.0",
|
||||
"remark-parse": "^9.0.0",
|
||||
"remark-rehype": "^8.0.0",
|
||||
"unified": "^8.4.2",
|
||||
"unified": "^9.2.0",
|
||||
"unist-util-remove": "^2.0.1",
|
||||
"unist-util-visit": "^2.0.3"
|
||||
},
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
const unified = require('unified');
|
||||
const markdown = require('remark-parse');
|
||||
const gfm = require('remark-gfm');
|
||||
const remark2rehype = require('remark-rehype');
|
||||
const raw = require('rehype-raw');
|
||||
const htmlStringify = require('rehype-stringify');
|
||||
@@ -21,6 +22,7 @@ const { mdjsStoryParse } = require('./mdjsStoryParse.js');
|
||||
/** @type {MdjsProcessPlugin[]} */
|
||||
const defaultMetaPlugins = [
|
||||
{ name: 'markdown', plugin: markdown },
|
||||
{ name: 'gfm', plugin: gfm },
|
||||
{ name: 'mdjsParse', plugin: mdjsParse },
|
||||
{ name: 'mdjsStoryParse', plugin: mdjsStoryParse },
|
||||
// @ts-ignore
|
||||
|
||||
@@ -136,4 +136,18 @@ describe('mdjsProcess', () => {
|
||||
});
|
||||
expect(resultOfArray.html).to.equal(expectedForArray);
|
||||
});
|
||||
|
||||
it('handles tables', async () => {
|
||||
const input = [
|
||||
//
|
||||
'| Page | Type |',
|
||||
'| ----- | ---- |',
|
||||
'| About | Info |',
|
||||
].join('\n');
|
||||
|
||||
const expected =
|
||||
'<table><thead><tr><th>Page</th><th>Type</th></tr></thead><tbody><tr><td>About</td><td>Info</td></tr></tbody></table>';
|
||||
const result = await mdjsProcess(input);
|
||||
expect(result.html.trim()).to.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,17 @@
|
||||
# @rocket/search
|
||||
|
||||
## 0.1.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 897892d: bump dependencies
|
||||
- 7b2dc64: fix(search): improve a11y
|
||||
|
||||
- a11y: add labels to button
|
||||
- ux: replace 'arrow-left' icon with 'x' icon for 'close search' button
|
||||
- perf: makes all templates static
|
||||
- fix: address typescript errors
|
||||
|
||||
## 0.1.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@rocket/search",
|
||||
"version": "0.1.1",
|
||||
"version": "0.1.2",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
@@ -40,7 +40,7 @@
|
||||
"search"
|
||||
],
|
||||
"dependencies": {
|
||||
"@lion/combobox": "^0.1.16",
|
||||
"@lion/combobox": "^0.1.20",
|
||||
"@open-wc/scoped-elements": "^1.3.2",
|
||||
"minisearch": "^3.0.2",
|
||||
"plugins-manager": "^0.2.0",
|
||||
|
||||
@@ -2,11 +2,21 @@ import { css } from '@lion/core';
|
||||
import { LionCombobox } from '@lion/combobox';
|
||||
import { withDropdownConfig } from '@lion/overlays';
|
||||
|
||||
const tmpl = document.createElement('template');
|
||||
tmpl.innerHTML = `
|
||||
<button arrow-left>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
|
||||
<path d="M34 20a.872.872 0 00-.428-.751L20.31 6.25a.875.875 0 00-1.226 1.25l11.861 11.625H6.875a.876.876 0 000 1.75H31.02L19.158 32.5a.877.877 0 00.613 1.5.87.87 0 00.612-.25l13.353-13.089a.876.876 0 00.264-.626l-.001-.017L34 20z" />
|
||||
const closeBtnTmpl = document.createElement('template');
|
||||
closeBtnTmpl.innerHTML = `
|
||||
<button close-btn aria-label="Back">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
const searchBtnTmpl = document.createElement('template');
|
||||
searchBtnTmpl.innerHTML = `
|
||||
<button search-btn aria-label="Search">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129">
|
||||
<path d="M51.6 96.7c11 0 21-3.9 28.8-10.5l35 35c.8.8 1.8 1.2 2.9 1.2s2.1-.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-35-35c6.5-7.8 10.5-17.9 10.5-28.8 0-24.9-20.2-45.1-45.1-45.1-24.8 0-45.1 20.3-45.1 45.1 0 24.9 20.3 45.1 45.1 45.1zm0-82c20.4 0 36.9 16.6 36.9 36.9C88.5 72 72 88.5 51.6 88.5S14.7 71.9 14.7 51.6c0-20.3 16.6-36.9 36.9-36.9z"/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
@@ -35,8 +45,8 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
fill: var(--rocket-search-fill-color, #000);
|
||||
}
|
||||
|
||||
::slotted([slot='prefix'][arrow-left]) {
|
||||
transform: rotate(180deg);
|
||||
::slotted([slot='prefix'][close-btn]) {
|
||||
height: 25px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -79,11 +89,11 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
background: var(--rocket-search-background-color, #fff);
|
||||
}
|
||||
|
||||
:host([show-input]) ::slotted([slot='prefix'][arrow-left]) {
|
||||
:host([show-input]) ::slotted([slot='prefix'][close-btn]) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host([show-input]) ::slotted([slot='prefix'][magnifying-glass]) {
|
||||
:host([show-input]) ::slotted([slot='prefix'][search-btn]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -115,6 +125,7 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
:host {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-group__input {
|
||||
display: block;
|
||||
}
|
||||
@@ -164,9 +175,9 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
return /** @type {typeof LionCombobox['properties'] & { showInput: import("lit-element").PropertyDeclaration } } */ ({
|
||||
showInput: { type: Boolean, reflect: true, attribute: 'show-input' },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
_connectSlotMixin() {
|
||||
@@ -174,7 +185,9 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
Object.keys(this.slots).forEach(slotName => {
|
||||
if (!this.querySelector(`[slot=${slotName}]`)) {
|
||||
const slotFactory = this.slots[slotName];
|
||||
/** @type {HTMLElement | undefined | HTMLElement[]} */
|
||||
let slotEls = slotFactory();
|
||||
if (!slotEls) return;
|
||||
if (!Array.isArray(slotEls)) {
|
||||
slotEls = [slotEls];
|
||||
}
|
||||
@@ -183,6 +196,7 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
if (slotEl instanceof Element) {
|
||||
slotEl.setAttribute('slot', slotName);
|
||||
this.appendChild(slotEl);
|
||||
// @ts-expect-error: explicitly using private field on LionCombobox
|
||||
this.__privateSlots.add(slotName);
|
||||
}
|
||||
}
|
||||
@@ -193,48 +207,33 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
}
|
||||
|
||||
_defineOverlayConfig() {
|
||||
/** @type {'bottom'} */
|
||||
const placement = 'bottom';
|
||||
return {
|
||||
...withDropdownConfig(),
|
||||
popperConfig: {
|
||||
placement: 'bottom-center',
|
||||
// modifiers: {
|
||||
// ...parentConfig?.popperConfig?.modifiers,
|
||||
// offset: {
|
||||
// offset: 100,
|
||||
// enabled: false,
|
||||
// },
|
||||
// keepTogether: {
|
||||
// enabled: true,
|
||||
// },
|
||||
// arrow: {
|
||||
// enabled: true,
|
||||
// }
|
||||
// },
|
||||
placement,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** @type {LionCombobox['slots']} */
|
||||
// @ts-expect-error: explicitly overriding with accessor
|
||||
get slots() {
|
||||
return {
|
||||
...super.slots,
|
||||
// @ts-expect-error: error in LionCombobox types.
|
||||
prefix: () => {
|
||||
const arrowLeft = document.importNode(tmpl.content, true).children[0];
|
||||
arrowLeft.addEventListener('click', () => {
|
||||
const [closeButton] = closeBtnTmpl.content.cloneNode(true).children;
|
||||
closeButton.addEventListener('click', () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
this.showInput = false;
|
||||
}
|
||||
});
|
||||
|
||||
tmpl.innerHTML = `
|
||||
<button magnifying-glass>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129">
|
||||
<path d="M51.6 96.7c11 0 21-3.9 28.8-10.5l35 35c.8.8 1.8 1.2 2.9 1.2s2.1-.4 2.9-1.2c1.6-1.6 1.6-4.2 0-5.8l-35-35c6.5-7.8 10.5-17.9 10.5-28.8 0-24.9-20.2-45.1-45.1-45.1-24.8 0-45.1 20.3-45.1 45.1 0 24.9 20.3 45.1 45.1 45.1zm0-82c20.4 0 36.9 16.6 36.9 36.9C88.5 72 72 88.5 51.6 88.5S14.7 71.9 14.7 51.6c0-20.3 16.6-36.9 36.9-36.9z"/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
const magnifyingClass = document.importNode(tmpl.content, true).children[0];
|
||||
const [searchButton] = searchBtnTmpl.content.cloneNode(true).children;
|
||||
|
||||
magnifyingClass.addEventListener('click', () => {
|
||||
searchButton.addEventListener('click', () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
this.showInput = true;
|
||||
this.updateComplete.then(() => {
|
||||
@@ -245,7 +244,7 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
}
|
||||
});
|
||||
|
||||
return [arrowLeft, magnifyingClass];
|
||||
return [closeButton, searchButton];
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -256,10 +255,12 @@ export class RocketSearchCombobox extends LionCombobox {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
/** @type {'none'} */
|
||||
this.autocomplete = 'none';
|
||||
this.selectionFollowsFocus = false;
|
||||
this.rotateKeyboardNavigation = false;
|
||||
this.showInput = false;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('rocket-search-combobox', RocketSearchCombobox);
|
||||
|
||||
Reference in New Issue
Block a user