Skip to content

Commit 43ad95d

Browse files
sharevbsharevb
committed
feat: add CSS Selectors and Xpath memo
1 parent be60b04 commit 43ad95d

File tree

9 files changed

+413
-2
lines changed

9 files changed

+413
-2
lines changed

‎components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ declare module '@vue/runtime-core' {
5858
CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
5959
CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
6060
'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
61+
CssSelectorsMemo: typeof import('./src/tools/css-selectors-memo/css-selectors-memo.md')['default']
6162
CssXpathConverter: typeof import('./src/tools/css-xpath-converter/css-xpath-converter.vue')['default']
6263
CTable: typeof import('./src/ui/c-table/c-table.vue')['default']
6364
'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default']
@@ -189,6 +190,7 @@ declare module '@vue/runtime-core' {
189190
WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default']
190191
XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
191192
XmlToJson: typeof import('./src/tools/xml-to-json/xml-to-json.vue')['default']
193+
XpathMemo: typeof import('./src/tools/xpath-memo/xpath-memo.md')['default']
192194
YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
193195
YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
194196
YamlViewer: typeof import('./src/tools/yaml-viewer/yaml-viewer.vue')['default']

‎src/tools/css-selectors-memo/css-selectors-memo.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
| Selector | Example | Example description |
2+
|-----------------------|-------------------------|----------------------------------------------------------------------------------------------------------|
3+
| `.class` | `.intro` | Selects all elements with class="intro" |
4+
| `.class1.class2` | `.name1.name2` | Selects all elements with both name1 and name2 set within its class attribute |
5+
| `.class1 .class2` | `.name1 .name2` | Selects all elements with name2 that is a descendant of an element with name1 |
6+
| `#id` | `#firstname` | Selects the element with id="firstname" |
7+
| `*` | `*` | Selects all elements |
8+
| `element` | `p` | Selects all \<p\> elements |
9+
| `element.class` | `p.intro` | Selects all \<p\> elements with class="intro" |
10+
| `element,element` | `div, p` | Selects all \<div\> elements and all \<p\> elements |
11+
| `element element` | `div p` | Selects all \<p\> elements inside \<div\> elements |
12+
| `element>element` | `div > p` | Selects all \<p\> elements where the parent is a \<div\> element |
13+
| `element+element` | `div + p` | Selects the first \<p\> element that is placed immediately after \<div\> elements |
14+
| `element1~element2` | `p ~ ul` | Selects every \<ul\> element that is preceded by a \<p\> element |
15+
| `[attribute]` | `[target]` | Selects all elements with a target attribute |
16+
| `[attribute=value]` | `[target="_blank"]` | Selects all elements with target="_blank" |
17+
| `[attribute~=value]` | `[title~="flower"]` | Selects all elements with a title attribute containing the word "flower" |
18+
| `[attribute\|=value]` | `[lang\|="en"]` | Selects all elements with a lang attribute value equal to "en" or starting with "en-" |
19+
| `[attribute^=value]` | `a[href^="https"]` | Selects every \<a\> element whose href attribute value begins with "https" |
20+
| `[attribute$=value]` | `a[href$=".pdf"]` | Selects every \<a\> element whose href attribute value ends with ".pdf" |
21+
| `[attribute*=value]` | `a[href*="w3schools"]` | Selects every \<a\> element whose href attribute value contains the substring "w3schools" |
22+
| `:active` | `a:active` | Selects the active link |
23+
| `::after` | `p::after` | Insert something after the content of each \<p\> element |
24+
| `::before` | `p::before` | Insert something before the content of each \<p\> element |
25+
| `:checked` | `input:checked` | Selects every checked \<input\> element |
26+
| `:default` | `input:default` | Selects the default \<input\> element |
27+
| `:disabled` | `input:disabled` | Selects every disabled \<input\> element |
28+
| `:empty` | `p:empty` | Selects every \<p\> element that has no children (including text nodes) |
29+
| `:enabled` | `input:enabled` | Selects every enabled \<input\> element |
30+
| `:first-child` | `p:first-child` | Selects every \<p\> element that is the first child of its parent |
31+
| `::first-letter` | `p::first-letter` | Selects the first letter of every \<p\> element |
32+
| `::first-line` | `p::first-line` | Selects the first line of every \<p\> element |
33+
| `:first-of-type` | `p:first-of-type` | Selects every \<p\> element that is the first \<p\> element of its parent |
34+
| `:focus` | `input:focus` | Selects the input element which has focus |
35+
| `:fullscreen` | `:fullscreen` | Selects the element that is in full-screen mode |
36+
| `:has()` | `h2:has(+p)` | Selects h2 elements that are immediately followed by a p element, and applies the style to h2 |
37+
| `:hover` | `a:hover` | Selects links on mouse over |
38+
| `:in-range` | `input:in-range` | Selects input elements with a value within a specified range |
39+
| `:indeterminate` | `input:indeterminate` | Selects input elements that are in an indeterminate state |
40+
| `:invalid` | `input:invalid` | Selects all input elements with an invalid value |
41+
| `:lang()` | `p:lang(it)` | Selects every \<p\> element with a lang attribute equal to "it" (Italian) |
42+
| `:last-child` | `p:last-child` | Selects every \<p\> element that is the last child of its parent |
43+
| `:last-of-type` | `p:last-of-type` | Selects every \<p\> element that is the last \<p\> element of its parent |
44+
| `:link` | `a:link` | Selects all unvisited links |
45+
| `::marker` | `::marker` | Selects the markers of list items |
46+
| `:not()` | `:not(p)` | Selects every element that is not a \<p\> element |
47+
| `:nth-child()` | `p:nth-child(2)` | Selects every \<p\> element that is the second child of its parent |
48+
| `:nth-last-child()` | `p:nth-last-child(2)` | Selects every \<p\> element that is the second child of its parent, counting from the last child |
49+
| `:nth-last-of-type()` | `p:nth-last-of-type(2)` | Selects every \<p\> element that is the second \<p\> element of its parent, counting from the last child |
50+
| `:nth-of-type()` | `p:nth-of-type(2)` | Selects every \<p\> element that is the second \<p\> element of its parent |
51+
| `:only-of-type` | `p:only-of-type` | Selects every \<p\> element that is the only \<p\> element of its parent |
52+
| `:only-child` | `p:only-child` | Selects every \<p\> element that is the only child of its parent |
53+
| `:optional` | `input:optional` | Selects input elements with no "required" attribute |
54+
| `:out-of-range` | `input:out-of-range` | Selects input elements with a value outside a specified range |
55+
| `::placeholder` | `input::placeholder` | Selects input elements with the "placeholder" attribute specified |
56+
| `:read-only` | `input:read-only` | Selects input elements with the "readonly" attribute specified |
57+
| `:read-write` | `input:read-write` | Selects input elements with the "readonly" attribute NOT specified |
58+
| `:required` | `input:required` | Selects input elements with the "required" attribute specified |
59+
| `:root` | `:root` | Selects the document's root element |
60+
| `::selection` | `::selection` | Selects the portion of an element that is selected by a user |
61+
| `:target` | `#news:target` | Selects the current active #news element (clicked on a URL containing that anchor name) |
62+
| `:valid` | `input:valid` | Selects all input elements with a valid value |
63+
| `:visited` | `a:visited` | Selects all visited links |

‎src/tools/css-selectors-memo/css-selectors-memo.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script setup lang="ts">
2+
import { useThemeVars } from 'naive-ui';
3+
import Memo from './css-selectors-memo.md';
4+
5+
const themeVars = useThemeVars();
6+
</script>
7+
8+
<template>
9+
<div>
10+
<Memo style="overflow-x: auto;" />
11+
</div>
12+
</template>
13+
14+
<style lang="less" scoped>
15+
::v-deep(pre) {
16+
margin: 0;
17+
padding: 15px 22px;
18+
background-color: v-bind('themeVars.cardColor');
19+
border-radius: 4px;
20+
overflow: auto;
21+
}
22+
::v-deep(table) {
23+
border-collapse: collapse;
24+
}
25+
::v-deep(table), ::v-deep(td), ::v-deep(th) {
26+
border: 1px solid v-bind('themeVars.textColor1');
27+
padding: 5px;
28+
}
29+
::v-deep(a) {
30+
color: v-bind('themeVars.textColor1');
31+
}
32+
</style>

‎src/tools/css-selectors-memo/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { BrandCss3 } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'CSS Selectors Cheatsheet',
6+
path: '/css-selectors-memo',
7+
description: 'CSS Selectors Syntax Cheatsheet',
8+
keywords: ['css', 'selectors', 'cheatsheet', 'memo'],
9+
component: () => import('./css-selectors-memo.vue'),
10+
icon: BrandCss3,
11+
createdAt: new Date('2024-08-15'),
12+
});

‎src/tools/css-xpath-converter/css-xpath-converter.vue

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ const cssOutput = computed(
3939
mb-5
4040
/>
4141

42+
<router-link target="_blank" to="/css-selectors-memo" mb-1 mt-1>
43+
See CSS Selectors Cheatsheet
44+
</router-link>
45+
4246
<n-divider />
4347

4448
<TextareaCopyable
@@ -58,6 +62,10 @@ const cssOutput = computed(
5862
mb-5
5963
/>
6064

65+
<router-link target="_blank" to="/xpath-memo" mb-1 mt-1>
66+
See XPath Cheatsheet
67+
</router-link>
68+
6169
<n-divider />
6270

6371
<TextareaCopyable

‎src/tools/index.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { tool as base64StringConverter } from './base64-string-converter';
33
import { tool as basicAuthGenerator } from './basic-auth-generator';
44
import { tool as emailNormalizer } from './email-normalizer';
55
import { tool as cssXpathConverter } from './css-xpath-converter';
6-
6+
import { tool as cssSelectorsMemo } from './css-selectors-memo';
7+
import { tool as xpathMemo } from './xpath-memo';
78
import { tool as asciiTextDrawer } from './ascii-text-drawer';
8-
99
import { tool as textToUnicode } from './text-to-unicode';
1010
import { tool as safelinkDecoder } from './safelink-decoder';
1111
import { tool as xmlToJson } from './xml-to-json';
@@ -156,6 +156,8 @@ export const toolsByCategory: ToolCategory[] = [
156156
yamlViewer,
157157
emailNormalizer,
158158
cssXpathConverter,
159+
cssSelectorsMemo,
160+
xpathMemo,
159161
],
160162
},
161163
{

‎src/tools/xpath-memo/index.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Brackets } from '@vicons/tabler';
2+
import { defineTool } from '../tool';
3+
4+
export const tool = defineTool({
5+
name: 'XPath Syntax Cheatsheet',
6+
path: '/xpath-memo',
7+
description: 'XPath Syntax Cheatsheet',
8+
keywords: ['xpath', 'memo', 'cheatsheet'],
9+
component: () => import('./xpath-memo.vue'),
10+
icon: Brackets,
11+
createdAt: new Date('2024-08-15'),
12+
});

0 commit comments

Comments
 (0)