diff --git a/src/api/interface.js b/src/api/interface.js index 48ea325..6d1782f 100644 --- a/src/api/interface.js +++ b/src/api/interface.js @@ -162,8 +162,8 @@ const svgElements = [ "use", "view", ], - // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes htmlAttributes = [ + // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes "accept", "accept-charset", "accesskey", @@ -292,7 +292,246 @@ const svgElements = [ "value", "width", "wrap", + // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute[ + "accent-height", + "accumulate", + "additive", + "alignment-baseline", + "alphabetic", + "amplitude", + "arabic-form", + "ascent", + "attributeName", + "attributeType", + "azimuth", + "baseFrequency", + "baseline-shift", + "baseProfile", + "bbox", + "begin", + "bias", + "by", + "calcMode", + "cap-height", + "clip", + "clipPathUnits", + "clip-path", + "clip-rule", + "color-interpolation", + "color-interpolation-filters", + "color-profile", + "color-rendering", + "contentScriptType", + "contentStyleType", + "cursor", + "cx", + "cy", + "d", + "decelerate", + "descent", + "diffuseConstant", + "direction", + "display", + "divisor", + "dominant-baseline", + "dur", + "dx", + "dy", + "edgeMode", + "elevation", + "enable-background", + "end", + "exponent", + "fill", + "fill-opacity", + "fill-rule", + "filter", + "filterRes", + "filterUnits", + "flood-color", + "flood-opacity", + "font-family", + "font-size", + "font-size-adjust", + "font-stretch", + "font-style", + "font-variant", + "font-weight", + "format", + "from", + "fr", + "fx", + "fy", + "g1", + "g2", + "glyph-name", + "glyph-orientation-horizontal", + "glyph-orientation-vertical", + "glyphRef", + "gradientTransform", + "gradientUnits", + "hanging", + "horiz-adv-x", + "horiz-origin-x", + "ideographic", + "image-rendering", + "in", + "in2", + "intercept", + "k", + "k1", + "k2", + "k3", + "k4", + "kernelMatrix", + "kernelUnitLength", + "kerning", + "keyPoints", + "keySplines", + "keyTimes", + "lengthAdjust", + "letter-spacing", + "lighting-color", + "limitingConeAngle", + "local", + "marker-end", + "marker-mid", + "marker-start", + "markerHeight", + "markerUnits", + "markerWidth", + "mask", + "maskContentUnits", + "maskUnits", + "mathematical", + "mode", + "numOctaves", + "offset", + "opacity", + "operator", + "order", + "orient", + "orientation", + "origin", + "overflow", + "overline-position", + "overline-thickness", + "panose-1", + "paint-order", + "path", + "pathLength", + "patternContentUnits", + "patternTransform", + "patternUnits", + "pointer-events", + "points", + "pointsAtX", + "pointsAtY", + "pointsAtZ", + "preserveAlpha", + "preserveAspectRatio", + "primitiveUnits", + "r", + "radius", + "referrerPolicy", + "refX", + "refY", + "rendering-intent", + "repeatCount", + "repeatDur", + "requiredExtensions", + "requiredFeatures", + "restart", + "result", + "rotate", + "rx", + "ry", + "scale", + "seed", + "shape-rendering", + "slope", + "spacing", + "specularConstant", + "specularExponent", + "speed", + "spreadMethod", + "startOffset", + "stdDeviation", + "stemh", + "stemv", + "stitchTiles", + "stop-color", + "stop-opacity", + "strikethrough-position", + "strikethrough-thickness", + "string", + "stroke", + "stroke-dasharray", + "stroke-dashoffset", + "stroke-linecap", + "stroke-linejoin", + "stroke-miterlimit", + "stroke-opacity", + "stroke-width", + "surfaceScale", + "systemLanguage", + "tableValues", + "targetX", + "targetY", + "text-anchor", + "text-decoration", + "text-rendering", + "textLength", + "to", + "transform", + "transform-origin", + "u1", + "u2", + "underline-position", + "underline-thickness", + "unicode", + "unicode-bidi", + "unicode-range", + "units-per-em", + "v-alphabetic", + "v-hanging", + "v-ideographic", + "v-mathematical", + "values", + "vector-effect", + "version", + "vert-adv-y", + "vert-origin-x", + "vert-origin-y", + "viewBox", + "viewTarget", + "visibility", + "widths", + "word-spacing", + "writing-mode", + "x", + "x-height", + "x1", + "x2", + "xChannelSelector", + "xlink:actuate", + "xlink:arcrole", + "xlink:href", + "xlink:role", + "xlink:show", + "xlink:title", + "xlink:type", + "xml:base", + "xml:lang", + "xml:space", + "y", + "y1", + "y2", + "yChannelSelector", + "z", + "zoomAndPan", ]; + // html`
` const h = (type, props, ...children) => { children = children.flat(Infinity); diff --git a/src/core/menu/components.mjs b/src/core/menu/components.mjs index 892cadc..d8b14f6 100644 --- a/src/core/menu/components.mjs +++ b/src/core/menu/components.mjs @@ -33,7 +33,7 @@ const SidebarButton = ({ icon, ...props }, ...children) => { icon === "notion-enhancer" ? "w-[16px] h-[16px] ml-[2px] mr-[10px]" : "w-[18px] h-[18px] ml-px mr-[9px]", - el = html`<${props.href ? "a" : "button"} + $el = html`<${props.href ? "a" : "button"} class="flex select-none cursor-pointer w-full items-center py-[5px] px-[15px] text-[14px] last:mb-[12px] transition hover:bg-[color:var(--theme--bg-hover)]" @@ -43,20 +43,20 @@ const SidebarButton = ({ icon, ...props }, ...children) => { ${children} `; if (!props.href) { - const id = el.innerText; - el.onclick ??= () => setState({ view: id }); + const id = $el.innerText; + $el.onclick ??= () => setState({ view: id }); useState(["view"], ([view = "welcome"]) => { const active = view.toLowerCase() === id.toLowerCase(); - el.style.background = active ? "var(--theme--bg-hover)" : ""; - el.style.fontWeight = active ? "600" : ""; + $el.style.background = active ? "var(--theme--bg-hover)" : ""; + $el.style.fontWeight = active ? "600" : ""; }); } - return el; + return $el; }; const View = ({ id }, ...children) => { const { html } = globalThis.__enhancerApi, - el = html`
{
`; useState(["view"], ([view = "welcome"]) => { const active = view.toLowerCase() === id.toLowerCase(); - el.style.display = active ? "" : "none"; + $el.style.display = active ? "" : "none"; }); - return el; + return $el; }; const TextInput = ({}, ...children) => {}; @@ -80,7 +80,52 @@ const ColorInput = ({}, ...children) => {}; const FileInput = ({}, ...children) => {}; -const Select = ({}, ...children) => {}; +const Select = ({ values, onchange, ...props }, ...children) => { + const { html } = globalThis.__enhancerApi, + updateWidth = ($select) => { + const $tmp = html`${$select.value}`; + document.body.append($tmp); + requestAnimationFrame(() => { + $select.style.width = `${Math.min($tmp.offsetWidth, 256)}px`; + $tmp.remove(); + }); + }; + props.onchange = (event) => { + onchange?.(event); + updateWidth(event.target); + }; + + const $select = html``; + updateWidth($select); + + return html`
+ ${$select} + +
`; +}; const Toggle = (props, ..._children) => { const { html } = globalThis.__enhancerApi; @@ -128,7 +173,7 @@ const Option = ({ mod, type, ...props }, ..._children) => { `; } - const id = `${mod}-${props.key}`; + let $input; switch (type) { // case "text": // break; @@ -140,28 +185,40 @@ const Option = ({ mod, type, ...props }, ..._children) => { // break; // case "file": // break; - // case "select": - // break; - // case "toggle": - default: + //
+ // ${props.values[0]} + // + // + // + //
+ case "select": + $input = html`<${Select} values=${props.values} />`; break; + case "toggle": + $input = html`<${Toggle} />`; } - return html` - - `; + return html`<${type === "toggle" ? "label" : "div"} + class="notion-enhancer--menu-option flex items-center justify-between + mb-[18px] ${type === "toggle" ? "cursor-pointer" : ""}" + >
+

${label}

+

+
+ ${$input} + `; }; -export { Sidebar, SidebarSection, SidebarButton, View, Toggle, Option }; +export { Sidebar, SidebarSection, SidebarButton, View, Select, Toggle, Option };