diff --git a/docs/components/Accordion.tsx b/docs/components/Accordion.tsx
index a9e40d4..c407f05 100644
--- a/docs/components/Accordion.tsx
+++ b/docs/components/Accordion.tsx
@@ -1,6 +1,11 @@
import { useState } from 'react';
-const Accordion = ({ label = '', children, defaultOpened = false }) => {
+const Accordion = ({
+ label = '',
+ children,
+ defaultOpened = false,
+ style = {},
+}) => {
const [open, setOpen] = useState(defaultOpened);
return (
@@ -12,7 +17,7 @@ const Accordion = ({ label = '', children, defaultOpened = false }) => {
>
setOpen(!open)}
>
► {label}
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 6fb1a23..0cf81f2 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -14,7 +14,7 @@
"@lit/react": "^1.0.2",
"@mui/material": "^5.15.4",
"@next/third-parties": "^14.2.3",
- "annotative-code": "^0.1.26",
+ "annotative-code": "^0.1.29",
"next": "^14.2.3",
"nextra": "latest",
"nextra-theme-docs": "latest",
@@ -1277,9 +1277,9 @@
}
},
"node_modules/annotative-code": {
- "version": "0.1.26",
- "resolved": "https://registry.npmjs.org/annotative-code/-/annotative-code-0.1.26.tgz",
- "integrity": "sha512-q9aMqJDNSkZNYhXBfe72E5wg8GDjAPr5LKhJrxFB8Ly641wB0HICumHw2vJNLuSvL1zqnQrBxrrpXidWjKymmQ==",
+ "version": "0.1.29",
+ "resolved": "https://registry.npmjs.org/annotative-code/-/annotative-code-0.1.29.tgz",
+ "integrity": "sha512-wruBsx/iWinD5OFa7dFp01ixpaxFo+RG4/vBv4LOrZd1GBAhPhcADulscvhdg34dKvcJkRWYamfA9FfbFfmvFg==",
"dependencies": {
"highlight.js": "^11.9.0",
"lit": "^3.1.1"
diff --git a/docs/package.json b/docs/package.json
index 257e80f..584bd24 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -23,7 +23,7 @@
"@lit/react": "^1.0.2",
"@mui/material": "^5.15.4",
"@next/third-parties": "^14.2.3",
- "annotative-code": "^0.1.26",
+ "annotative-code": "^0.1.29",
"next": "^14.2.3",
"nextra": "latest",
"nextra-theme-docs": "latest",
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 6db72f5..2482335 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -1,4 +1,5 @@
import { GoogleAnalytics } from '@next/third-parties/google';
+import './styles.css';
export default function MyApp({ Component, pageProps }) {
return (
diff --git a/docs/pages/props/annotation.mdx b/docs/pages/props/annotation.mdx
index 1c40959..07b8568 100644
--- a/docs/pages/props/annotation.mdx
+++ b/docs/pages/props/annotation.mdx
@@ -22,12 +22,17 @@ const content = \`{{content}}\`
const annotation = {{annotation}}
-
`;
+
`;
export const javaScriptContent = `const projectName = '\_\_\_\_projectName\_\_\_\_';
console.log({ projectName })`;
export const styleMap = { padding: '8px' };
+export const innerAccordionStyle = { paddingBottom: 0, fontSize: '1rem' };
- Styling of the annotation (powered by highlight.js)
- Input knob if `knob` is not defined |
-| [\*value](#value) | string | n/a | 321 |
+| Option | Type | Default Value | Description |
+| --------------- | ------ | ------------- | --------------------------------------------------------------------------------------------------------------------- |
+| [\*type](#type) | string | `"string"` | `type` defines
- Styling of the annotation (powered by highlight.js)
- Input knob if `knob` is not defined |
+| \*value | any | n/a | The default value passed to the annotation placeholder and the input knob |
+| [\*knob](#knob) | string | `"string"` | `knob` defines the input knob e.g. `select`, `date` and `color` |
#### type
`type` defines
- Styling of the annotation. This part is powered by highlight.js' CSS themes
-- Input type if `knob` is not defined. The following `type`s include a default input knob. The other `type`s would use a `string` input knob, if not further defined
- - `'string'`
- - `'boolean'`
- - `'number'`
- - `'integer'`
+- Input type if `knob` is not defined.
+ - The following `type`s include a default input knob
+ - `string`
+ - `boolean`
+ - `number`
+ - Optional: `min` and `max`
+ - `integer`
+ - Optional: `min` and `max`
+ - The other `type`s would use a `string` input knob, if `knob` is not defined
Available options are mirrored from highlight.js' CSS class, which could be found [here](https://github.com/patrick-kw-chiu/annotative-code/blob/main/src/annotative/types/types.ts#L27-L60).
@@ -101,7 +111,7 @@ export const typeAnnotation = {
styleMap={styleMap}
/>
-
+
-#### value
+#### knob
+
+`knob` defines custom input knob other than the basic
+`string`, `boolean`, `number` and `integer` types.
+Some `knob` needs to supplement other options e.g.
+for `knob: 'select'`, you also need to pass the available `options`.
+
+- `select`
+ - Required: `options`
+- `date`
+ - Optional: `min` and `max`
+- `time`
+- `datetime-local`
+ - Optional: `min` and `max`
+- `range`
+ - Required: `min` and `max`
+- `color`
+
+export const knobContent = `const fruitSelect = '\_\_\_\_fruitSelect\_\_\_\_';
+const expiryDate = \_\_\_\_expiryDate\_\_\_\_;
+const timeToEat = \_\_\_\_timeToEat\_\_\_\_;
+const dateTimeLocal = \_\_\_\_dateTimeLocal\_\_\_\_;`;
+
+export const knobAnnotation = {
+ fruitSelect: {
+ type: 'string',
+ value: '🍎 apple',
+ knob: 'select',
+ options: ['🍎 apple', '🍊 orange', '🍌 banana'],
+ },
+ expiryDate: {
+ type: 'string',
+ value: '2024-05-30',
+ knob: 'date',
+ min: '2024-05-20',
+ },
+ timeToEat: {
+ type: 'string',
+ value: '10:30',
+ knob: 'time',
+ },
+ dateTimeLocal: {
+ type: 'string',
+ value: '2024-05-30T22:30',
+ knob: 'datetime-local',
+ min: '2024-05-20T01:30',
+ },
+};
+
+
+
+
+
+
+
+
diff --git a/docs/pages/styles.css b/docs/pages/styles.css
new file mode 100644
index 0000000..8926b81
--- /dev/null
+++ b/docs/pages/styles.css
@@ -0,0 +1,7 @@
+ul {
+ margin-top: 0 !important;
+}
+
+.nextra-nav-container {
+ z-index: 500 !important;
+}
diff --git a/package-lock.json b/package-lock.json
index cdaf33a..75728d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "annotative-code",
- "version": "0.1.27",
+ "version": "0.1.29",
"lockfileVersion": 3,
"requires": true,
"packages": {
@@ -1288,9 +1288,9 @@
}
},
"node_modules/vite": {
- "version": "4.5.1",
- "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.1.tgz",
- "integrity": "sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==",
+ "version": "4.5.3",
+ "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+ "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
"dev": true,
"dependencies": {
"esbuild": "^0.18.10",
diff --git a/package.json b/package.json
index c13332d..bedb167 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "annotative-code",
- "version": "0.1.27",
+ "version": "0.1.29",
"description": "Supercharge your code demo with interactive input knobs",
"type": "module",
"main": "bin/annotative-code.js",
diff --git a/src/annotative/annotative-base-component.ts b/src/annotative/annotative-base-component.ts
index 563dde6..e2cb04c 100644
--- a/src/annotative/annotative-base-component.ts
+++ b/src/annotative/annotative-base-component.ts
@@ -57,7 +57,7 @@ export class AnnotativeBaseComponent extends LitElement {
right: 0;
padding: 4px 6px;
cursor: pointer;
- z-index: 20;
+ z-index: 21;
}
#copy-button:hover {
diff --git a/src/annotative/components/annotation.ts b/src/annotative/components/annotation.ts
index 325b0c9..45636a8 100644
--- a/src/annotative/components/annotation.ts
+++ b/src/annotative/components/annotation.ts
@@ -135,7 +135,7 @@ export class AnnotativeAnnotation extends LitElement {
this._showPopup = false;
(annotationElement.value.offsetParent as HTMLElement).style.zIndex =
- '10';
+ '20';
return;
}
@@ -144,7 +144,7 @@ export class AnnotativeAnnotation extends LitElement {
this._showPopup = true;
this._popupStyle = style;
- (annotationElement.value.offsetParent as HTMLElement).style.zIndex = '11';
+ (annotationElement.value.offsetParent as HTMLElement).style.zIndex = '22';
}
override render() {
diff --git a/src/annotative/types/types.ts b/src/annotative/types/types.ts
index 266343d..cea0287 100644
--- a/src/annotative/types/types.ts
+++ b/src/annotative/types/types.ts
@@ -78,8 +78,8 @@ export interface AnnotationConfig {
| 'range'
| 'color';
// type - number
- min?: number;
- max?: number;
+ min?: number | string;
+ max?: number | string;
// knob - select
options?: (boolean | string | number)[];
// knob - textarea