Files

143 lines
4.4 KiB
Vue

<script>
/** 通用配置单选卡片组:父级提供 options,点击新值同时发出 v-model 更新与 change。 */
import "~/assets/styles/OsIcon.CAi4Iz2S.css";
import { toDisplayString } from "vue";
import { renderList } from "vue";
import { normalizeClass } from "vue";
import { createBlock } from "vue";
import { createCommentVNode } from "vue";
import { createElementBlock } from "vue";
import { Fragment } from "vue";
import { createElementVNode } from "vue";
import { defineComponent } from "vue";
import { openBlock } from "vue";
import OsIcon from "~/components/OsIcon.vue";
var d = [`aria-label`],
f = [`aria-pressed`, `disabled`, `onClick`],
p = {
key: 1,
},
m = Object.assign(
defineComponent({
__name: `ConfigChoiceGrid`,
props: {
modelValue: {},
options: {},
disabled: {
type: Boolean,
},
compact: {
type: Boolean,
},
images: {
type: Boolean,
},
label: {},
},
emits: [`update:modelValue`, `change`],
setup(c, { emit: m }) {
let h = c,
g = m;
function _(e) {
// 禁用或重复点击当前选项均不触发重算,避免无效报价请求。
h.disabled ||
h.modelValue === e ||
(g(`update:modelValue`, e), g(`change`));
}
return (m, h) => {
let g = OsIcon;
return (
openBlock(),
createElementBlock(
`div`,
{
class: normalizeClass([
`config-choices`,
{
compact: c.compact && !c.images,
"image-groups": c.images,
},
]),
role: `group`,
"aria-label": c.label,
},
[
(openBlock(!0),
createElementBlock(
Fragment,
null,
renderList(
c.options,
(t) => (
openBlock(),
createElementBlock(
`button`,
{
key: t.value,
type: `button`,
class: normalizeClass([
c.images ? `image-group` : `config-choice`,
{
active: c.modelValue === t.value,
},
]),
"aria-pressed": c.modelValue === t.value,
disabled: c.disabled,
onClick: (e) => _(t.value),
},
[
c.images
? (openBlock(),
createBlock(
g,
{
key: 0,
name: t.label,
url: t.iconUrl,
icon: t.icon,
size: 36,
},
null,
8,
[`name`, `url`, `icon`],
))
: createCommentVNode(``, !0),
createElementVNode(
`span`,
null,
toDisplayString(t.label),
1,
),
t.description
? (openBlock(),
createElementBlock(
`small`,
p,
toDisplayString(t.description),
1,
))
: createCommentVNode(``, !0),
],
10,
f,
)
),
),
128,
)),
],
10,
d,
)
);
};
},
}),
{
__name: `ConfigChoiceGrid`,
},
);
export {};
export default m;
</script>