datocms-plugin-theme-selector/dist/assets/index.3bffe685.js

A plugin for DatoCMS that allows you select a color from a predefined list.

var v=Object.defineProperty,_=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var b=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var F=(e,r,t)=>r in e?v(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,u=(e,r)=>{for(var t in r||(r={}))P.call(r,t)&&F(e,t,r[t]);if(b)for(var t of b(r))S.call(r,t)&&F(e,t,r[t]);return e},d=(e,r)=>_(e,C(r));import{r as p,R as l,T as y,a as f,p as g,l as q,B as I,b as L,C as N,c as M}from"./vendor.703438d5.js";const R=function(){const r=document.createElement("link").relList;if(r&&r.supports&&r.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))n(o);new MutationObserver(o=>{for(const a of o)if(a.type==="childList")for(const s of a.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&n(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const a={};return o.integrity&&(a.integrity=o.integrity),o.referrerpolicy&&(a.referrerPolicy=o.referrerpolicy),o.crossorigin==="use-credentials"?a.credentials="include":o.crossorigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function n(o){if(o.ep)return;o.ep=!0;const a=t(o);fetch(o.href,a)}};R();function T({ctx:e}){const{colors:r}=e.plugin.attributes.parameters,t=e.parameters,n=e.errors,[o,a]=p.exports.useState(t.colors||"");return p.exports.useEffect(()=>{var c;const s=!(r==null?void 0:r.length)&&!((c=t.colors)==null?void 0:c.length)||void 0;t.configRequired!==s&&e.setParameters(d(u({},t),{configRequired:s}))}),l.createElement("form",null,l.createElement(y,{id:"colors",name:"colors",hint:"List colors the editor can select between. Delimit colors with a comma.",label:"Preset colors",placeholder:"#FF0000, #00FF00, #0000FF",value:o,error:n.colors,onChange:s=>{a(s),e.setParameters(d(u({},t),{colors:s}))}}))}const w="_group_lq208_1",k="_label_lq208_8",B="_radio_lq208_13",O="_radioColor_lq208_20",D="_error_lq208_27";var m={group:w,label:k,radio:B,radioColor:O,error:D};function A({color:e,checked:r,onChange:t}){return l.createElement("label",{className:m.label},l.createElement("input",{checked:r,className:m.radio,type:"radio",name:"theme",value:e,onChange:t}),l.createElement("span",{className:m.radioColor,style:{background:e}}))}function V({ctx:e}){var c;const{colors:r}=e.plugin.attributes.parameters,{colors:t}=e.parameters;let n=p.exports.useMemo(()=>{try{return[...new Set((t||r||"").split(",").map(i=>f(g(i.trim()))))]}catch(i){return e.alert(i.message),[]}},[t,r]);const o=Boolean((c=e.field.attributes.validators)==null?void 0:c.required),a=q.exports.get(e.formValues,e.fieldPath),s=a?f(a):void 0;return n.length?l.createElement("div",{className:m.group},n.map(i=>l.createElement(A,{onChange:()=>{e.setFieldValue(e.fieldPath,d(u({},g(i)),{alpha:255}))},checked:i===s,color:i,key:i})),o?null:l.createElement(I,{onClick:()=>{e.setFieldValue(e.fieldPath,void 0)},buttonSize:"xs",buttonType:"muted"},"Clear")):l.createElement("p",{className:m.error},"Invalid configuration in ",l.createElement("strong",null,"Theme Selector"),". Make sure it defines a valid list of colors.")}function E(e,r){L.render(l.createElement(l.StrictMode,null,l.createElement(N,{ctx:r},e)),document.getElementById("root"))}function j({ctx:e}){const r=e.plugin.attributes.parameters,[t,n]=p.exports.useState(r.colors||"");let o;try{t&&t.split(",").map(a=>f(g(a.trim())))}catch(a){o="Invalid color string. Make sure to pass a comma seperated list of valid hex colors"}return l.createElement("form",null,l.createElement(y,{id:"colors",name:"colors",hint:"List colors the editor can select between. Delimit colors with a comma.",label:"Preset colors",placeholder:"#FF0000, #00FF00, #0000FF",value:t,error:o,onChange:a=>{n(a),e.updatePluginParameters({colors:a})}}))}const h="themeSelectorField";M({renderFieldExtension(e,r){e===h&&E(l.createElement(V,{ctx:r}),r)},renderManualFieldExtensionConfigScreen(e,r){e===h&&E(l.createElement(T,{ctx:r}),r)},renderConfigScreen(e){e.plugin.attributes.parameters,E(l.createElement(j,{ctx:e}),e)},validateManualFieldExtensionParameters(e,r){var n;const t={};if((n=r.colors)==null?void 0:n.length)try{r.colors.split(",").map(o=>f(g(o.trim())))}catch(o){t.colors="Invalid color string. Make sure to pass a comma seperated list of valid hex colors"}else r.configRequired&&(t.colors="Add valid colors to the configuration");return t},manualFieldExtensions(e){return[{id:h,name:"Theme Selector",type:"editor",fieldTypes:["color"],configurable:!0}]},async onBoot(e){if(e.plugin.attributes.parameters.migratedFromLegacyPlugin||!e.currentRole.meta.final_permissions.can_edit_schema)return;const r=await e.loadFieldsUsingPlugin();await Promise.all(r.map(async t=>{await e.updateFieldAppearance(t.id,[{operation:"updateEditor",newFieldExtensionId:h}])})),e.updatePluginParameters(d(u({},e.plugin.attributes.parameters),{migratedFromLegacyPlugin:!0}))}});