vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
228 lines (227 loc) • 11.7 kB
JavaScript
import { defineComponent as V, ref as p, watch as C, createElementBlock as r, openBlock as o, normalizeStyle as A, normalizeClass as h, Fragment as E, renderList as K, createBlock as N, unref as P, mergeProps as T, createSlots as D, withCtx as y, createElementVNode as i, withKeys as k, withModifiers as f, createCommentVNode as M, renderSlot as m, toDisplayString as g, createTextVNode as F } from "vue";
import R from "../tooltip/index.js";
const U = ["onClick", "onKeydown"], j = ["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"
}, G = {
key: 1,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, I = {
key: 2,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, J = {
key: 3,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, O = {
key: 4,
class: "icon-character"
}, Q = ["onClick", "onMouseenter"], W = {
key: 0,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, X = {
key: 1,
class: "icon-character",
focusable: "false",
"data-icon": "star",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Y = {
key: 2,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, Z = {
key: 3,
class: "icon-character",
focusable: "false",
"data-icon": "heart",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, _ = {
key: 4,
class: "icon-character"
}, a1 = /* @__PURE__ */ V({
__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(L, { emit: z }) {
const u = L, t = p(), c = p(), n = p(), s = z;
C(
() => u.value,
(e) => {
t.value = e;
},
{
immediate: !0
}
), C(
t,
(e) => {
c.value = e;
},
{
immediate: !0
}
);
function v(e) {
n.value = null, e !== t.value ? (t.value = e, s("change", e), s("update:value", e)) : u.allowClear ? (n.value = e, t.value = 0, s("change", 0), s("update:value", 0)) : s("change", e);
}
function B(e) {
c.value = e, s("hoverChange", e);
}
function b(e) {
c.value = e, s("hoverChange", e);
}
function w() {
n.value = null;
}
function $() {
c.value = t.value;
}
function H() {
n.value = null, t.value < u.count && (t.value += u.allowHalf ? 0.5 : 1, s("change", t.value), s("update:value", t.value));
}
function S() {
n.value = null, t.value > 0 && (t.value -= u.allowHalf ? 0.5 : 1, s("change", t.value), s("update:value", t.value));
}
return (e, l) => (o(), r("div", {
class: h(["rate-wrap", { "rate-disabled": e.disabled }]),
style: A(`--rate-star-color: ${e.color}; --rate-star-gap: ${e.gap}px; --rate-star-size: ${e.size}px;`),
onMouseleave: $
}, [
(o(!0), r(E, null, K(e.count, (a) => (o(), N(P(R), T({
key: a,
ref_for: !0
}, e.tooltipProps), D({
default: y(() => [
i("div", {
tabindex: "0",
class: h(["rate-star", {
"star-half": e.allowHalf && c.value >= a - 0.5 && c.value < a,
"star-full": c.value >= a,
"temp-gray": !e.allowHalf && n.value === a
}]),
onClick: (d) => e.allowHalf ? () => !1 : v(a),
onKeydown: [
k(f(H, ["prevent"]), ["right"]),
k(f(S, ["prevent"]), ["left"])
]
}, [
e.allowHalf ? (o(), r("div", {
key: 0,
class: h(["star-first", { "temp-gray-first": n.value === a - 0.5 }]),
onClick: f((d) => v(a - 0.5), ["stop"]),
onMouseenter: (d) => B(a - 0.5),
onMouseleave: w
}, [
m(e.$slots, "character", { value: a }, () => [
e.character === "star-filled" ? (o(), r("svg", q, [...l[0] || (l[0] = [
i("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" ? (o(), r("svg", G, [...l[1] || (l[1] = [
i("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" ? (o(), r("svg", I, [...l[2] || (l[2] = [
i("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" ? (o(), r("svg", J, [...l[3] || (l[3] = [
i("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 ? (o(), r("span", O, g(e.character), 1)) : M("", !0)
], !0)
], 42, j)) : M("", !0),
i("div", {
class: h(["star-second", { "temp-gray-second": n.value === a }]),
onClick: f((d) => v(a), ["stop"]),
onMouseenter: (d) => b(a),
onMouseleave: w
}, [
m(e.$slots, "character", { value: a }, () => [
e.character === "star-filled" ? (o(), r("svg", W, [...l[4] || (l[4] = [
i("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" ? (o(), r("svg", X, [...l[5] || (l[5] = [
i("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" ? (o(), r("svg", Y, [...l[6] || (l[6] = [
i("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" ? (o(), r("svg", Z, [...l[7] || (l[7] = [
i("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)
])])) : (o(), r("span", _, g(e.character), 1))
], !0)
], 42, Q)
], 42, U)
]),
_: 2
}, [
e.tooltips[a - 1] ? {
name: "tooltip",
fn: y(() => [
m(e.$slots, "tooltip", {
tooltip: e.tooltips[a - 1],
value: a
}, () => [
F(g(e.tooltips[a - 1]), 1)
], !0)
]),
key: "0"
} : void 0
]), 1040))), 128))
], 38));
}
});
export {
a1 as default
};