vuepress-theme-plume/assets/HeroTintPlateConfig-kR_ykimh.js

import{$ as e,E as t,G as n,It as r,K as i,P as a,R as o,X as s,_ as c,_t as l,c as u,d,et as f,f as p,g as m,i as h,l as g,lt as _,u as v,y,z as b,zt as x}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{a as S,c as C}from"./runtime-dom.esm-bundler-DTRCDnrc.js";import{b as w}from"./composables-Cos0mzHz.js";import{t as T}from"./plugin-vue_export-helper-CxTVcLa7.js";import{t as E}from"./VPHomeHero-BOyUwtEx.js";import{t as D}from"./CodeViewer-o1p7DA2o.js";var O=[`for`],k=[`id`,`min`,`max`,`step`],A=[`for`],j=[`id`,`min`,`max`,`step`],M=T(y({__name:`InputRange`,props:t({min:{default:0},max:{},step:{default:1}},{modelValue:{required:!0},modelModifiers:{}}),emits:[`update:modelValue`],setup(e){let t=e,r=i(e,`modelValue`,{set(e){return Math.min(Math.max(e,t.min),t.max)}}),o=n();return(t,n)=>(a(),p(h,null,[g(`label`,{for:`range-${l(o)}`,class:`input-range`},[f(g(`input`,{id:`range-${l(o)}`,"onUpdate:modelValue":n[0]||=e=>r.value=e,type:`range`,min:e.min,max:e.max,step:e.step},null,8,k),[[C,r.value]])],8,O),g(`label`,{for:`range-number-${l(o)}`,class:`input-range-number`},[f(g(`input`,{id:`range-number-${l(o)}`,"onUpdate:modelValue":n[1]||=e=>r.value=e,type:`number`,min:e.min,max:e.max,step:e.step},null,8,j),[[C,r.value]])],8,A)],64))}}),[[`__scopeId`,`data-v-a9f5136d`]]),N={class:`custom-tint-plate`},P={class:`custom-tint-plate`},F={class:`custom-tint-plate`},I=20,L=240,R=T(y({__name:`CustomTintPlate`,props:{modelValue:{required:!0},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let t=i(e,`modelValue`),n=u(()=>256-t.value.r.value),r=u(()=>256-t.value.g.value),o=u(()=>256-t.value.b.value);function l(e){return s(()=>t.value[e].value,n=>{let r=256-n;t.value[e].offset>r&&(t.value[e].offset=r)})}return l(`r`),l(`g`),l(`b`),(e,i)=>(a(),p(h,null,[i[12]||=g(`p`,null,`浅色模式建议使用 "150 ~ 240" 之间的值， 深色模式建议使用 "20 ~ 80" 之间的值：`,-1),g(`div`,N,[i[6]||=g(`span`,null,`R:`,-1),c(M,{modelValue:t.value.r.value,"onUpdate:modelValue":i[0]||=e=>t.value.r.value=e,min:I,max:L},null,8,[`modelValue`]),i[7]||=g(`span`,{class:`offset`},`offset`,-1),c(M,{modelValue:t.value.r.offset,"onUpdate:modelValue":i[1]||=e=>t.value.r.offset=e,max:n.value},null,8,[`modelValue`,`max`])]),g(`div`,P,[i[8]||=g(`span`,null,`G:`,-1),c(M,{modelValue:t.value.g.value,"onUpdate:modelValue":i[2]||=e=>t.value.g.value=e,min:I,max:L},null,8,[`modelValue`]),i[9]||=g(`span`,{class:`offset`},`offset`,-1),c(M,{modelValue:t.value.g.offset,"onUpdate:modelValue":i[3]||=e=>t.value.g.offset=e,max:r.value},null,8,[`modelValue`,`max`])]),g(`div`,F,[i[10]||=g(`span`,null,`B:`,-1),c(M,{modelValue:t.value.b.value,"onUpdate:modelValue":i[4]||=e=>t.value.b.value=e,min:I,max:L},null,8,[`modelValue`]),i[11]||=g(`span`,{class:`offset`},`offset`,-1),c(M,{modelValue:t.value.b.offset,"onUpdate:modelValue":i[5]||=e=>t.value.b.offset=e,max:o.value},null,8,[`modelValue`,`max`])])],64))}}),[[`__scopeId`,`data-v-3cc58718`]]),z={},B={class:`demo-wrapper no-padding has-title`},V={class:`demo-container`};function H(e,t){return a(),p(`div`,B,[t[0]||=g(`div`,{class:`demo-head`},[g(`div`,{class:`demo-ctrl`},[g(`i`),g(`i`),g(`i`)])],-1),g(`div`,V,[b(e.$slots,`default`)])])}var U=T(z,[[`render`,H]]),W={class:`single-tint-plate`},G=T(y({__name:`SingleTintPlate`,props:{modelValue:{required:!0},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let t=i(e,`modelValue`);return(e,n)=>(a(),p(h,null,[n[2]||=g(`p`,null,`浅色模式建议使用 "150 ~ 240" 之间的值， 深色模式建议使用 "20 ~ 80" 之间的值：`,-1),g(`div`,W,[n[1]||=g(`span`,null,`RGB:`,-1),c(M,{modelValue:t.value,"onUpdate:modelValue":n[0]||=e=>t.value=e,max:240,min:20},null,8,[`modelValue`])])],64))}}),[[`__scopeId`,`data-v-23f2c9af`]]),K={class:`triplet-tint-plate`},q={class:`triplet-tint-plate`},J={class:`triplet-tint-plate`},Y=20,X=240,Z=T(y({__name:`TripletTintPlate`,props:{modelValue:{required:!0},modelModifiers:{}},emits:[`update:modelValue`],setup(e){let t=i(e,`modelValue`);return(e,n)=>(a(),p(h,null,[n[6]||=g(`p`,null,`浅色模式建议使用 "150 ~ 240" 之间的值， 深色模式建议使用 "20 ~ 80" 之间的值：`,-1),g(`div`,K,[n[3]||=g(`span`,null,`R:`,-1),c(M,{modelValue:t.value[0],"onUpdate:modelValue":n[0]||=e=>t.value[0]=e,min:Y,max:X},null,8,[`modelValue`])]),g(`div`,q,[n[4]||=g(`span`,null,`G:`,-1),c(M,{modelValue:t.value[1],"onUpdate:modelValue":n[1]||=e=>t.value[1]=e,min:Y,max:X},null,8,[`modelValue`])]),g(`div`,J,[n[5]||=g(`span`,null,`B:`,-1),c(M,{modelValue:t.value[2],"onUpdate:modelValue":n[2]||=e=>t.value[2]=e,min:Y,max:X},null,8,[`modelValue`])])],64))}}),[[`__scopeId`,`data-v-6f6e3343`]]),Q={class:`hero-tint-plate-wrapper`},$=[`data-theme`],ee={for:`tint-plate-is-dark`},te={class:`mode-content`},ne=[`onClick`],re={class:`tint-plate-`},ie={class:`hero-tint-plate-output`},ae=T(y({__name:`HeroTintPlateConfig`,setup(t){let n={name:`Theme Plume`,tagline:`Next Theme`,text:`简约的，功能丰富`,actions:[]},i=[{value:`single`,label:`单色`},{value:`triplet`,label:`三色`},{value:`custom`,label:`三色+偏移`}],l=_(`single`),y=_(220),b=_([220,220,220]),C=_({r:{value:220,offset:36},g:{value:220,offset:36},b:{value:220,offset:36}}),T=u(()=>{switch(l.value){case`single`:return{rgb:y.value};case`triplet`:return{rgb:b.value.join(`,`)};case`custom`:return C.value;default:return{rgb:``}}}),O=_(!1);s(w(),e=>{O.value=e},{immediate:!0});let k=u(()=>{let e=T.value,t=`---
home: true
config:
  -
    type: hero
    effect: tint-plate
    effectConfig:`;return`rgb`in e?t+=` ${e.rgb}`:typeof e==`object`&&(t+=`
      r:
        value: ${e.r.value}
        offset: ${e.r.offset}
      g:
        value: ${e.g.value}
        offset: ${e.g.offset}
      b:
        value: ${e.b.value}
        offset: ${e.b.offset}`),`${t}\n---`});return(t,s)=>(a(),p(`div`,Q,[s[6]||=g(`h4`,null,`效果预览：`,-1),g(`div`,{"data-theme":O.value?`dark`:`light`},[c(U,null,{default:e(()=>[c(E,{type:`hero`,effect:`TintPlate`,"effect-config":T.value,hero:n,index:0},null,8,[`effect-config`])]),_:1})],8,$),g(`p`,null,[g(`label`,ee,[f(g(`input`,{id:`tint-plate-is-dark`,"onUpdate:modelValue":s[0]||=e=>O.value=e,type:`checkbox`},null,512),[[S,O.value]]),s[4]||=m(` 深色模式 `,-1)])]),g(`div`,te,[(a(),p(h,null,o(i,e=>g(`button`,{key:e.value,class:r([`mode`,{active:l.value===e.value}]),type:`button`,onClick:t=>l.value=e.value},x(e.label),11,ne)),64))]),g(`div`,re,[l.value===`single`?(a(),v(G,{key:0,modelValue:y.value,"onUpdate:modelValue":s[1]||=e=>y.value=e},null,8,[`modelValue`])):d(``,!0),l.value===`triplet`?(a(),v(Z,{key:1,modelValue:b.value,"onUpdate:modelValue":s[2]||=e=>b.value=e},null,8,[`modelValue`])):d(``,!0),l.value===`custom`?(a(),v(R,{key:2,modelValue:C.value,"onUpdate:modelValue":s[3]||=e=>C.value=e},null,8,[`modelValue`])):d(``,!0)]),g(`div`,ie,[s[5]||=g(`h4`,null,`输出：`,-1),c(D,{lang:`text`,content:k.value},null,8,[`content`])])]))}}),[[`__scopeId`,`data-v-0f21800e`]]);export{ae as t};