@directus-labs/switch-interface/dist/index.js

Directus toggle switch interface for boolean fields.

import{defineInterface as e}from"@directus/extensions-sdk";import{defineComponent as t,useCssVars as n,computed as a,resolveComponent as i,openBlock as r,createElementBlock as o,normalizeStyle as c,createElementVNode as l,toDisplayString as s,createCommentVNode as d,normalizeClass as h,createVNode as f}from"vue";import{useI18n as p}from"vue-i18n";const u={class:"switch-label"},v={class:"switch-content"},m={class:"label-text"},b={key:0,class:"switch-description"},w=["checked","aria-checked","aria-label"],g={class:"switch-slider"};var y=t({__name:"interface",props:{value:{type:[Boolean,null]},field:{},label:{default:void 0},description:{default:void 0},iconOn:{default:"check"},iconOff:{default:"close"},colorOn:{default:"var(--theme--primary)"},colorOff:{default:"var(--theme--form--field--input--foreground-subdued)"}},emits:["input"],setup(e,{emit:t}){n((e=>({"65e04ccc":e.value?"calc(var(--switch-width) - var(--switch-height))":"0"})));const y=e,x=t,{t:C}=p(),_=a((()=>y.label||C("interfaces.boolean.label_default"))),k=a((()=>{var e;return y.description||(null==(e=y.field.meta)?void 0:e.note)})),O=a((()=>{var e,t;return{"--switch-color-on":null!=(e=y.colorOn)?e:"var(--theme--primary)","--switch-color-off":null!=(t=y.colorOff)?t:"var(--theme--form--field--input--foreground-subdued)"}})),H=()=>{x("input",!y.value)};return(e,t)=>{var n,a;const p=i("v-icon");return r(),o("div",{class:"switch-interface bordered",style:c(O.value)},[l("label",u,[l("div",v,[l("span",m,s(_.value),1),k.value?(r(),o("p",b,s(k.value),1)):d("v-if",!0)]),l("span",{class:h(["switch-button",{"is-active":e.value}])},[l("input",{type:"checkbox",checked:null!=(n=e.value)&&n,onChange:H,class:"switch-input","aria-checked":null!=(a=e.value)&&a,"aria-label":_.value,role:"switch",tabindex:"0"},null,40,w),l("span",g,[f(p,{name:e.value?e.iconOn:e.iconOff,class:"switch-icon"},null,8,["name"])])],2)])],4)}}}),x=[],C=[];!function(e,t){if(e&&"undefined"!=typeof document){var n,a=!0===t.prepend?"prepend":"append",i=!0===t.singleTag,r="string"==typeof t.container?document.querySelector(t.container):document.getElementsByTagName("head")[0];if(i){var o=x.indexOf(r);-1===o&&(o=x.push(r)-1,C[o]={}),n=C[o]&&C[o][a]?C[o][a]:C[o][a]=c()}else n=c();65279===e.charCodeAt(0)&&(e=e.substring(1)),n.styleSheet?n.styleSheet.cssText+=e:n.appendChild(document.createTextNode(e))}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),t.attributes)for(var n=Object.keys(t.attributes),i=0;i<n.length;i++)e.setAttribute(n[i],t.attributes[n[i]]);var o="prepend"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(o,e),e}}(".switch-interface[data-v-993a930b] {\n  --switch-width: 48px;\n  --switch-height: 28px;\n  --switch-padding: 4px;\n}\n\n.switch-interface.bordered[data-v-993a930b] {\n  border: var(--theme--border-width) solid var(--theme--border-color);\n  border-radius: var(--theme--border-radius);\n}\n.switch-interface.bordered[data-v-993a930b]:hover {\n  border-color: var(--theme--form--field--input--border-color-hover);\n}\n\n.switch-label[data-v-993a930b] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 100%;\n  padding: var(--theme--form--field--input--padding);\n}\n\n.switch-content[data-v-993a930b] {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  margin-right: 16px;\n}\n\n.switch-button[data-v-993a930b] {\n  position: relative;\n  width: var(--switch-width);\n  height: var(--switch-height);\n  border-radius: calc(var(--switch-height) / 2);\n  background-color: var(--switch-color-off);\n  transition: background-color 0.2s ease;\n  padding: var(--switch-padding);\n  flex-shrink: 0;\n}\n\n.switch-button.is-active[data-v-993a930b] {\n  background-color: var(--switch-color-on);\n}\n\n.switch-input[data-v-993a930b] {\n  position: absolute;\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.switch-slider[data-v-993a930b] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: calc(var(--switch-height) - 2 * var(--switch-padding));\n  height: calc(var(--switch-height) - 2 * var(--switch-padding));\n  border-radius: 50%;\n  background-color: var(--theme--background);\n  transition: transform 0.2s ease;\n  transform: translateX(var(--65e04ccc));\n  padding: 4px;\n}\n\n.switch-icon[data-v-993a930b] {\n  color: var(--switch-color-off);\n  --v-icon-size: 16px;\n}\n\n.switch-button.is-active .switch-icon[data-v-993a930b] {\n  color: var(--switch-color-on);\n}\n\n.label-text[data-v-993a930b] {\n  font-family: var(--theme--fonts--sans--font-family);\n  font-weight: var(--theme--fonts--sans--font-weight);\n  color: var(--theme--foreground);\n  font-size: 1rem;\n  line-height: 1.2;\n}\n\n.switch-description[data-v-993a930b] {\n  font-size: 1rem;\n  color: var(--theme--foreground-subdued);\n  margin-top: 4px;\n  line-height: 1.2;\n}\n\n.switch-input:focus-visible + .switch-slider[data-v-993a930b] {\n  outline: 2px solid var(--theme--primary);\n  outline-offset: 2px;\n}",{});var _=e({id:"switch-interface",name:"Switch",icon:"toggle_on",description:"Toggle switch for boolean fields.",component:((e,t)=>{const n=e.__vccOpts||e;for(const[e,a]of t)n[e]=a;return n})(y,[["__scopeId","data-v-993a930b"],["__file","interface.vue"]]),group:"selection",options:[{field:"label",name:"$t:label",type:"string",meta:{width:"full",interface:"system-input-translated-string",options:{placeholder:"$t:interfaces.boolean.label_placeholder"}},schema:{default_value:"$t:interfaces.boolean.label_default"}},{field:"description",name:"$t:description",type:"string",meta:{width:"full",interface:"system-input-translated-string",options:{placeholder:"Enter a description for this option"}}},{field:"iconOn",name:"$t:icon_on",type:"string",meta:{width:"half",interface:"select-icon"},schema:{default_value:"check"}},{field:"iconOff",name:"$t:icon_off",type:"string",meta:{width:"half",interface:"select-icon"},schema:{default_value:"close"}},{field:"colorOn",name:"$t:interfaces.boolean.color_on",type:"string",meta:{interface:"select-color",width:"half"}},{field:"colorOff",name:"$t:interfaces.boolean.color_off",type:"string",meta:{interface:"select-color",width:"half"}}],types:["boolean"],preview:'<svg width="156" height="96" viewBox="0 0 156 96" fill="none" xmlns="http://www.w3.org/2000/svg">\n\t<path opacity="0.25" d="M132 35H24C20.6863 35 18 37.6863 18 41V55C18 58.3137 20.6863 61 24 61H132C135.314 61 138 58.3137 138 55V41C138 37.6863 135.314 35 132 35Z" fill="var(--theme--primary)"/>\n\t<path d="M111 52C113.209 52 115 50.2091 115 48C115 45.7909 113.209 44 111 44C108.791 44 107 45.7909 107 48C107 50.2091 108.791 52 111 52Z" fill="var(--theme--primary)"/>\n\t<path d="M54 42H28C26.8954 42 26 42.8954 26 44V46C26 47.1046 26.8954 48 28 48H54C55.1046 48 56 47.1046 56 46V44C56 42.8954 55.1046 42 54 42Z" fill="var(--theme--primary)"/>\n\t<path d="M54 52H28C26.8954 52 26 52.2985 26 52.6667V53.3333C26 53.7015 26.8954 54 28 54H54C55.1046 54 56 53.7015 56 53.3333V52.6667C56 52.2985 55.1046 52 54 52Z" fill="var(--theme--primary)"/>\n\t<path d="M78 42H62C60.8954 42 60 42.8954 60 44V46C60 47.1046 60.8954 48 62 48H78C79.1046 48 80 47.1046 80 46V44C80 42.8954 79.1046 42 78 42Z" fill="var(--theme--primary)"/>\n\t<path d="M78 52H62C60.8954 52 60 52.2985 60 52.6667V53.3333C60 53.7015 60.8954 54 62 54H78C79.1046 54 80 53.7015 80 53.3333V52.6667C80 52.2985 79.1046 52 78 52Z" fill="var(--theme--primary)"/>\n\t<rect x="104.5" y="41.5" width="26" height="13" rx="6.5" stroke="var(--theme--primary)"/>\n\t</svg>'});export{_ as default};