vuetify-swatches
Version:
Color Swatch component for Vuetify3.
13 lines (11 loc) • 3.15 kB
JavaScript
/**
* vuetify-swatches
*
* @description Color Swatch component for Vuetify3.
* @author Logue <logue@hotmail.co.jp>
* @copyright 2022-2025 By Masashi Yoshikawa All rights reserved.
* @license MIT
* @version 1.7.6
* @see {@link https://github.com/logue/vuetify-swatches}
*/
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("vuetify/components"),require("vuetify/util/colors")):typeof define=="function"&&define.amd?define(["exports","vue","vuetify/components","vuetify/util/colors"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.VSwatches={},l.Vue,l["Vuetify/components"],l.colors))})(this,function(l,e,r,u){"use strict";function f(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var t=f(u),o=e.defineComponent({__name:"VSwatches",props:{modelValue:{type:String,default:t.default.shades.white},swatches:{type:Array,default:()=>[[t.default.shades.black,t.default.shades.white,t.default.shades.transparent],[t.default.red.base,t.default.pink.base,t.default.purple.base,t.default.deepPurple.base,t.default.indigo.base,t.default.blue.base,t.default.lightBlue.base,t.default.cyan.base],[t.default.teal.base,t.default.green.base,t.default.lightGreen.base,t.default.lime.base,t.default.yellow.base,t.default.amber.base,t.default.orange.base,t.default.deepOrange.base],[t.default.brown.base,t.default.blueGrey.base,t.default.grey.base]]},size:{type:String,default:"2rem"},icon:{type:String,default:"mdi-checkbox-marked-circle"},iconSize:{type:String,default:"1rem"},variant:{type:String,default:void 0},disabled:{type:Boolean,default:!1},rounded:{type:[String,Number,Boolean],default:void 0},border:{type:[String,Number,Boolean],default:!1},elevation:{type:[String,Number],default:void 0}},emits:{"update:modelValue":a=>!0},setup(a,{emit:p}){const h=p,n=a,s=e.ref(t.default.shades.white),b=i=>s.value=i.target.value||t.default.shades.white;return e.watch(()=>s.value,i=>h("update:modelValue",i)),e.onMounted(()=>{n.modelValue&&(s.value=n.modelValue)}),(i,k)=>(e.openBlock(),e.createBlock(e.unref(r.VSheet),{class:"v-swatches"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.swatches,(m,y)=>(e.openBlock(),e.createElementBlock("div",{key:y},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(m,d=>(e.openBlock(),e.createBlock(e.unref(r.VBtn),{key:d,border:n.border,class:e.normalizeClass(d===e.unref(t.default).shades.transparent?"bg-trasparent":""),color:d,disabled:n.disabled,elevation:n.elevation,height:n.size,value:d,variant:n.variant,width:n.size,"min-width":"auto",onClick:b},{default:e.withCtx(()=>[d===a.modelValue?(e.openBlock(),e.createBlock(e.unref(r.VIcon),{key:0,size:a.iconSize,color:d!==e.unref(t.default).shades.transparent?d:void 0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.icon),1)]),_:2},1032,["size","color"])):e.createCommentVNode("",!0)]),_:2},1032,["border","class","color","disabled","elevation","height","value","variant","width"]))),128))]))),128))]),_:1}))}});const c=a=>a.component("VSwatches",o);l.default=o,l.install=c,Object.defineProperty(l,"__esModule",{value:!0})});