@blockquote-web-components/blockquote-base-embedded-webview 1.3.0 → 1.3.2
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 +33 -33
- package/package.json +12 -19
- package/src/BlockquoteBaseEmbeddedWebview.js +1 -1
- package/src/BlockquoteBaseEmbeddedWebviewElement.js +1 -1
- package/src/BlockquoteBaseEmbeddedWebviewResize.js +1 -1
- package/src/BlockquoteBaseEmbeddedWebviewSize.js +1 -1
- package/src/styles/{BlockquoteBaseEmbeddedWebviewElement-styles.js → blockquote-base-embedded-webview-element-styles.css.js} +1 -1
- package/src/styles/{BlockquoteBaseEmbeddedWebviewResize-styles.js → blockquote-base-embedded-webview-resize-styles.css.js} +1 -1
- package/src/styles/{BlockquoteBaseEmbeddedWebviewSize-styles.js → blockquote-base-embedded-webview-size-styles.css.js} +1 -1
- package/src/styles/{BlockquoteBaseEmbeddedWebview-styles.js → blockquote-base-embedded-webview-styles.css.js} +2 -3
package/README.md
CHANGED
|
@@ -55,15 +55,15 @@
|
|
|
55
55
|
```html
|
|
56
56
|
<blockquote-base-embedded-webview-size
|
|
57
57
|
screen-sizes="[
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
58
|
+
{ width: 360, height: 640, id: '360x640' },
|
|
59
|
+
{ width: 360, height: 800, id: '360x800' },
|
|
60
|
+
{ width: 414, height: 896, id: '414x896' },
|
|
61
|
+
{ width: 768, height: 1024, id: '768x1024' },
|
|
62
|
+
{ width: 810, height: 1080, id: '810x1080' },
|
|
63
|
+
{ width: 1280, height: 800, id: '1280x800' },
|
|
64
|
+
{ width: 1366, height: 768, id: '1366x768' },
|
|
65
|
+
{ width: 1536, height: 864, id: '1536x864' },
|
|
66
|
+
{ width: 1920, height: 1080, id: '1920x1080' },
|
|
67
67
|
]"
|
|
68
68
|
></blockquote-base-embedded-webview-size>
|
|
69
69
|
```
|
|
@@ -110,8 +110,8 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
110
110
|
|
|
111
111
|
```html
|
|
112
112
|
<blockquote-base-embedded-webview heading="My demo title">
|
|
113
|
-
|
|
114
|
-
|
|
113
|
+
<template data-src="./base.html" data-option="Base" data-description="base - description"></template>
|
|
114
|
+
<template data-src="./complex.html" data-option="Complex" data-description="complex - description"></template>
|
|
115
115
|
</blockquote-base-embedded-webview>
|
|
116
116
|
```
|
|
117
117
|
|
|
@@ -120,32 +120,32 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
120
120
|
```html
|
|
121
121
|
<!DOCTYPE html>
|
|
122
122
|
<html lang="en">
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
123
|
+
<head>
|
|
124
|
+
<title>Demo Base</title>
|
|
125
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
126
|
+
<meta charset="utf-8" />
|
|
127
|
+
<style>
|
|
128
|
+
:root {
|
|
129
|
+
font: normal medium/1.25 sans-serif;
|
|
130
|
+
}
|
|
131
|
+
body {
|
|
132
|
+
margin: 0;
|
|
133
|
+
}
|
|
134
|
+
[data-embedded] .hidden {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
</style>
|
|
138
|
+
</head>
|
|
139
|
+
<body>
|
|
140
|
+
<h1 class="hidden">Heading</h1>
|
|
141
|
+
<p>Base Demo</p>
|
|
142
|
+
</body>
|
|
143
143
|
</html>
|
|
144
144
|
```
|
|
145
145
|
|
|
146
|
-
|
|
146
|
+
## Exports
|
|
147
147
|
|
|
148
|
-
|
|
148
|
+
- BlockquoteBaseEmbeddedWebview
|
|
149
149
|
|
|
150
150
|
## Properties
|
|
151
151
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-base-embedded-webview",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -42,17 +42,17 @@
|
|
|
42
42
|
"./index.js": {
|
|
43
43
|
"default": "./index.js"
|
|
44
44
|
},
|
|
45
|
-
"./src/styles/
|
|
46
|
-
"default": "./src/styles/
|
|
45
|
+
"./src/styles/blockquote-base-embedded-webview-styles.js": {
|
|
46
|
+
"default": "./src/styles/blockquote-base-embedded-webview-styles.js"
|
|
47
47
|
},
|
|
48
|
-
"./src/styles/
|
|
49
|
-
"default": "./src/styles/
|
|
48
|
+
"./src/styles/blockquote-base-embedded-webview-element-styles.js": {
|
|
49
|
+
"default": "./src/styles/blockquote-base-embedded-webview-element-styles.js"
|
|
50
50
|
},
|
|
51
|
-
"./src/styles/
|
|
52
|
-
"default": "./src/styles/
|
|
51
|
+
"./src/styles/blockquote-base-embedded-webview-resize-styles.js": {
|
|
52
|
+
"default": "./src/styles/blockquote-base-embedded-webview-resize-styles.js"
|
|
53
53
|
},
|
|
54
|
-
"./src/styles/
|
|
55
|
-
"default": "./src/styles/
|
|
54
|
+
"./src/styles/blockquote-base-embedded-webview-size-styles.js": {
|
|
55
|
+
"default": "./src/styles/blockquote-base-embedded-webview-size-styles.js"
|
|
56
56
|
}
|
|
57
57
|
},
|
|
58
58
|
"main": "index.js",
|
|
@@ -81,16 +81,9 @@
|
|
|
81
81
|
"sass:watch": "sass-style-template",
|
|
82
82
|
"sort:package": "npx sort-package-json",
|
|
83
83
|
"start": "concurrently -k -r \"npm:sass:watch\" \"npm:vite\"",
|
|
84
|
-
"start:wds": "concurrently -k -r \"npm:sass:watch\" \"npm:wds\"",
|
|
85
84
|
"test": "wtr --coverage",
|
|
86
85
|
"test:watch": "wtr --watch",
|
|
87
|
-
"vite": "vite"
|
|
88
|
-
"wds": "web-dev-server"
|
|
89
|
-
},
|
|
90
|
-
"husky": {
|
|
91
|
-
"hooks": {
|
|
92
|
-
"pre-commit": "lint-staged"
|
|
93
|
-
}
|
|
86
|
+
"vite": "vite"
|
|
94
87
|
},
|
|
95
88
|
"lint-staged": {
|
|
96
89
|
"**/*.{js,ts,html}": [
|
|
@@ -175,12 +168,12 @@
|
|
|
175
168
|
"lit": "^2.0.2"
|
|
176
169
|
},
|
|
177
170
|
"devDependencies": {
|
|
178
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.
|
|
171
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.4.1",
|
|
179
172
|
"@polymer/iron-test-helpers": "^3.0.1"
|
|
180
173
|
},
|
|
181
174
|
"publishConfig": {
|
|
182
175
|
"access": "public"
|
|
183
176
|
},
|
|
184
177
|
"customElements": "custom-elements.json",
|
|
185
|
-
"gitHead": "
|
|
178
|
+
"gitHead": "6d26bf3d347428ed85111a48d89152e34197d4cf"
|
|
186
179
|
}
|
|
@@ -3,7 +3,7 @@ import { ref, createRef } from 'lit/directives/ref.js';
|
|
|
3
3
|
import '../define/blockquote-base-embedded-webview-size.js';
|
|
4
4
|
import '../define/blockquote-base-embedded-webview-resize.js';
|
|
5
5
|
import '../define/blockquote-base-embedded-webview-element.js';
|
|
6
|
-
import styles from './styles/
|
|
6
|
+
import { styles } from './styles/blockquote-base-embedded-webview-styles.css.js';
|
|
7
7
|
|
|
8
8
|
const chevronDownIcon = svg`<svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
9
9
|
<polyline points="6 9 12 15 18 9" />
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html, LitElement } from 'lit';
|
|
2
|
-
import styles from './styles/
|
|
2
|
+
import { styles } from './styles/blockquote-base-embedded-webview-element-styles.css.js';
|
|
3
3
|
/**
|
|
4
4
|
|
|
5
5
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { html, LitElement } from 'lit';
|
|
2
2
|
import * as Gestures from '@blockquote/polymer/lib/utils/gestures.js';
|
|
3
|
-
import styles from './styles/
|
|
3
|
+
import { styles } from './styles/blockquote-base-embedded-webview-resize-styles.css.js';
|
|
4
4
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#value - window.scrollY to get a bounding rectangle which is independent from the current scrolling position.
|
|
5
5
|
// https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design
|
|
6
6
|
// https://stackoverflow.com/questions/26233180/resize-a-div-on-border-drag-and-drop-without-adding-extra-markup
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html, LitElement } from 'lit';
|
|
2
|
-
import styles from './styles/
|
|
2
|
+
import { styles } from './styles/blockquote-base-embedded-webview-size-styles.css.js';
|
|
3
3
|
// https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/panels/emulation/DeviceModeView.ts;l=164
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export const styles = css`:host {
|
|
4
4
|
--__resizer-factor: calc(1.25rem * var(--blockquote-base-embedded-webview-resize-factor, 1));
|
|
5
5
|
--_rect-min-width: var(--blockquote-base-embedded-webview-resize-rect-min-width, 18.75rem);
|
|
6
6
|
--_rect-min-height: var(--blockquote-base-embedded-webview-resize-rect-min-height, 9.375rem);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export const styles = css`:host {
|
|
4
4
|
--_host-color: var(--blockquote-base-embedded-webview-size-color, inherit);
|
|
5
5
|
--_rect-height: var(--blockquote-base-embedded-webview-size-rect-height, 1.125rem);
|
|
6
6
|
--_rect-size: var(--blockquote-base-embedded-webview-size-rect-size, 0.6875rem);
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
/* eslint-disable no-unused-vars */
|
|
2
1
|
import { css } from 'lit';
|
|
3
2
|
|
|
4
|
-
export
|
|
3
|
+
export const styles = css`:host {
|
|
5
4
|
--_host-color: var(--blockquote-base-embedded-webview-color, rgb(32, 32, 32));
|
|
6
5
|
--_main-bgcolor: var(--blockquote-base-embedded-webview-main-bgcolor, rgb(250, 250, 250));
|
|
7
6
|
--_select-bgcolor: var(--blockquote-base-embedded-webview-select-bgcolor, rgb(222, 222, 222));
|
|
@@ -71,7 +70,7 @@ header > div {
|
|
|
71
70
|
background-color: transparent;
|
|
72
71
|
border: none;
|
|
73
72
|
border-bottom: 0.125rem solid var(--_select-bgcolor);
|
|
74
|
-
padding: 0.
|
|
73
|
+
padding: 0.25em 1em 0.25em 0;
|
|
75
74
|
margin: 0;
|
|
76
75
|
width: 100%;
|
|
77
76
|
cursor: pointer;
|