vuetify-swatches
Version:
Color Swatch component for Vuetify3.
273 lines (271 loc) • 8.15 kB
JavaScript
/**
* vuetify-swatches
*
* @description Color Swatch component for Vuetify3.
* @author Logue <logue@hotmail.co.jp>
* @copyright 2022-2026 By Masashi Yoshikawa All rights reserved.
* @license MIT
* @version 2.0.1
* @see {@link https://github.com/logue/vuetify-swatches}
*/
import { defineComponent as B, openBlock as n, createBlock as c, unref as r, withCtx as p, createVNode as z, mergeProps as C, createCommentVNode as x, computed as N, ref as L, watch as S, normalizeClass as A, createElementBlock as f, Fragment as b, renderList as y } from "vue";
import { VTooltip as I, VBtn as g, VIcon as j, VItemGroup as $, VItem as k } from "vuetify/components";
import m from "vuetify/util/colors";
function E(...l) {
let d = 0;
for (let i = 0; i < l.length; i++)
l[i].length > d && (d = l[i].length);
const t = l.length, e = Array(d);
for (let i = 0; i < d; ++i) {
const a = Array(t);
for (let o = 0; o < t; ++o)
a[o] = l[o][i];
e[i] = a;
}
return e;
}
var w = /* @__PURE__ */ B({
__name: "SwatchButton",
props: {
color: { default: void 0 },
isSelected: { type: Boolean, default: !1 },
size: { default: "2rem" },
icon: { default: "mdi-checkbox-marked-circle" },
iconSize: { default: "1rem" },
variant: { default: void 0 },
disabled: { type: Boolean, default: !1 },
rounded: { type: [String, Number, Boolean], default: void 0 },
border: { type: [String, Number, Boolean], default: !1 },
elevation: { default: void 0 },
tooltip: { type: Boolean, default: !1 },
tooltipLocation: { default: void 0 }
},
emits: ["click"],
setup(l, { emit: d }) {
const t = l, e = d;
return (i, a) => t.color ? (n(), c(r(I), {
key: 0,
disabled: !t.tooltip,
location: t.tooltipLocation,
text: t.color
}, {
activator: p(({ props: o }) => [
z(r(g), C(o, {
border: t.border,
class: [
t.color === r(m).shades.transparent ? "bg-transparent" : "",
"p-0"
],
color: t.color,
disabled: t.disabled,
elevation: t.elevation,
height: t.size,
variant: t.variant,
width: t.size,
"min-width": "auto",
onClick: a[0] || (a[0] = (v) => e("click"))
}), {
default: p(() => [
t.isSelected ? (n(), c(r(j), {
key: 0,
size: t.iconSize,
color: t.color !== r(m).shades.transparent ? t.color : void 0,
icon: t.icon
}, null, 8, ["size", "color", "icon"])) : x("", !0)
]),
_: 1
}, 16, ["border", "class", "color", "disabled", "elevation", "height", "variant", "width"])
]),
_: 1
}, 8, ["disabled", "location", "text"])) : (n(), c(r(g), {
key: 1,
height: t.size,
width: t.size,
class: "p-0",
disabled: "",
"min-width": "auto",
variant: "text"
}, null, 8, ["height", "width"]));
}
}), F = /* @__PURE__ */ B({
__name: "VSwatches",
props: {
/** Model value */
modelValue: { type: String, default: m.shades.white },
/** Swatch colors */
swatches: {
type: Array,
default: () => []
},
/** Swatch size */
size: {
type: String,
default: "2rem"
},
/**
* Selected icon
* @see {@link https://vuetifyjs.com/en/components/icons/#usage
*/
icon: {
type: String,
default: "mdi-checkbox-marked-circle"
},
/** selected icon size */
iconSize: {
type: String,
default: "1rem"
},
/** Display swatches in a single row */
inline: {
type: Boolean,
default: !1
},
/**
* 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
},
/** Swap cols and rows */
transpose: {
type: Boolean,
default: !1
},
/**
* Tooltip
* @see {@link https://vuetifyjs.com/en/components/tooltips/}
*/
tooltip: {
type: Boolean,
default: !1
},
/**
* Tooltip location
* @see {@link https://vuetifyjs.com/en/components/tooltips/#props-location}
*/
tooltipLocation: {
type: String,
default: void 0
}
},
emits: {
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
"update:modelValue": (l) => !0
},
setup(l, { emit: d }) {
const t = d, e = l, i = N(() => {
const o = Array.isArray(e.swatches) ? e.swatches : Object.values(e.swatches);
return e.inline ? [o.flat(1 / 0)] : e.transpose ? E(...o) : o;
}), a = L(m.shades.white);
return S(
() => a.value,
(o) => t("update:modelValue", o)
), S(
() => e.modelValue,
(o) => {
o && (a.value = o);
},
{ immediate: !0 }
), (o, v) => (n(), c(r($), {
modelValue: a.value,
"onUpdate:modelValue": v[0] || (v[0] = (s) => a.value = s),
class: A([{ "d-inline": e.inline }, "v-swatches"]),
mandatory: ""
}, {
default: p(() => [
e.inline ? (n(!0), f(b, { key: 0 }, y(i.value[0], (s) => (n(), c(r(k), {
key: s,
value: s
}, {
default: p(({ isSelected: h, toggle: u }) => [
z(w, {
border: e.border,
color: s,
disabled: e.disabled,
elevation: e.elevation,
"icon-size": e.iconSize,
icon: e.icon,
"is-selected": h,
rounded: e.rounded,
size: e.size,
"tooltip-location": e.tooltipLocation,
tooltip: e.tooltip,
variant: e.variant,
onClick: u
}, null, 8, ["border", "color", "disabled", "elevation", "icon-size", "icon", "is-selected", "rounded", "size", "tooltip-location", "tooltip", "variant", "onClick"])
]),
_: 2
}, 1032, ["value"]))), 128)) : (n(!0), f(b, { key: 1 }, y(i.value, (s, h) => (n(), f("div", { key: h }, [
(n(!0), f(b, null, y(s, (u) => (n(), c(r(k), {
key: u,
value: u
}, {
default: p(({ isSelected: V, toggle: _ }) => [
z(w, {
border: e.border,
color: u,
disabled: e.disabled,
elevation: e.elevation,
"icon-size": e.iconSize,
icon: e.icon,
"is-selected": V,
rounded: e.rounded,
size: e.size,
"tooltip-location": e.tooltipLocation,
tooltip: e.tooltip,
variant: e.variant,
onClick: _
}, null, 8, ["border", "color", "disabled", "elevation", "icon-size", "icon", "is-selected", "rounded", "size", "tooltip-location", "tooltip", "variant", "onClick"])
]),
_: 2
}, 1032, ["value"]))), 128))
]))), 128))
]),
_: 1
}, 8, ["modelValue", "class"]));
}
});
const T = (l) => l.component("VSwatches", F);
export {
F as default,
T as install
};