vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
228 lines (227 loc) • 11.7 kB
JavaScript
import { defineComponent as S, ref as g, watch as k, createElementBlock as c, openBlock as r, normalizeStyle as V, normalizeClass as f, Fragment as A, renderList as E, createBlock as K, unref as N, mergeProps as P, createSlots as T, withCtx as M, createElementVNode as n, withKeys as L, withModifiers as v, createCommentVNode as z, renderSlot as w, toDisplayString as C, createTextVNode as D } from "vue";
import F from "../tooltip/index.js";
const R = ["onClick", "onKeydown"], U = ["onClick", "onMouseenter"], j = {
key: 0,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, q = {
key: 1,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, G = {
key: 2,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, I = {
key: 3,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, J = {
key: 4,
class: "icon-character"
}, O = ["onClick", "onMouseenter"], Q = {
key: 0,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, W = {
key: 1,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, X = {
key: 2,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Y = {
key: 3,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Z = {
key: 4,
class: "icon-character"
}, a1 = /* @__PURE__ */ S({
__name: "Rate",
props: {
allowClear: { type: Boolean, default: !0 },
allowHalf: { type: Boolean, default: !1 },
count: { default: 5 },
character: { default: "star-filled" },
size: { default: 20 },
color: { default: "#fadb14" },
gap: { default: 8 },
disabled: { type: Boolean, default: !1 },
tooltips: { default: () => [] },
tooltipProps: { default: () => ({}) },
value: { default: 0 }
},
emits: ["update:value", "change", "hoverChange"],
setup(e, { emit: B }) {
const d = e, o = g(), u = g(), s = g(), i = B;
k(
() => d.value,
(a) => {
o.value = a;
},
{
immediate: !0
}
), k(
o,
(a) => {
u.value = a;
},
{
immediate: !0
}
);
function m(a) {
s.value = null, a !== o.value ? (o.value = a, i("change", a), i("update:value", a)) : d.allowClear ? (s.value = a, o.value = 0, i("change", 0), i("update:value", 0)) : i("change", a);
}
function b(a) {
u.value = a, i("hoverChange", a);
}
function x(a) {
u.value = a, i("hoverChange", a);
}
function y() {
s.value = null;
}
function $() {
u.value = o.value;
}
function p() {
s.value = null, o.value < d.count && (o.value += d.allowHalf ? 0.5 : 1, i("change", o.value), i("update:value", o.value));
}
function H() {
s.value = null, o.value > 0 && (o.value -= d.allowHalf ? 0.5 : 1, i("change", o.value), i("update:value", o.value));
}
return (a, l) => (r(), c("div", {
class: f(["rate-wrap", { "rate-disabled": e.disabled }]),
style: V(`--rate-star-color: ${e.color}; --rate-star-gap: ${e.gap}px; --rate-star-size: ${e.size}px;`),
onMouseleave: $
}, [
(r(!0), c(A, null, E(e.count, (t) => (r(), K(N(F), P({
key: t,
ref_for: !0
}, e.tooltipProps), T({
default: M(() => [
n("div", {
tabindex: "0",
class: f(["rate-star", {
"star-half": e.allowHalf && u.value >= t - 0.5 && u.value < t,
"star-full": u.value >= t,
"temp-gray": !e.allowHalf && s.value === t
}]),
onClick: (h) => e.allowHalf ? () => !1 : m(t),
onKeydown: [
L(v(p, ["prevent"]), ["right"]),
L(v(H, ["prevent"]), ["left"])
]
}, [
e.allowHalf ? (r(), c("div", {
key: 0,
class: f(["star-first", { "temp-gray-first": s.value === t - 0.5 }]),
onClick: v((h) => m(t - 0.5), ["stop"]),
onMouseenter: (h) => b(t - 0.5),
onMouseleave: y
}, [
w(a.$slots, "character", { value: t }, () => [
e.character === "star-filled" ? (r(), c("svg", j, [...l[0] || (l[0] = [
n("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" }, null, -1)
])])) : e.character === "star-outlined" ? (r(), c("svg", q, [...l[1] || (l[1] = [
n("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" }, null, -1)
])])) : e.character === "heart-filled" ? (r(), c("svg", G, [...l[2] || (l[2] = [
n("path", { d: "M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z" }, null, -1)
])])) : e.character === "heart-outlined" ? (r(), c("svg", I, [...l[3] || (l[3] = [
n("path", { d: "M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z" }, null, -1)
])])) : e.character ? (r(), c("span", J, C(e.character), 1)) : z("", !0)
], !0)
], 42, U)) : z("", !0),
n("div", {
class: f(["star-second", { "temp-gray-second": s.value === t }]),
onClick: v((h) => m(t), ["stop"]),
onMouseenter: (h) => x(t),
onMouseleave: y
}, [
w(a.$slots, "character", { value: t }, () => [
e.character === "star-filled" ? (r(), c("svg", Q, [...l[4] || (l[4] = [
n("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" }, null, -1)
])])) : e.character === "star-outlined" ? (r(), c("svg", W, [...l[5] || (l[5] = [
n("path", { d: "M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z" }, null, -1)
])])) : e.character === "heart-filled" ? (r(), c("svg", X, [...l[6] || (l[6] = [
n("path", { d: "M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9z" }, null, -1)
])])) : e.character === "heart-outlined" ? (r(), c("svg", Y, [...l[7] || (l[7] = [
n("path", { d: "M923 283.6a260.04 260.04 0 00-56.9-82.8 264.4 264.4 0 00-84-55.5A265.34 265.34 0 00679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 00-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z" }, null, -1)
])])) : (r(), c("span", Z, C(e.character), 1))
], !0)
], 42, O)
], 42, R)
]),
_: 2
}, [
e.tooltips[t - 1] ? {
name: "tooltip",
fn: M(() => [
w(a.$slots, "tooltip", {
tooltip: e.tooltips[t - 1],
value: t
}, () => [
D(C(e.tooltips[t - 1]), 1)
], !0)
]),
key: "0"
} : void 0
]), 1040))), 128))
], 38));
}
});
export {
a1 as default
};