vuetify-swatches
Version:
Color Swatch component for Vuetify3.
162 lines (160 loc) • 4.63 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}
*/
import { defineComponent as g, ref as y, watch as w, onMounted as S, createBlock as d, openBlock as l, unref as r, withCtx as o, createElementBlock as u, Fragment as c, renderList as b, normalizeClass as V, createCommentVNode as k, createTextVNode as z, toDisplayString as B } from "vue";
import { VSheet as C, VBtn as x, VIcon as N } from "vuetify/components";
import e from "vuetify/util/colors";
var _ = /* @__PURE__ */ g({
__name: "VSwatches",
props: {
/** Model value */
modelValue: { type: String, default: e.shades.white },
/** Swatch colors */
swatches: {
type: Array,
default: () => [
[e.shades.black, e.shades.white, e.shades.transparent],
[
e.red.base,
e.pink.base,
e.purple.base,
e.deepPurple.base,
e.indigo.base,
e.blue.base,
e.lightBlue.base,
e.cyan.base
],
[
e.teal.base,
e.green.base,
e.lightGreen.base,
e.lime.base,
e.yellow.base,
e.amber.base,
e.orange.base,
e.deepOrange.base
],
[e.brown.base, e.blueGrey.base, e.grey.base]
]
},
/** Swatch size */
size: {
type: String,
default: "2rem"
},
/** Selected icon */
icon: {
type: String,
default: "mdi-checkbox-marked-circle"
},
/** selected icon size */
iconSize: {
type: String,
default: "1rem"
},
/**
* The variant prop gives you easy access to several different button styles..
*
* @see {@link https://vuetifyjs.com/en/components/buttons/#variant}
*/
variant: {
type: String,
default: void 0
},
/**
* Removes the ability to click or target the component.
*
* @see {@link https://vuetifyjs.com/en/api/v-btn/#props-disabled}
*/
disabled: {
type: Boolean,
default: !1
},
/**
* Applies a large border radius on the button.
*
* @see {@link https://vuetifyjs.com/en/components/buttons/#rounded}
*/
rounded: {
type: [String, Number, Boolean],
default: void 0
},
/**
* Applies border styles to component.
*
* @see {@link https://vuetifyjs.com/en/api/v-btn/#props-border}
*/
border: {
type: [String, Number, Boolean],
default: !1
},
/**
* Designates an elevation applied to the component between 0 and 24.
*
* @see {@link https://vuetifyjs.com/en/api/v-btn/#props-elevation}
*/
elevation: {
type: [String, Number],
default: void 0
}
},
emits: {
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
"update:modelValue": (t) => !0
},
setup(t, { emit: m }) {
const h = m, a = t, i = y(e.shades.white), p = (n) => i.value = n.target.value || e.shades.white;
return w(
() => i.value,
(n) => h("update:modelValue", n)
), S(() => {
a.modelValue && (i.value = a.modelValue);
}), (n, G) => (l(), d(r(C), { class: "v-swatches" }, {
default: o(() => [
(l(!0), u(c, null, b(t.swatches, (f, v) => (l(), u("div", { key: v }, [
(l(!0), u(c, null, b(f, (s) => (l(), d(r(x), {
key: s,
border: a.border,
class: V(s === r(e).shades.transparent ? "bg-trasparent" : ""),
color: s,
disabled: a.disabled,
elevation: a.elevation,
height: a.size,
value: s,
variant: a.variant,
width: a.size,
"min-width": "auto",
onClick: p
}, {
default: o(() => [
s === t.modelValue ? (l(), d(r(N), {
key: 0,
size: t.iconSize,
color: s !== r(e).shades.transparent ? s : void 0
}, {
default: o(() => [
z(B(a.icon), 1)
]),
_: 2
}, 1032, ["size", "color"])) : k("", !0)
]),
_: 2
}, 1032, ["border", "class", "color", "disabled", "elevation", "height", "value", "variant", "width"]))), 128))
]))), 128))
]),
_: 1
}));
}
});
const F = (t) => t.component("VSwatches", _);
export {
_ as default,
F as install
};