diff --git a/components.d.ts b/components.d.ts index 992d489d..f930e3b6 100644 --- a/components.d.ts +++ b/components.d.ts @@ -58,6 +58,7 @@ declare module '@vue/runtime-core' { CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'] CSelect: typeof import('./src/ui/c-select/c-select.vue')['default'] 'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default'] + CssSelectorsMemo: typeof import('./src/tools/css-selectors-memo/css-selectors-memo.md')['default'] CssXpathConverter: typeof import('./src/tools/css-xpath-converter/css-xpath-converter.vue')['default'] CTable: typeof import('./src/ui/c-table/c-table.vue')['default'] 'CTable.demo': typeof import('./src/ui/c-table/c-table.demo.vue')['default'] @@ -189,6 +190,7 @@ declare module '@vue/runtime-core' { WifiQrCodeGenerator: typeof import('./src/tools/wifi-qr-code-generator/wifi-qr-code-generator.vue')['default'] XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default'] XmlToJson: typeof import('./src/tools/xml-to-json/xml-to-json.vue')['default'] + XpathMemo: typeof import('./src/tools/xpath-memo/xpath-memo.md')['default'] YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'] YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default'] YamlViewer: typeof import('./src/tools/yaml-viewer/yaml-viewer.vue')['default'] diff --git a/src/tools/css-selectors-memo/css-selectors-memo.md b/src/tools/css-selectors-memo/css-selectors-memo.md new file mode 100644 index 00000000..18a4ab2a --- /dev/null +++ b/src/tools/css-selectors-memo/css-selectors-memo.md @@ -0,0 +1,63 @@ +| Selector | Example | Example description | +|-----------------------|-------------------------|----------------------------------------------------------------------------------------------------------| +| `.class` | `.intro` | Selects all elements with class="intro" | +| `.class1.class2` | `.name1.name2` | Selects all elements with both name1 and name2 set within its class attribute | +| `.class1 .class2` | `.name1 .name2` | Selects all elements with name2 that is a descendant of an element with name1 | +| `#id` | `#firstname` | Selects the element with id="firstname" | +| `*` | `*` | Selects all elements | +| `element` | `p` | Selects all \ elements | +| `element.class` | `p.intro` | Selects all \ elements with class="intro" | +| `element,element` | `div, p` | Selects all \ elements and all \ elements | +| `element element` | `div p` | Selects all \ elements inside \ elements | +| `element>element` | `div > p` | Selects all \ elements where the parent is a \ element | +| `element+element` | `div + p` | Selects the first \ element that is placed immediately after \ elements | +| `element1~element2` | `p ~ ul` | Selects every \ element that is preceded by a \ element | +| `[attribute]` | `[target]` | Selects all elements with a target attribute | +| `[attribute=value]` | `[target="_blank"]` | Selects all elements with target="_blank" | +| `[attribute~=value]` | `[title~="flower"]` | Selects all elements with a title attribute containing the word "flower" | +| `[attribute\|=value]` | `[lang\|="en"]` | Selects all elements with a lang attribute value equal to "en" or starting with "en-" | +| `[attribute^=value]` | `a[href^="https"]` | Selects every \ element whose href attribute value begins with "https" | +| `[attribute$=value]` | `a[href$=".pdf"]` | Selects every \ element whose href attribute value ends with ".pdf" | +| `[attribute*=value]` | `a[href*="w3schools"]` | Selects every \ element whose href attribute value contains the substring "w3schools" | +| `:active` | `a:active` | Selects the active link | +| `::after` | `p::after` | Insert something after the content of each \ element | +| `::before` | `p::before` | Insert something before the content of each \ element | +| `:checked` | `input:checked` | Selects every checked \ element | +| `:default` | `input:default` | Selects the default \ element | +| `:disabled` | `input:disabled` | Selects every disabled \ element | +| `:empty` | `p:empty` | Selects every \ element that has no children (including text nodes) | +| `:enabled` | `input:enabled` | Selects every enabled \ element | +| `:first-child` | `p:first-child` | Selects every \ element that is the first child of its parent | +| `::first-letter` | `p::first-letter` | Selects the first letter of every \ element | +| `::first-line` | `p::first-line` | Selects the first line of every \ element | +| `:first-of-type` | `p:first-of-type` | Selects every \ element that is the first \ element of its parent | +| `:focus` | `input:focus` | Selects the input element which has focus | +| `:fullscreen` | `:fullscreen` | Selects the element that is in full-screen mode | +| `:has()` | `h2:has(+p)` | Selects h2 elements that are immediately followed by a p element, and applies the style to h2 | +| `:hover` | `a:hover` | Selects links on mouse over | +| `:in-range` | `input:in-range` | Selects input elements with a value within a specified range | +| `:indeterminate` | `input:indeterminate` | Selects input elements that are in an indeterminate state | +| `:invalid` | `input:invalid` | Selects all input elements with an invalid value | +| `:lang()` | `p:lang(it)` | Selects every \ element with a lang attribute equal to "it" (Italian) | +| `:last-child` | `p:last-child` | Selects every \ element that is the last child of its parent | +| `:last-of-type` | `p:last-of-type` | Selects every \ element that is the last \ element of its parent | +| `:link` | `a:link` | Selects all unvisited links | +| `::marker` | `::marker` | Selects the markers of list items | +| `:not()` | `:not(p)` | Selects every element that is not a \ element | +| `:nth-child()` | `p:nth-child(2)` | Selects every \ element that is the second child of its parent | +| `:nth-last-child()` | `p:nth-last-child(2)` | Selects every \ element that is the second child of its parent, counting from the last child | +| `:nth-last-of-type()` | `p:nth-last-of-type(2)` | Selects every \ element that is the second \ element of its parent, counting from the last child | +| `:nth-of-type()` | `p:nth-of-type(2)` | Selects every \ element that is the second \ element of its parent | +| `:only-of-type` | `p:only-of-type` | Selects every \ element that is the only \ element of its parent | +| `:only-child` | `p:only-child` | Selects every \ element that is the only child of its parent | +| `:optional` | `input:optional` | Selects input elements with no "required" attribute | +| `:out-of-range` | `input:out-of-range` | Selects input elements with a value outside a specified range | +| `::placeholder` | `input::placeholder` | Selects input elements with the "placeholder" attribute specified | +| `:read-only` | `input:read-only` | Selects input elements with the "readonly" attribute specified | +| `:read-write` | `input:read-write` | Selects input elements with the "readonly" attribute NOT specified | +| `:required` | `input:required` | Selects input elements with the "required" attribute specified | +| `:root` | `:root` | Selects the document's root element | +| `::selection` | `::selection` | Selects the portion of an element that is selected by a user | +| `:target` | `#news:target` | Selects the current active #news element (clicked on a URL containing that anchor name) | +| `:valid` | `input:valid` | Selects all input elements with a valid value | +| `:visited` | `a:visited` | Selects all visited links | \ No newline at end of file diff --git a/src/tools/css-selectors-memo/css-selectors-memo.vue b/src/tools/css-selectors-memo/css-selectors-memo.vue new file mode 100644 index 00000000..8f32f278 --- /dev/null +++ b/src/tools/css-selectors-memo/css-selectors-memo.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/tools/css-selectors-memo/index.ts b/src/tools/css-selectors-memo/index.ts new file mode 100644 index 00000000..94312abb --- /dev/null +++ b/src/tools/css-selectors-memo/index.ts @@ -0,0 +1,12 @@ +import { BrandCss3 } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'CSS Selectors Cheatsheet', + path: '/css-selectors-memo', + description: 'CSS Selectors Syntax Cheatsheet', + keywords: ['css', 'selectors', 'cheatsheet', 'memo'], + component: () => import('./css-selectors-memo.vue'), + icon: BrandCss3, + createdAt: new Date('2024-08-15'), +}); diff --git a/src/tools/css-xpath-converter/css-xpath-converter.vue b/src/tools/css-xpath-converter/css-xpath-converter.vue index bf166976..cb813f69 100644 --- a/src/tools/css-xpath-converter/css-xpath-converter.vue +++ b/src/tools/css-xpath-converter/css-xpath-converter.vue @@ -39,6 +39,10 @@ const cssOutput = computed( mb-5 /> + + See CSS Selectors Cheatsheet + + + + See XPath Cheatsheet + + import('./xpath-memo.vue'), + icon: Brackets, + createdAt: new Date('2024-08-15'), +}); diff --git a/src/tools/xpath-memo/xpath-memo.md b/src/tools/xpath-memo/xpath-memo.md new file mode 100644 index 00000000..5e348ac6 --- /dev/null +++ b/src/tools/xpath-memo/xpath-memo.md @@ -0,0 +1,248 @@ +> Credit to the original author: https://gist.github.com/jmaccabee/550a0b9fcfdc7e6b170cd34c6ec7bc56 + +## 0. XPath Examples. + +> More: http://xpath.alephzarro.com/content/cheatsheet.html + + +| XPath | Description | +| -------------- | ----------- | +| `//hr[@class="edge" and position()=1]` | every first hr of 'edge' class +| `//table[count(tr)=1 and count(tr/td)=2]` | all tables with 1 row and 2 cols +| `//div/form/parent::*` | all divs that have form +| `./div/b` | a relative path +| `//table[parent::div[@class="pad"] and not(@id)]//a` | any anchor in a table without id, contained in a div of "pad" class +| `/html/body/div/*[preceding-sibling::h4]` | give me whatever after h4 +| `//tr/td[font[@class="head" and text()="TRACK"]]` | all td that has font of a "head" class and text "TRACK" +| `./table/tr[last()]` | the last row of a table +| `//rdf:Seq/rdf:li/em:id` | using namespaces +| `//a/@href` | hrefs of all anchors +| `//*[count(*)=3]` | all nodes with 3 children +| `//var\|//acronym` | all vars and acronyms + + +## 1. General. + + +| XPath | Description | +| -------------- | ----------- | +| `/html` | whole web page (css: html) +| `/html/body` | whole web page body (css: body) +| `//text()` | all text nodes of web page +| `/html/body/.../.../.../E` | element \ by absolute reference (css: body > … > … > … > E) + + +## 2. Tag. + + +| XPath | Description | +| -------------- | ----------- | +| `//E` | element \ by relative reference (css: E) +| `(//E)[2]` | second \ element anywhere on page +| `//img` | image element (css: img) +| `//E[@A]` | element \ with attribute A (css: E[A]) +| `//E[@A="t"]` | element \ with attribute A containing text 't' exactly (css: E[A='t']) +| `//E[contains(@A,"t")]` | element \ with attribute A containing text 't' (css: E[A*='t']) +| `//E[starts-with(@A, "t")]` | element \ whose attribute A begins with 't' (css: E[A^='t']) +| `//E[ends-with(@A, "t")]` | element \ whose attribute A ends with 't' (css: E[A$='t']) +| `//E[contains(concat(" ", @A, " "), " w ")` | element \ with attribute A containing word 'w' (css: E[A~='w']) +| `//E[matches(@A, "r")]` | element \ with attribute A matching regex ‘r’ +| `//E1[@id=I1] \| //E2[@id=I2]` | element \ with id I1 or element \ with id I2 (css: E1#I1, E2#I2) +| `//E1[@id=I1 or @id=I2]` | element \ with id I1 or id I2 (css: E1#I1, E1#I2) + + +## 3. Attribute. + + +| XPath | Description | +| -------------- | ----------- | +| `//E/@A` | attribute A of element \ (css: E@A) +| `//*/@A` | attribute A of any element (css: *@A) +| `//E[@A2="t"]/@A1` | attribute A1 of element \ where attribute A2 is 't' exactly (css: E[A2='t']@A1) +| `//E[contains(@A,"t")]/@A` | attribute A of element \ where A contains 't' (css: E[A*='t']@A) + + +## 4. ID and Name. + + +| XPath | Description | +| -------------- | ----------- | +| `//*[@id="I"]` | element with id I (css: #I) +| `//E[@id="I"]` | element \ with id I (css: E#I) +| `//*[@name="N"]` | element with name (css: [name='N']) +| `//E[@name="N"]` | element \ with name (css: E[name='N']) +| `//*[@id="X" or @name="X"]` | element with id X or, failing that, a name X +| `//*[@name="N"][v+1]` | element with name N & specified 0-based index ‘v’ (css: [name='N']:nth-child(v+1)) +| `//*[@name="N"][@value="v"]` | element with name N & specified value ‘v’ (css: *[name='N'][value='v’]) + + +## 5. Lang and Class. + + +| XPath | Description | +| -------------- | ----------- | +| `//E[@lang="L" or starts-with(@lang, concat("L", "-"))]` | element \ is explicitly in language L or subcode (css: E[lang\|=L]) +| `//*[contains(concat(" ", @class, " "), " C ")]` | element with a class C (css: .C) +| `//E[contains(concat(" ", @class, " "), " C ")]` | element \ with a class C (css: E.C) + + +## 6. Text and Link. + + +| XPath | Description | +| -------------- | ----------- | +| `//*[.="t"]` | element containing text 't' exactly +| `//E[contains(text(), "t")]` | element \ containing text 't' (css: E:contains('t')) +| `//a` | link element (css: a) +| `//a[.="t"]` | element \ containing text 't' exactly +| `//a[contains(text(), "t")]` | element \ containing text 't' (css: a:contains('t')) +| `//a[@href="url"]` | \ with target link 'url' (css: a[href='url']) +| `//a[.="t"]/@href` | link URL labeled with text 't' exactly + + +## 7. Parent and Child. + + +| XPath | Description | +| -------------- | ----------- | +| `//E/*[1]` | first child of element \ (css: E > *:first-child) +| `//E[1]` | first \ child (css: E:first-of-type) +| `//E/*[last()]` | last child of element E (css: E *:last-child) +| `//E[last()]` | last \ child (css: E:last-of-type) +| `//E[2]` | second \ child (css: E:nth-of-type(2)) +| `//*[2][name()="E"]` | second child that is an \ element (css: E:nth-child(2)) +| `//E[last()-1]` | second-to-last \ child (css: E:nth-last-of-type(2)) +| `//*[last()-1][name()="E"]` | second-to-last child that is an \ element (css: E:nth-last-child(2)) +| `//E1/[E2 and not( *[not(self::E2)])]` | element \ with only \ children +| `//E/..` | parent of element \ +| `//*[@id="I"]/.../.../.../E` | descendant \ of element with id I using specific path (css: #I > … > … > … > E) +| `//*[@id="I"]//E` | descendant \ of element with id I using unspecified path (css: #I E) +| `//E[count(*)=0]` | element \ with no children (E:empty) +| `//E[count(*)=1]` | element \ with an only child +| `//E[count(preceding-sibling::*)+count(following-sibling::*)=0]` | element \ that is an only child (css: E:only-child) +| `//E[count(../E) = 1]` | element \ with no \ siblings (css: E:only-of-type) +| `//E[position() mod N = M + 1]` | every Nth element starting with the (M+1)th (css: E:nth-child(Nn+M)) + + +## 8. Sibling. + + +| XPath | Description | +| -------------- | ----------- | +| `//E2/following-sibling::E1` | element \ following some sibling \ (css: E2 ~ E1) +| `//E2/following-sibling::*[1][name()="E1"]` | element \ immediately following sibling \ (css: E2 + E1) +| `//E2/following-sibling::*[2][name()="E1"]` | element \ following sibling \ with one intermediary (css: E2 + * + E1) +| `//E/following-sibling::*` | sibling element immediately following \ (css: E + *) +| `//E2/preceding-sibling::E1` | element \ preceding some sibling \ +| `//E2/preceding-sibling::*[1][name()="E1"]` | element \ immediately preceding sibling \ +| `//E2/preceding-sibling::*[2][name()="E1"]` | element \ preceding sibling \ with one intermediary +| `//E/preceding-sibling::*[1]` | sibling element immediately preceding \ + + +## 9. Table Cell. + + +| XPath | Description | +| -------------- | ----------- | +| `//*[@id="TestTable"]//tr[3]//td[2]` | cell by row and column (e.g. 3rd row, 2nd column) (css: #TestTable tr:nth-child(3) td:nth-child(2)) +| `//td[preceding-sibling::td="t"]` | cell immediately following cell containing 't' exactly +| `td[preceding-sibling::td[contains(.,"t")]]` | cell immediately following cell containing 't' (css: td:contains('t') ~ td) + + +## 10. Dynamic. + + +| XPath | Description | +| -------------- | ----------- | +| `//E[@disabled]` | user interface element \ that is disabled (css: E:disabled) +| `//*[not(@disabled)]` | user interface element that is enabled (css: E:enabled) +| `//*[@checked]` | checkbox (or radio button) that is checked (css: *:checked) + + +## 11. XPath Functions. + +> https://developer.mozilla.org/en-US/docs/Web/XPath/Functions + + +### 11.1. Conversion. + + +| XPath | Description | +| -------------- | ----------- | +| `boolean(expression)` | evaluates an expression and returns true or false. +| `string([object])` | converts the given argument to a string. +| `number([object])` | converts an object to a number and returns the number. + + +### 11.2. Math. + + +| XPath | Description | +| -------------- | ----------- | +| `ceiling(number)` | evaluates a decimal number and returns the smallest integer greater than or equal to the decimal number. +| `floor(number)` | evaluates a decimal number and returns the largest integer less than or equal to the decimal number. +| `round(decimal)` | returns a number that is the nearest integer to the given number. +| `sum(node-set)` | returns a number that is the sum of the numeric values of each node in a given node-set. + + +### 11.3. Logic. + +| XPath | Description | +| -------------- | ----------- | +| `true()` | returns a boolean value of true. +| `false()` | returns boolean false. +| `not(expression)` | evaluates a boolean expression and returns the opposite value. + + +### 11.4. Node. + +| XPath | Description | +| -------------- | ----------- | +| `lang(string)` | determines whether the context node matches the given language and returns boolean true or false. +| `name([node-set])` | returns a string representing the QName of the first node in a given node-set. +| `namespace-uri([node-set])` | returns a string representing the namespace URI of the first node in a given node-set. + + +### 11.5. Context. + + +| XPath | Description | +| -------------- | ----------- | +| `count(node-set)` | counts the number of nodes in a node-set and returns an integer. +| `function-available(name)` | determines if a given function is available and returns boolean true or false. +| `last()` | returns a number equal to the context size from the expression evaluation context. +| `position()` | returns a number equal to the context position from the expression evaluation context. + + +### 11.6. String. + + +| XPath | Description | +| -------------- | ----------- | +| `contains(haystack-string, needle-string)` | determines whether the first argument string contains the second argument string and returns boolean true or false. +| `concat(string1, string2 [stringn]*)` | concatenates two or more strings and returns the resulting string. +| `normalize-space(string)` | strips leading and trailing white-space from a string, replaces sequences of whitespace characters by a single space, and returns the resulting string. +| `starts-with(haystack, needle)` | checks whether the first string starts with the second string and returns true or false. +| `string-length([string])` | returns a number equal to the number of characters in a given string. +| `substring(string, start [length])` | returns a part of a given string. +| `substring-after(haystack, needle)` | returns a string that is the rest of a given string after a given substring. +| `substring-before(haystack, needle)` | returns a string that is the rest of a given string before a given substring. +| `translate(string, abc, XYZ)` | evaluates a string and a set of characters to translate and returns the translated string. + + +## 12. XPath Axes. + +| XPath | Description | +| -------------- | ----------- | +| `ancestor` | indicates all the ancestors of the context node beginning with the parent node and traveling through to the root node. +| `ancestor-or-self` | indicates the context node and all of its ancestors, including the root node. +| `attribute (@)` | indicates the attributes of the context node. Only elements have attributes. This axis can be abbreviated with the at sign (@). +| `child (/)` | indicates the children of the context node. If an XPath expression does not specify an axis, this is understood by default. Since only the root node or element nodes have children, any other use will select nothing. +| `descendant (//)` | indicates all of the children of the context node, and all of their children, and so forth. Attribute and namespace nodes are not included - the parent of an attribute node is an element node, but attribute nodes are not the children of their parents. +| `descendant-or-self` | indicates the context node and all of its descendants. Attribute and namespace nodes are not included - the parent of an attribute node is an element node, but attribute nodes are not the children of their parents. +| `following` | indicates all the nodes that appear after the context node, except any descendant, attribute, and namespace nodes. +| `following-sibling` | indicates all the nodes that have the same parent as the context node and appear after the context node in the source document. +| `parent(..)` | indicates the single node that is the parent of the context node. It can be abbreviated as two periods (..). +| `preceding` | indicates all the nodes that precede the context node in the document except any ancestor, attribute and namespace nodes. +| `preceding-sibling` | indicates all the nodes that have the same parent as the context node and appear before the context node in the source document. +| `self (.)` | indicates the context node itself. It can be abbreviated as a single period (.). \ No newline at end of file diff --git a/src/tools/xpath-memo/xpath-memo.vue b/src/tools/xpath-memo/xpath-memo.vue new file mode 100644 index 00000000..8a88af25 --- /dev/null +++ b/src/tools/xpath-memo/xpath-memo.vue @@ -0,0 +1,32 @@ + + + + +