@silexlabs/grapesjs-advanced-selector 1.0.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/LICENSE +9 -0
- package/README.md +148 -0
- package/babel.config.js +3 -0
- package/dist/StylableElement.d.ts +6 -0
- package/dist/StylableElement.d.ts.map +1 -0
- package/dist/components/complex-selector.d.ts +37 -0
- package/dist/components/complex-selector.d.ts.map +1 -0
- package/dist/components/compound-selector.d.ts +37 -0
- package/dist/components/compound-selector.d.ts.map +1 -0
- package/dist/components/current-selector-display.d.ts +23 -0
- package/dist/components/current-selector-display.d.ts.map +1 -0
- package/dist/components/inline-select.d.ts +29 -0
- package/dist/components/inline-select.d.ts.map +1 -0
- package/dist/components/resize-input.d.ts +5 -0
- package/dist/components/resize-input.d.ts.map +1 -0
- package/dist/components/simple-selector.d.ts +44 -0
- package/dist/components/simple-selector.d.ts.map +1 -0
- package/dist/i18n/en.d.ts +75 -0
- package/dist/i18n/en.d.ts.map +1 -0
- package/dist/i18n/fr.d.ts +75 -0
- package/dist/i18n/fr.d.ts.map +1 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +649 -0
- package/dist/index.js.map +1 -0
- package/dist/model/ComplexSelector.d.ts +34 -0
- package/dist/model/ComplexSelector.d.ts.map +1 -0
- package/dist/model/ComplexSelector.test.d.ts +2 -0
- package/dist/model/ComplexSelector.test.d.ts.map +1 -0
- package/dist/model/CompoundSelector.d.ts +25 -0
- package/dist/model/CompoundSelector.d.ts.map +1 -0
- package/dist/model/CompoundSelector.test.d.ts +2 -0
- package/dist/model/CompoundSelector.test.d.ts.map +1 -0
- package/dist/model/GrapesJsSelectors.d.ts +48 -0
- package/dist/model/GrapesJsSelectors.d.ts.map +1 -0
- package/dist/model/GrapesJsSelectors.test.d.ts +2 -0
- package/dist/model/GrapesJsSelectors.test.d.ts.map +1 -0
- package/dist/model/Operator.d.ts +28 -0
- package/dist/model/Operator.d.ts.map +1 -0
- package/dist/model/Operator.test.d.ts +2 -0
- package/dist/model/Operator.test.d.ts.map +1 -0
- package/dist/model/PseudoClass.d.ts +56 -0
- package/dist/model/PseudoClass.d.ts.map +1 -0
- package/dist/model/PseudoClass.test.d.ts +2 -0
- package/dist/model/PseudoClass.test.d.ts.map +1 -0
- package/dist/model/SimpleSelector.d.ts +104 -0
- package/dist/model/SimpleSelector.d.ts.map +1 -0
- package/dist/model/SimpleSelector.test.d.ts +2 -0
- package/dist/model/SimpleSelector.test.d.ts.map +1 -0
- package/dist/plugin.d.ts +16 -0
- package/dist/plugin.d.ts.map +1 -0
- package/dist/styles.d.ts +3 -0
- package/dist/styles.d.ts.map +1 -0
- package/eslint.config.mjs +20 -0
- package/jest.config.cjs +11 -0
- package/package.json +50 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-current Grapesjs Advanced Selector
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
# GrapesJS Advanced Selector Manager
|
|
2
|
+
|
|
3
|
+
An advanced selector management plugin for GrapesJS, specifically designed for cases where the default Selector Manager falls short,
|
|
4
|
+
|
|
5
|
+
Before: GrapesJs default Selector Manager
|
|
6
|
+
|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
After: GrapesJs Advanced Selector Manager
|
|
10
|
+
|
|
11
|
+
-screenshot to come soon-
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Links
|
|
15
|
+
|
|
16
|
+
- [DEMO](##) (TODO: **Provide a live demo**)
|
|
17
|
+
- [Discussion on GrapesJS Forum](https://github.com/GrapesJS/grapesjs/discussions/5262)
|
|
18
|
+
- [Feature Request in Silex Project](https://github.com/silexlabs/Silex/issues/1496)
|
|
19
|
+
|
|
20
|
+
### Roadmap
|
|
21
|
+
|
|
22
|
+
#### Feature Goals
|
|
23
|
+
|
|
24
|
+
- [ ] Replace the default Selector Manager UI with a custom interface
|
|
25
|
+
- [ ] Integrate with the Style Manager for editing complex CSS selectors
|
|
26
|
+
|
|
27
|
+
#### Selector Examples
|
|
28
|
+
|
|
29
|
+
- `.child` (already possible with the default Selector Manager)
|
|
30
|
+
- `.child:pseudo` (already possible with the default Selector Manager)
|
|
31
|
+
- `.parent > .child`
|
|
32
|
+
- `.parent:pseudo > .child`
|
|
33
|
+
- `.parent:pseudo .child`
|
|
34
|
+
- `tag .child`
|
|
35
|
+
- Pseudo selectors with parameters, e.g., `:nth-child(2)`
|
|
36
|
+
- Pseudo selectors with a selector, e.g., `:not(.child)`
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
40
|
+
## Installation
|
|
41
|
+
|
|
42
|
+
Choose one of the following methods:
|
|
43
|
+
|
|
44
|
+
### CDN
|
|
45
|
+
```html
|
|
46
|
+
<script src="https://unpkg.com/@silexlabs/grapesjs-advanced-selector"></script>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### NPM
|
|
50
|
+
```bash
|
|
51
|
+
npm i @silexlabs/grapesjs-advanced-selector
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### GIT
|
|
55
|
+
```bash
|
|
56
|
+
git clone https://github.com/silexlabs/@silexlabs/grapesjs-advanced-selector.git
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
---
|
|
60
|
+
|
|
61
|
+
## Usage
|
|
62
|
+
|
|
63
|
+
### Basic HTML Setup
|
|
64
|
+
Include the plugin with GrapesJS in your HTML:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
|
|
68
|
+
<script src="https://unpkg.com/grapesjs"></script>
|
|
69
|
+
<script src="https://unpkg.com/@silexlabs/grapesjs-advanced-selector"></script>
|
|
70
|
+
|
|
71
|
+
<div id="gjs"></div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### Basic JS Initialization
|
|
75
|
+
```js
|
|
76
|
+
const editor = grapesjs.init({
|
|
77
|
+
container: '#gjs',
|
|
78
|
+
height: '100%',
|
|
79
|
+
fromElement: true,
|
|
80
|
+
storageManager: false,
|
|
81
|
+
plugins: ['@silexlabs/grapesjs-advanced-selector'],
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
### Options
|
|
88
|
+
|
|
89
|
+
Customize the plugin’s behavior by passing options:
|
|
90
|
+
|
|
91
|
+
| Option | Description | Default |
|
|
92
|
+
|-------------|----------------------------------------|------------------|
|
|
93
|
+
| `i18n` | Internationalization object see the files in `src/i18n` | The content of `src/i18n/en.ts` |
|
|
94
|
+
| `helpLinks` | Links to help resources | `{}` |
|
|
95
|
+
| `helpLinks.actionBar` | Link to help resources for the action bar | `https://docs.silex.me/en/user/selectors` |
|
|
96
|
+
|
|
97
|
+
---
|
|
98
|
+
|
|
99
|
+
## Advanced Usage
|
|
100
|
+
|
|
101
|
+
Use the plugin with modern JavaScript imports:
|
|
102
|
+
|
|
103
|
+
```js
|
|
104
|
+
import grapesjs from 'grapesjs';
|
|
105
|
+
import plugin from '@silexlabs/grapesjs-advanced-selector';
|
|
106
|
+
import 'grapesjs/dist/css/grapes.min.css';
|
|
107
|
+
|
|
108
|
+
const editor = grapesjs.init({
|
|
109
|
+
container: '#gjs',
|
|
110
|
+
plugins: [plugin],
|
|
111
|
+
pluginsOpts: {
|
|
112
|
+
[plugin]: { /* options */ }
|
|
113
|
+
},
|
|
114
|
+
});
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## Development
|
|
120
|
+
|
|
121
|
+
To contribute, follow these steps:
|
|
122
|
+
|
|
123
|
+
1. **Clone the Repository**:
|
|
124
|
+
```bash
|
|
125
|
+
git clone https://github.com/silexlabs/@silexlabs/grapesjs-advanced-selector.git
|
|
126
|
+
cd @silexlabs/grapesjs-advanced-selector
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
2. **Install Dependencies**:
|
|
130
|
+
```bash
|
|
131
|
+
npm install
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
3. **Start Development Server**:
|
|
135
|
+
```bash
|
|
136
|
+
npm start
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
4. **Build the Plugin**:
|
|
140
|
+
```bash
|
|
141
|
+
npm run build
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
## License
|
|
147
|
+
|
|
148
|
+
MIT License
|
package/babel.config.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StylableElement.d.ts","sourceRoot":"","sources":["../src/StylableElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAGhC,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,UAAU;IAErD,SAAS,CAAC,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAe;IAEzC,iBAAiB;CAO5B"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import StylableElement from '../StylableElement';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
import './resize-input';
|
|
4
|
+
import { SimpleSelector } from '../model/SimpleSelector';
|
|
5
|
+
import { ComplexSelector } from '../model/ComplexSelector';
|
|
6
|
+
/**
|
|
7
|
+
* A component to display and edit a complex selector
|
|
8
|
+
* A complex selector is a main selector, an operator, and a related selector
|
|
9
|
+
* @emits change
|
|
10
|
+
* @emits rename (when a simple selector in the main compound selector is renamed)
|
|
11
|
+
*/
|
|
12
|
+
export default class ComplexSelectorComponent extends StylableElement {
|
|
13
|
+
/**
|
|
14
|
+
* The selector to display
|
|
15
|
+
*/
|
|
16
|
+
get value(): ComplexSelector | undefined;
|
|
17
|
+
set value(value: ComplexSelector | string | undefined);
|
|
18
|
+
private _value;
|
|
19
|
+
/**
|
|
20
|
+
* A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
|
|
21
|
+
* that are available in the document, applicable to the current selection
|
|
22
|
+
*/
|
|
23
|
+
suggestions: SimpleSelector[];
|
|
24
|
+
/**
|
|
25
|
+
* A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
|
|
26
|
+
* that are available to the related selector
|
|
27
|
+
*/
|
|
28
|
+
relations: SimpleSelector[];
|
|
29
|
+
static styles: import("lit").CSSResult;
|
|
30
|
+
dispatchEvent(event: Event): boolean;
|
|
31
|
+
render(): TemplateResult;
|
|
32
|
+
private changeOperator;
|
|
33
|
+
private addOperator;
|
|
34
|
+
private changeRelatedSelector;
|
|
35
|
+
toString(): string;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=complex-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"complex-selector.d.ts","sourceRoot":"","sources":["../../src/components/complex-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,gBAAgB,CAAA;AACvB,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,eAAe,EAAY,MAAM,0BAA0B,CAAA;AAMpE;;;;;GAKG;AACH,MAAM,CAAC,OAAO,OAAO,wBAAyB,SAAQ,eAAe;IAGnE;;OAEG;IACH,IACW,KAAK,IAAI,eAAe,GAAG,SAAS,CAE9C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,SAAS,EAO3D;IACD,OAAO,CAAC,MAAM,CAA6B;IAE3C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGzC;;;OAGG;IAEI,SAAS,EAAE,cAAc,EAAE,CAAK;IAQvC,OAAgB,MAAM,0BAsBrB;IAEQ,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAKpC,MAAM,IAAI,cAAc;IA6CjC,OAAO,CAAC,cAAc;IAkBtB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,qBAAqB;IAUpB,QAAQ,IAAI,MAAM;CAG5B"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import StylableElement from '../StylableElement';
|
|
2
|
+
import { CompoundSelector } from '../model/CompoundSelector';
|
|
3
|
+
import { SimpleSelector } from '../model/SimpleSelector';
|
|
4
|
+
import { TemplateResult } from 'lit';
|
|
5
|
+
/**
|
|
6
|
+
* A component to display and edit a compound selector
|
|
7
|
+
* A compound selector is a list of simple selectors and a pseudo class
|
|
8
|
+
* @emits change
|
|
9
|
+
* @emits rename (when a simple selector in the selector is renamed)
|
|
10
|
+
* @emits delete
|
|
11
|
+
* @emits add
|
|
12
|
+
*/
|
|
13
|
+
export default class CompoundSelectorComponent extends StylableElement {
|
|
14
|
+
/**
|
|
15
|
+
* The selector to display
|
|
16
|
+
*/
|
|
17
|
+
get value(): CompoundSelector | undefined;
|
|
18
|
+
set value(value: CompoundSelector | string | undefined);
|
|
19
|
+
private _value;
|
|
20
|
+
/**
|
|
21
|
+
* A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
|
|
22
|
+
* that are available in the document, applicable to the current selection
|
|
23
|
+
*/
|
|
24
|
+
suggestions: SimpleSelector[];
|
|
25
|
+
disablePseudoClass: boolean;
|
|
26
|
+
static styles: import("lit").CSSResult;
|
|
27
|
+
dispatchEvent(event: Event): boolean;
|
|
28
|
+
toString(): string;
|
|
29
|
+
render(): TemplateResult;
|
|
30
|
+
private changeSelector;
|
|
31
|
+
private addSelector;
|
|
32
|
+
private focusLastSelector;
|
|
33
|
+
private deleteSelector;
|
|
34
|
+
private addPseudoClass;
|
|
35
|
+
private changePseudoClass;
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=compound-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"compound-selector.d.ts","sourceRoot":"","sources":["../../src/components/compound-selector.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,gBAAgB,EAAY,MAAM,2BAA2B,CAAA;AACtE,OAAO,EAAkB,cAAc,EAAmC,MAAM,yBAAyB,CAAA;AACzG,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAI/C;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,yBAA0B,SAAQ,eAAe;IAIpE;;OAEG;IACH,IACW,KAAK,IAAI,gBAAgB,GAAG,SAAS,CAE/C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,GAAG,SAAS,EAO5D;IACD,OAAO,CAAC,MAAM,CAA8B;IAE5C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAGlC,kBAAkB,EAAE,OAAO,CAAQ;IAO1C,OAAgB,MAAM,0BA6BrB;IAEQ,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAKpC,QAAQ,IAAI,MAAM;IAGlB,MAAM,IAAI,cAAc;IAmDjC,OAAO,CAAC,cAAc;IAoBtB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;CAK1B"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import StylableElement from '../StylableElement';
|
|
3
|
+
import { ComplexSelector } from '../model/ComplexSelector';
|
|
4
|
+
export declare class CurrentSelectorDisplay extends StylableElement {
|
|
5
|
+
/**
|
|
6
|
+
* The selector to display
|
|
7
|
+
*/
|
|
8
|
+
get value(): ComplexSelector | undefined;
|
|
9
|
+
set value(value: ComplexSelector | string | undefined);
|
|
10
|
+
private _value;
|
|
11
|
+
placeholder: string;
|
|
12
|
+
selectors: ComplexSelector[];
|
|
13
|
+
helpLink: string;
|
|
14
|
+
error: string;
|
|
15
|
+
warning: string;
|
|
16
|
+
specificity: number;
|
|
17
|
+
private selectRef;
|
|
18
|
+
static styles: import("lit").CSSResult;
|
|
19
|
+
render(): TemplateResult;
|
|
20
|
+
private changeSelector;
|
|
21
|
+
private clearStyle;
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=current-selector-display.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"current-selector-display.d.ts","sourceRoot":"","sources":["../../src/components/current-selector-display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAEhD,OAAO,EAAE,eAAe,EAA2C,MAAM,0BAA0B,CAAA;AAGnG,qBAAa,sBAAuB,SAAQ,eAAe;IACzD;;OAEG;IACH,IACW,KAAK,IAAI,eAAe,GAAG,SAAS,CAE9C;IACD,IAAW,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,GAAG,SAAS,EAO3D;IACD,OAAO,CAAC,MAAM,CAA6B;IAGpC,WAAW,SAAqB;IAGhC,SAAS,EAAE,eAAe,EAAE,CAAK;IAGjC,QAAQ,SAAK;IAGb,KAAK,SAAK;IAGV,OAAO,SAAK;IAGZ,WAAW,SAAI;IACtB,OAAO,CAAC,SAAS,CAAiC;IAElD,OAAgB,MAAM,0BA+FrB;IAEQ,MAAM,IAAI,cAAc;IA2GjC,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,UAAU;CAGnB"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import StylableElement from '../StylableElement';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
import { PseudoClass } from '../model/PseudoClass';
|
|
4
|
+
import { Operator } from '../model/Operator';
|
|
5
|
+
import './resize-input';
|
|
6
|
+
type Option = PseudoClass | Operator;
|
|
7
|
+
export default class InlineSelectComponent extends StylableElement {
|
|
8
|
+
/**
|
|
9
|
+
* Selected option
|
|
10
|
+
*/
|
|
11
|
+
value?: Option;
|
|
12
|
+
/**
|
|
13
|
+
* List of options
|
|
14
|
+
*/
|
|
15
|
+
options: Option[];
|
|
16
|
+
/**
|
|
17
|
+
* Placeholder displayed when no option is selected
|
|
18
|
+
*/
|
|
19
|
+
placeholder: string;
|
|
20
|
+
private paramRef;
|
|
21
|
+
static styles: import("lit").CSSResult;
|
|
22
|
+
render(): TemplateResult;
|
|
23
|
+
private select;
|
|
24
|
+
private renderList;
|
|
25
|
+
private renderButtons;
|
|
26
|
+
private renderParam;
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
29
|
+
//# sourceMappingURL=inline-select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"inline-select.d.ts","sourceRoot":"","sources":["../../src/components/inline-select.ts"],"names":[],"mappings":"AACA,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,gBAAgB,CAAA;AAGvB,KAAK,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;AAEpC,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,eAAe;IAGhE;;OAEG;IAED,KAAK,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IAED,OAAO,EAAE,MAAM,EAAE,CAAK;IAExB;;OAEG;IAED,WAAW,SAAqB;IAIlC,OAAO,CAAC,QAAQ,CAAgC;IAIhD,OAAgB,MAAM,0BA8DrB;IAEQ,MAAM,IAAI,cAAc;IAwBjC,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,WAAW;CAsBpB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resize-input.d.ts","sourceRoot":"","sources":["../../src/components/resize-input.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,gBAAgB;;IAQhE,WAAW;CAIZ"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
import { SimpleSelector } from '../model/SimpleSelector';
|
|
3
|
+
import StylableElement from '../StylableElement';
|
|
4
|
+
export default class SimpleSelectorComponent extends StylableElement {
|
|
5
|
+
/**
|
|
6
|
+
* The selector to display
|
|
7
|
+
*/
|
|
8
|
+
get value(): SimpleSelector | undefined;
|
|
9
|
+
set value(sel: SimpleSelector | string | undefined);
|
|
10
|
+
private _value;
|
|
11
|
+
/**
|
|
12
|
+
* A list of all the classes, IDs, tags, custom tags, attributes, custom attributes
|
|
13
|
+
* that are available in the document, applicable to the current selection
|
|
14
|
+
*/
|
|
15
|
+
suggestions: SimpleSelector[];
|
|
16
|
+
/**
|
|
17
|
+
* Whether the selector is editable
|
|
18
|
+
*/
|
|
19
|
+
get editing(): boolean;
|
|
20
|
+
set editing(isEditing: boolean);
|
|
21
|
+
private _editing;
|
|
22
|
+
private selectorInputRef;
|
|
23
|
+
private attributeOptionsAttrValueRef;
|
|
24
|
+
private mainRef;
|
|
25
|
+
static styles: import("lit").CSSResult;
|
|
26
|
+
focus(): void;
|
|
27
|
+
render(): TemplateResult;
|
|
28
|
+
dispatchEvent(event: Event): boolean;
|
|
29
|
+
private edit;
|
|
30
|
+
private select;
|
|
31
|
+
private cancelEdit;
|
|
32
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
33
|
+
private renderMain;
|
|
34
|
+
private renderLayout;
|
|
35
|
+
private renderSelector;
|
|
36
|
+
private renderSelectorInput;
|
|
37
|
+
private renderSuggestionList;
|
|
38
|
+
/**
|
|
39
|
+
* Option editor to edit the selector options, depending on the type
|
|
40
|
+
* Only the attribute selectors have options: `operator` and `value2`
|
|
41
|
+
*/
|
|
42
|
+
private renderOptionsEditor;
|
|
43
|
+
}
|
|
44
|
+
//# sourceMappingURL=simple-selector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"simple-selector.d.ts","sourceRoot":"","sources":["../../src/components/simple-selector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/C,OAAO,EAAqB,cAAc,EAA6L,MAAM,yBAAyB,CAAA;AACtQ,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAIhD,MAAM,CAAC,OAAO,OAAO,uBAAwB,SAAQ,eAAe;IAIlE;;OAEG;IACH,IACW,KAAK,IAAI,cAAc,GAAG,SAAS,CAE7C;IACD,IAAW,KAAK,CAAC,GAAG,EAAE,cAAc,GAAG,MAAM,GAAG,SAAS,EAOxD;IACD,OAAO,CAAC,MAAM,CAA4B;IAE1C;;;OAGG;IAEI,WAAW,EAAE,cAAc,EAAE,CAAK;IAEzC;;OAEG;IACH,IACW,OAAO,IAAI,OAAO,CAE5B;IACD,IAAW,OAAO,CAAC,SAAS,EAAE,OAAO,EAEpC;IACD,OAAO,CAAC,QAAQ,CAAQ;IAKxB,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,4BAA4B,CAAgC;IACpE,OAAO,CAAC,OAAO,CAA2B;IAI1C,OAAgB,MAAM,0BAyFrB;IAEQ,KAAK;IAGL,MAAM,IAAI,cAAc;IAiDxB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO;IAO7C,OAAO,CAAC,IAAI;IASZ,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,UAAU;IAaT,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAU1E,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,YAAY;IAmCpB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,mBAAmB;IAgC3B,OAAO,CAAC,oBAAoB;IAoB5B;;;OAGG;IACH,OAAO,CAAC,mBAAmB;CAgE5B"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
Remove: string;
|
|
3
|
+
Specificity: string;
|
|
4
|
+
'Edit selector': string;
|
|
5
|
+
'Copy style': string;
|
|
6
|
+
'Paste style': string;
|
|
7
|
+
'Clear style for this selector': string;
|
|
8
|
+
Help: string;
|
|
9
|
+
Relation: string;
|
|
10
|
+
'Add a new selector': string;
|
|
11
|
+
'Pseudo Class': string;
|
|
12
|
+
Delete: string;
|
|
13
|
+
'When it is': string;
|
|
14
|
+
'When it is a': string;
|
|
15
|
+
'When it': string;
|
|
16
|
+
'inside of': string;
|
|
17
|
+
'direct child of': string;
|
|
18
|
+
'adjacent to': string;
|
|
19
|
+
after: string;
|
|
20
|
+
contains: string;
|
|
21
|
+
'does not match': string;
|
|
22
|
+
matches: string;
|
|
23
|
+
'matches (no spec)': string;
|
|
24
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:where': string;
|
|
25
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:is': string;
|
|
26
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:not': string;
|
|
27
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:has': string;
|
|
28
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator': string;
|
|
29
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator': string;
|
|
30
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator': string;
|
|
31
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator': string;
|
|
32
|
+
'On mouse': string;
|
|
33
|
+
When: string;
|
|
34
|
+
'When it has the': string;
|
|
35
|
+
'When the': string;
|
|
36
|
+
'When it is the': string;
|
|
37
|
+
'When it is within': string;
|
|
38
|
+
'When URL matches': string;
|
|
39
|
+
'When it matches': string;
|
|
40
|
+
'When the text direction is': string;
|
|
41
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir': string;
|
|
42
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang': string;
|
|
43
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional': string;
|
|
44
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:required': string;
|
|
45
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate': string;
|
|
46
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked': string;
|
|
47
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled': string;
|
|
48
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled': string;
|
|
49
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:target': string;
|
|
50
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope': string;
|
|
51
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:root': string;
|
|
52
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty': string;
|
|
53
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type': string;
|
|
54
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type': string;
|
|
55
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type': string;
|
|
56
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type': string;
|
|
57
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type': string;
|
|
58
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child': string;
|
|
59
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child': string;
|
|
60
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child': string;
|
|
61
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child': string;
|
|
62
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child': string;
|
|
63
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link': string;
|
|
64
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:link': string;
|
|
65
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited': string;
|
|
66
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible': string;
|
|
67
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within': string;
|
|
68
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus': string;
|
|
69
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:active': string;
|
|
70
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover': string;
|
|
71
|
+
'Current selector does not match the selected components': string;
|
|
72
|
+
'Current selector does not match all the selected components': string;
|
|
73
|
+
};
|
|
74
|
+
export default _default;
|
|
75
|
+
//# sourceMappingURL=en.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAwEC"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
Remove: string;
|
|
3
|
+
Specificity: string;
|
|
4
|
+
'Edit selector': string;
|
|
5
|
+
'Copy style': string;
|
|
6
|
+
'Paste style': string;
|
|
7
|
+
'Clear style for this selector': string;
|
|
8
|
+
Help: string;
|
|
9
|
+
Relation: string;
|
|
10
|
+
'Add a new selector': string;
|
|
11
|
+
'Pseudo Class': string;
|
|
12
|
+
Delete: string;
|
|
13
|
+
'When it is': string;
|
|
14
|
+
'When it is a': string;
|
|
15
|
+
'When it': string;
|
|
16
|
+
'inside of': string;
|
|
17
|
+
'direct child of': string;
|
|
18
|
+
'adjacent to': string;
|
|
19
|
+
after: string;
|
|
20
|
+
contains: string;
|
|
21
|
+
'does not match': string;
|
|
22
|
+
matches: string;
|
|
23
|
+
'matches (no spec)': string;
|
|
24
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:where': string;
|
|
25
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:is': string;
|
|
26
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:not': string;
|
|
27
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:has': string;
|
|
28
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator': string;
|
|
29
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator': string;
|
|
30
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator': string;
|
|
31
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator': string;
|
|
32
|
+
'On mouse': string;
|
|
33
|
+
When: string;
|
|
34
|
+
'When it has the': string;
|
|
35
|
+
'When the': string;
|
|
36
|
+
'When it is the': string;
|
|
37
|
+
'When it is within': string;
|
|
38
|
+
'When URL matches': string;
|
|
39
|
+
'When it matches': string;
|
|
40
|
+
'When the text direction is': string;
|
|
41
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:dir': string;
|
|
42
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:lang': string;
|
|
43
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:optional': string;
|
|
44
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:required': string;
|
|
45
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate': string;
|
|
46
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:checked': string;
|
|
47
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled': string;
|
|
48
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:enabled': string;
|
|
49
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:target': string;
|
|
50
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:scope': string;
|
|
51
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:root': string;
|
|
52
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:empty': string;
|
|
53
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-of-type': string;
|
|
54
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-of-type': string;
|
|
55
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type': string;
|
|
56
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type': string;
|
|
57
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-of-type': string;
|
|
58
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:only-child': string;
|
|
59
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child': string;
|
|
60
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child': string;
|
|
61
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child': string;
|
|
62
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child': string;
|
|
63
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link': string;
|
|
64
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:link': string;
|
|
65
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:visited': string;
|
|
66
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible': string;
|
|
67
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within': string;
|
|
68
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:focus': string;
|
|
69
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:active': string;
|
|
70
|
+
'https://developer.mozilla.org/en-US/docs/Web/CSS/:hover': string;
|
|
71
|
+
'Current selector does not match the selected components': string;
|
|
72
|
+
'Current selector does not match all the selected components': string;
|
|
73
|
+
};
|
|
74
|
+
export default _default;
|
|
75
|
+
//# sourceMappingURL=fr.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fr.d.ts","sourceRoot":"","sources":["../../src/i18n/fr.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,wBAwEC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Editor } from 'grapesjs';
|
|
2
|
+
|
|
3
|
+
export type AdvancedSelectorOptions = {
|
|
4
|
+
i18n: {
|
|
5
|
+
[key: string]: string;
|
|
6
|
+
};
|
|
7
|
+
helpLinks: {
|
|
8
|
+
actionBar: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
declare const _default: (editor: Editor, opts?: Partial<AdvancedSelectorOptions>) => void;
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
_default as default,
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,iCAAiC,CAAA;AACxC,OAAO,+BAA+B,CAAA;AACtC,OAAO,mCAAmC,CAAA;AAC1C,OAAO,kCAAkC,CAAA;AACzC,OAAO,0CAA0C,CAAA;AAGjD,OAAO,EAAE,uBAAuB,EAA0B,MAAM,UAAU,CAAA;AAC1E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;iCAGT,MAAM,SAAQ,OAAO,CAAC,uBAAuB,CAAC;AAAtE,wBA6BC"}
|