vuetify-swatches/dist/index.cjs.js

Color Swatch component for Vuetify3.

/**
 * 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.10
 * @see {@link https://github.com/logue/vuetify-swatches}
 */

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),n=require("vuetify/components"),h=require("vuetify/util/colors");function p(a){return a&&typeof a=="object"&&"default"in a?a:{default:a}}var t=p(h),s=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:i}){const o=i,l=a,u=e.ref(t.default.shades.white),c=d=>u.value=d.target.value||t.default.shades.white;return e.watch(()=>u.value,d=>o("update:modelValue",d)),e.onMounted(()=>{l.modelValue&&(u.value=l.modelValue)}),(d,v)=>(e.openBlock(),e.createBlock(e.unref(n.VSheet),{class:"v-swatches"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.swatches,(f,b)=>(e.openBlock(),e.createElementBlock("div",{key:b},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f,r=>(e.openBlock(),e.createBlock(e.unref(n.VBtn),{key:r,border:l.border,class:e.normalizeClass(r===e.unref(t.default).shades.transparent?"bg-trasparent":""),color:r,disabled:l.disabled,elevation:l.elevation,height:l.size,value:r,variant:l.variant,width:l.size,"min-width":"auto",onClick:c},{default:e.withCtx(()=>[r===a.modelValue?(e.openBlock(),e.createBlock(e.unref(n.VIcon),{key:0,size:a.iconSize,color:r!==e.unref(t.default).shades.transparent?r:void 0},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.icon),1)]),_:2},1032,["size","color"])):e.createCommentVNode("",!0)]),_:2},1032,["border","class","color","disabled","elevation","height","value","variant","width"]))),128))]))),128))]),_:1}))}});const m=a=>a.component("VSwatches",s);exports.default=s;exports.install=m;