@geckou/ui-vue 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -2
- package/dist/_virtual/_plugin-vue_export-helper.js +9 -0
- package/dist/components/ArticleList/Card/Artistic.vue.js +9 -0
- package/dist/components/ArticleList/Card/Artistic.vue2.js +105 -0
- package/dist/components/ArticleList/Card/Artistic.vue3.js +27 -0
- package/dist/components/ArticleList/Card/Entertainment.vue.js +9 -0
- package/dist/components/ArticleList/Card/Entertainment.vue2.js +120 -0
- package/dist/components/ArticleList/Card/Entertainment.vue3.js +31 -0
- package/dist/components/ArticleList/Card/Gallery.vue.js +9 -0
- package/dist/components/ArticleList/Card/Gallery.vue2.js +103 -0
- package/dist/components/ArticleList/Card/Gallery.vue3.js +23 -0
- package/dist/components/ArticleList/Card/Grid.vue.js +9 -0
- package/dist/components/ArticleList/Card/Grid.vue2.js +114 -0
- package/dist/components/ArticleList/Card/Grid.vue3.js +25 -0
- package/dist/components/ArticleList/Card/News.vue.js +9 -0
- package/dist/components/ArticleList/Card/News.vue2.js +95 -0
- package/dist/components/ArticleList/Card/News.vue3.js +19 -0
- package/dist/components/ArticleList/Card/Rounded.vue.js +9 -0
- package/dist/components/ArticleList/Card/Rounded.vue2.js +96 -0
- package/dist/components/ArticleList/Card/Rounded.vue3.js +15 -0
- package/dist/components/ArticleList/Card/Row.vue.js +9 -0
- package/dist/components/ArticleList/Card/Row.vue2.js +97 -0
- package/dist/components/ArticleList/Card/Row.vue3.js +17 -0
- package/dist/components/ArticleList/Card/Simple.vue.js +9 -0
- package/dist/components/ArticleList/Card/Simple.vue2.js +98 -0
- package/dist/components/ArticleList/Card/Simple.vue3.js +23 -0
- package/dist/components/ArticleList/Card/Standard.vue.js +9 -0
- package/dist/components/ArticleList/Card/Standard.vue2.js +93 -0
- package/dist/components/ArticleList/Card/Standard.vue3.js +21 -0
- package/dist/components/ArticleList/Card/Tile.vue.js +9 -0
- package/dist/components/ArticleList/Card/Tile.vue2.js +96 -0
- package/dist/components/ArticleList/Card/Tile.vue3.js +23 -0
- package/dist/components/ArticleList/GenericArticleList.vue.js +9 -0
- package/dist/components/ArticleList/GenericArticleList.vue2.js +72 -0
- package/dist/components/ArticleList/GenericArticleList.vue3.js +11 -0
- package/dist/components/ArticleList/List/Artistic.vue.js +22 -0
- package/dist/components/ArticleList/List/Artistic.vue2.js +4 -0
- package/dist/components/ArticleList/List/Entertainment.vue.js +22 -0
- package/dist/components/ArticleList/List/Entertainment.vue2.js +4 -0
- package/dist/components/ArticleList/List/Gallery.vue.js +22 -0
- package/dist/components/ArticleList/List/Gallery.vue2.js +4 -0
- package/dist/components/ArticleList/List/Grid.vue.js +9 -0
- package/dist/components/ArticleList/List/Grid.vue2.js +120 -0
- package/dist/components/ArticleList/List/Grid.vue3.js +9 -0
- package/dist/components/ArticleList/List/News.vue.js +22 -0
- package/dist/components/ArticleList/List/News.vue2.js +4 -0
- package/dist/components/ArticleList/List/Rounded.vue.js +22 -0
- package/dist/components/ArticleList/List/Rounded.vue2.js +4 -0
- package/dist/components/ArticleList/List/Row.vue.js +22 -0
- package/dist/components/ArticleList/List/Row.vue2.js +4 -0
- package/dist/components/ArticleList/List/Simple.vue.js +22 -0
- package/dist/components/ArticleList/List/Simple.vue2.js +4 -0
- package/dist/components/ArticleList/List/Standard.vue.js +22 -0
- package/dist/components/ArticleList/List/Standard.vue2.js +4 -0
- package/dist/components/ArticleList/List/Tile.vue.js +22 -0
- package/dist/components/ArticleList/List/Tile.vue2.js +4 -0
- package/dist/components/ArticleList/Parts/AuthorInfo.vue.js +9 -0
- package/dist/components/ArticleList/Parts/AuthorInfo.vue2.js +64 -0
- package/dist/components/ArticleList/Parts/AuthorInfo.vue3.js +11 -0
- package/dist/components/ArticleList/Parts/CardContainer.vue.js +9 -0
- package/dist/components/ArticleList/Parts/CardContainer.vue2.js +18 -0
- package/dist/components/ArticleList/Parts/CardContainer.vue3.js +7 -0
- package/dist/components/ArticleList/Parts/CardHeading.vue.d.ts +6 -1
- package/dist/components/ArticleList/Parts/CardHeading.vue.js +9 -0
- package/dist/components/ArticleList/Parts/CardHeading.vue2.js +25 -0
- package/dist/components/ArticleList/Parts/CardHeading.vue3.js +7 -0
- package/dist/components/ArticleList/Parts/CategoryList.vue.js +38 -0
- package/dist/components/ArticleList/Parts/CategoryList.vue2.js +4 -0
- package/dist/components/ArticleList/Parts/ExcerptText.vue.js +9 -0
- package/dist/components/ArticleList/Parts/ExcerptText.vue2.js +24 -0
- package/dist/components/ArticleList/Parts/ExcerptText.vue3.js +7 -0
- package/dist/components/ArticleList/Parts/MetadataList.vue.js +9 -0
- package/dist/components/ArticleList/Parts/MetadataList.vue2.js +62 -0
- package/dist/components/ArticleList/Parts/MetadataList.vue3.js +17 -0
- package/dist/components/ArticleList/Parts/NoImage.vue.js +9 -0
- package/dist/components/ArticleList/Parts/NoImage.vue2.js +16 -0
- package/dist/components/ArticleList/Parts/NoImage.vue3.js +7 -0
- package/dist/components/ArticleList/Parts/PostedDate.vue.js +9 -0
- package/dist/components/ArticleList/Parts/PostedDate.vue2.js +28 -0
- package/dist/components/ArticleList/Parts/PostedDate.vue3.js +7 -0
- package/dist/components/ArticleList/Parts/TagList.vue.js +32 -0
- package/dist/components/ArticleList/Parts/TagList.vue2.js +4 -0
- package/dist/components/ArticleList/Parts/ThumbnailImage.vue.js +9 -0
- package/dist/components/ArticleList/Parts/ThumbnailImage.vue2.js +50 -0
- package/dist/components/ArticleList/Parts/ThumbnailImage.vue3.js +7 -0
- package/dist/components/BasicButton.vue.js +9 -0
- package/dist/components/BasicButton.vue2.js +71 -0
- package/dist/components/BasicButton.vue3.js +11 -0
- package/dist/components/CheckBox.vue.d.ts +10 -2
- package/dist/components/CheckBox.vue.js +9 -0
- package/dist/components/CheckBox.vue2.js +78 -0
- package/dist/components/CheckBox.vue3.js +11 -0
- package/dist/components/CheckBoxes.vue.js +9 -0
- package/dist/components/CheckBoxes.vue2.js +104 -0
- package/dist/components/CheckBoxes.vue3.js +7 -0
- package/dist/components/CheckButton.vue.js +9 -0
- package/dist/components/CheckButton.vue2.js +54 -0
- package/dist/components/CheckButton.vue3.js +11 -0
- package/dist/components/DatePicker.vue.d.ts +9 -0
- package/dist/components/DatePicker.vue.js +9 -0
- package/dist/components/DatePicker.vue2.js +157 -0
- package/dist/components/DatePicker.vue3.js +17 -0
- package/dist/components/DateRangePicker.vue.js +9 -0
- package/dist/components/DateRangePicker.vue2.js +74 -0
- package/dist/components/DateRangePicker.vue3.js +9 -0
- package/dist/components/DateSelector.vue.d.ts +14 -0
- package/dist/components/DateSelector.vue.js +9 -0
- package/dist/components/DateSelector.vue2.js +194 -0
- package/dist/components/DateSelector.vue3.js +15 -0
- package/dist/components/DropdownUi.vue.d.ts +1 -0
- package/dist/components/DropdownUi.vue.js +9 -0
- package/dist/components/DropdownUi.vue2.js +65 -0
- package/dist/components/DropdownUi.vue3.js +15 -0
- package/dist/components/ErrorMessage.vue.js +9 -0
- package/dist/components/ErrorMessage.vue2.js +30 -0
- package/dist/components/ErrorMessage.vue3.js +7 -0
- package/dist/components/Icon/CalendarIcon.vue.js +15 -0
- package/dist/components/Icon/CheckIcon.vue.js +15 -0
- package/dist/components/Icon/CloseIcon.vue.js +15 -0
- package/dist/components/Icon/Folder.vue.js +15 -0
- package/dist/components/Icon/Image.vue.js +21 -0
- package/dist/components/Icon/KeyboardArrowDownIcon.vue.js +15 -0
- package/dist/components/Icon/Tag.vue.js +15 -0
- package/dist/components/InputBox.vue.js +9 -0
- package/dist/components/InputBox.vue2.js +62 -0
- package/dist/components/InputBox.vue3.js +7 -0
- package/dist/components/InputGroup.vue.js +17 -0
- package/dist/components/InputGroup.vue2.js +7 -0
- package/dist/components/LabeledCheckbox.vue.js +9 -0
- package/dist/components/LabeledCheckbox.vue2.js +60 -0
- package/dist/components/LabeledCheckbox.vue3.js +9 -0
- package/dist/components/LabeledFieldset.vue.js +9 -0
- package/dist/components/LabeledFieldset.vue2.js +29 -0
- package/dist/components/LabeledFieldset.vue3.js +11 -0
- package/dist/components/LoadingSpinner.vue.js +15 -0
- package/dist/components/ModalBox.vue.d.ts +22 -16
- package/dist/components/ModalBox.vue.js +9 -0
- package/dist/components/ModalBox.vue2.js +91 -0
- package/dist/components/ModalBox.vue3.js +23 -0
- package/dist/components/PopupBox.vue.js +9 -0
- package/dist/components/PopupBox.vue2.js +35 -0
- package/dist/components/PopupBox.vue3.js +15 -0
- package/dist/components/RadioButtons.vue.js +9 -0
- package/dist/components/RadioButtons.vue2.js +75 -0
- package/dist/components/RadioButtons.vue3.js +11 -0
- package/dist/components/SelectBox.vue.js +9 -0
- package/dist/components/SelectBox.vue2.js +109 -0
- package/dist/components/SelectBox.vue3.js +9 -0
- package/dist/components/SlideDownUi.vue.js +9 -0
- package/dist/components/SlideDownUi.vue2.js +66 -0
- package/dist/components/SlideDownUi.vue3.js +17 -0
- package/dist/components/TabUI.vue.d.ts +0 -18
- package/dist/components/TabUI.vue.js +9 -0
- package/dist/components/TabUI.vue2.js +77 -0
- package/dist/components/TabUI.vue3.js +9 -0
- package/dist/components/TextArea.vue.js +9 -0
- package/dist/components/TextArea.vue2.js +82 -0
- package/dist/components/TextArea.vue3.js +7 -0
- package/dist/components/TextBox.vue.js +9 -0
- package/dist/components/TextBox.vue2.js +76 -0
- package/dist/components/TextBox.vue3.js +7 -0
- package/dist/components/TextButton.vue.js +9 -0
- package/dist/components/TextButton.vue2.js +24 -0
- package/dist/components/TextButton.vue3.js +7 -0
- package/dist/components/ToggleButton.vue.d.ts +13 -10
- package/dist/components/ToggleButton.vue.js +9 -0
- package/dist/components/ToggleButton.vue2.js +96 -0
- package/dist/components/ToggleButton.vue3.js +13 -0
- package/dist/const/list-theme.js +65 -0
- package/dist/index.js +112 -3513
- package/dist/scripts/form-validation-manager.js +38 -0
- package/dist/scripts/unique-id.d.ts +4 -0
- package/dist/scripts/unique-id.js +9 -0
- package/dist/scripts/use-click-outside.js +13 -0
- package/dist/scripts/utils.js +21 -0
- package/dist/style.css +1 -1
- package/package.json +8 -5
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { defineComponent as q, ref as E, computed as M, watch as N, openBlock as t, createBlock as D, normalizeClass as n, withCtx as O, withDirectives as R, createElementVNode as v, createElementBlock as a, toDisplayString as d, createCommentVNode as B, Fragment as i, renderList as y, vModelSelect as x, renderSlot as A, createVNode as I } from "vue";
|
|
2
|
+
import { isEmptyValue as C, MESSAGES as z } from "@geckou/ui-core";
|
|
3
|
+
import F from "./InputBox.vue.js";
|
|
4
|
+
import G from "./ErrorMessage.vue.js";
|
|
5
|
+
import L from "./Icon/KeyboardArrowDownIcon.vue.js";
|
|
6
|
+
const U = ["name", "disabled", "required"], H = {
|
|
7
|
+
key: 0,
|
|
8
|
+
value: ""
|
|
9
|
+
}, J = {
|
|
10
|
+
key: 1,
|
|
11
|
+
disabled: "",
|
|
12
|
+
selected: "",
|
|
13
|
+
value: ""
|
|
14
|
+
}, K = ["value"], P = ["value", "disabled"], Q = ["label"], T = ["value", "disabled"], _ = /* @__PURE__ */ q({
|
|
15
|
+
__name: "SelectBox",
|
|
16
|
+
props: {
|
|
17
|
+
options: {},
|
|
18
|
+
name: {},
|
|
19
|
+
modelValue: { default: void 0 },
|
|
20
|
+
cssStyle: { default: void 0 },
|
|
21
|
+
placeholder: { default: "選択してください" },
|
|
22
|
+
canOmitSelect: { type: Boolean },
|
|
23
|
+
isDisabled: { type: Boolean },
|
|
24
|
+
isRequired: { type: Boolean }
|
|
25
|
+
},
|
|
26
|
+
emits: ["update:modelValue"],
|
|
27
|
+
setup(e, { emit: p }) {
|
|
28
|
+
const w = p, c = e, m = E([]), o = M({
|
|
29
|
+
get: () => c.modelValue ?? "",
|
|
30
|
+
set: (l) => w("update:modelValue", l)
|
|
31
|
+
}), b = (l) => typeof l == "object" && l !== null && "label" in l && typeof l.label == "string" && "value" in l, f = () => {
|
|
32
|
+
m.value = [], C(o.value) && c.isRequired && m.value.push(z.required);
|
|
33
|
+
};
|
|
34
|
+
return N(
|
|
35
|
+
() => o.value,
|
|
36
|
+
() => f(),
|
|
37
|
+
{ immediate: !C(c.modelValue), flush: "post" }
|
|
38
|
+
), (l, r) => (t(), D(F, {
|
|
39
|
+
cssStyle: e.cssStyle,
|
|
40
|
+
class: n(l.$style.select_box),
|
|
41
|
+
isDisabled: e.isDisabled
|
|
42
|
+
}, {
|
|
43
|
+
default: O(() => {
|
|
44
|
+
var S, h, k, g;
|
|
45
|
+
return [
|
|
46
|
+
R(v("select", {
|
|
47
|
+
"onUpdate:modelValue": r[0] || (r[0] = (s) => o.value = s),
|
|
48
|
+
name: e.name,
|
|
49
|
+
disabled: e.isDisabled,
|
|
50
|
+
required: e.isRequired,
|
|
51
|
+
class: n(l.$style.select),
|
|
52
|
+
onBlur: r[1] || (r[1] = (s) => f())
|
|
53
|
+
}, [
|
|
54
|
+
e.canOmitSelect ? (t(), a("option", H, d(e.placeholder || "選択しない"), 1)) : (t(), a("option", J, d(e.placeholder || "選択してください"), 1)),
|
|
55
|
+
["0", "NA"].includes(o.value.toString()) && e.isDisabled ? (t(), a("option", {
|
|
56
|
+
key: 2,
|
|
57
|
+
disabled: "",
|
|
58
|
+
selected: "",
|
|
59
|
+
value: o.value
|
|
60
|
+
}, d(e.placeholder || "選択してください"), 9, K)) : B("", !0),
|
|
61
|
+
(t(!0), a(i, null, y(e.options, (s) => (t(), a(i, {
|
|
62
|
+
key: b(s) ? s.value : Object.keys(s)[0]
|
|
63
|
+
}, [
|
|
64
|
+
b(s) ? (t(), a("option", {
|
|
65
|
+
key: 0,
|
|
66
|
+
value: s.value,
|
|
67
|
+
disabled: s.isDisabled
|
|
68
|
+
}, d(s.label), 9, P)) : (t(), a(i, { key: 1 }, [
|
|
69
|
+
(t(!0), a(i, null, y(s, ($, V) => (t(), a("optgroup", {
|
|
70
|
+
key: V,
|
|
71
|
+
label: V
|
|
72
|
+
}, [
|
|
73
|
+
(t(!0), a(i, null, y($, (u) => (t(), a("option", {
|
|
74
|
+
key: u.value,
|
|
75
|
+
value: u.value,
|
|
76
|
+
disabled: u.isDisabled
|
|
77
|
+
}, d(u.label), 9, T))), 128))
|
|
78
|
+
], 8, Q))), 128)),
|
|
79
|
+
r[2] || (r[2] = v("hr", null, null, -1))
|
|
80
|
+
], 64))
|
|
81
|
+
], 64))), 128))
|
|
82
|
+
], 42, U), [
|
|
83
|
+
[x, o.value]
|
|
84
|
+
]),
|
|
85
|
+
v("div", {
|
|
86
|
+
class: n(l.$style.arrow_container)
|
|
87
|
+
}, [
|
|
88
|
+
A(l.$slots, "arrow"),
|
|
89
|
+
l.$slots.arrow ? B("", !0) : (t(), D(L, {
|
|
90
|
+
key: 0,
|
|
91
|
+
class: n(l.$style.arrow)
|
|
92
|
+
}, null, 8, ["class"]))
|
|
93
|
+
], 2),
|
|
94
|
+
I(G, {
|
|
95
|
+
errorMessages: m.value,
|
|
96
|
+
cssStyle: {
|
|
97
|
+
textColor: (h = (S = e.cssStyle) == null ? void 0 : S.error) == null ? void 0 : h.backgroundColor,
|
|
98
|
+
backgroundColor: (g = (k = e.cssStyle) == null ? void 0 : k.error) == null ? void 0 : g.textColor
|
|
99
|
+
}
|
|
100
|
+
}, null, 8, ["errorMessages", "cssStyle"])
|
|
101
|
+
];
|
|
102
|
+
}),
|
|
103
|
+
_: 3
|
|
104
|
+
}, 8, ["cssStyle", "class", "isDisabled"]));
|
|
105
|
+
}
|
|
106
|
+
});
|
|
107
|
+
export {
|
|
108
|
+
_ as default
|
|
109
|
+
};
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { defineComponent as g, ref as s, onMounted as h, onUpdated as k, watch as C, openBlock as u, createElementBlock as $, normalizeClass as o, normalizeStyle as p, createElementVNode as l, withModifiers as b, renderSlot as f, createBlock as B, createCommentVNode as D } from "vue";
|
|
2
|
+
import O from "./Icon/KeyboardArrowDownIcon.vue.js";
|
|
3
|
+
import { useClickOutside as w } from "../scripts/use-click-outside.js";
|
|
4
|
+
const H = ["disabled", "aria-expanded"], S = ["inert"], N = /* @__PURE__ */ g({
|
|
5
|
+
__name: "SlideDownUi",
|
|
6
|
+
props: {
|
|
7
|
+
isOpened: { type: [Boolean, null], default: null },
|
|
8
|
+
isHiddenArrow: { type: Boolean },
|
|
9
|
+
isDisabled: { type: Boolean },
|
|
10
|
+
isDisableClickOutside: { type: Boolean },
|
|
11
|
+
duration: { default: 0.3 }
|
|
12
|
+
},
|
|
13
|
+
setup(i, { expose: y }) {
|
|
14
|
+
const n = i, t = s(n.isOpened || !1), a = s(null), r = s(null), d = s(0), v = () => t.value = !t.value, m = () => {
|
|
15
|
+
n.isDisableClickOutside || (t.value = !1);
|
|
16
|
+
}, c = () => {
|
|
17
|
+
const e = r.value;
|
|
18
|
+
e && (d.value = e.clientHeight);
|
|
19
|
+
};
|
|
20
|
+
return w(a, () => m()), h(() => c()), k(() => c()), C(
|
|
21
|
+
() => n.isOpened,
|
|
22
|
+
(e) => {
|
|
23
|
+
typeof e == "boolean" && (t.value = e);
|
|
24
|
+
}
|
|
25
|
+
), y({ isOpenedContents: t }), (e, z) => (u(), $("div", {
|
|
26
|
+
ref_key: "root",
|
|
27
|
+
ref: a,
|
|
28
|
+
class: o({ [e.$style.opened]: t.value }),
|
|
29
|
+
style: p({ "--accordion-toggle-duration": `${n.duration}s` })
|
|
30
|
+
}, [
|
|
31
|
+
l("button", {
|
|
32
|
+
class: o(e.$style.trigger),
|
|
33
|
+
disabled: i.isDisabled,
|
|
34
|
+
"aria-expanded": t.value,
|
|
35
|
+
type: "button",
|
|
36
|
+
onClick: b(v, ["prevent"])
|
|
37
|
+
}, [
|
|
38
|
+
l("div", {
|
|
39
|
+
class: o(e.$style.trigger_content)
|
|
40
|
+
}, [
|
|
41
|
+
f(e.$slots, "trigger")
|
|
42
|
+
], 2),
|
|
43
|
+
i.isHiddenArrow ? D("", !0) : (u(), B(O, {
|
|
44
|
+
key: 0,
|
|
45
|
+
class: o(e.$style.icon)
|
|
46
|
+
}, null, 8, ["class"]))
|
|
47
|
+
], 10, H),
|
|
48
|
+
l("div", {
|
|
49
|
+
style: p({ height: t.value ? `${d.value}px` : 0 }),
|
|
50
|
+
class: o(e.$style.contents),
|
|
51
|
+
inert: !t.value || void 0
|
|
52
|
+
}, [
|
|
53
|
+
l("div", {
|
|
54
|
+
ref_key: "contents",
|
|
55
|
+
ref: r,
|
|
56
|
+
class: o(e.$style.container)
|
|
57
|
+
}, [
|
|
58
|
+
f(e.$slots, "default")
|
|
59
|
+
], 2)
|
|
60
|
+
], 14, S)
|
|
61
|
+
], 6));
|
|
62
|
+
}
|
|
63
|
+
});
|
|
64
|
+
export {
|
|
65
|
+
N as default
|
|
66
|
+
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
const t = "_trigger_content_1gj5s_12", o = "_trigger_1gj5s_12", n = "_icon_1gj5s_28", e = "_contents_1gj5s_38", _ = "_opened_1gj5s_43", g = "_overflow_1gj5s_1", s = {
|
|
2
|
+
trigger_content: t,
|
|
3
|
+
trigger: o,
|
|
4
|
+
icon: n,
|
|
5
|
+
contents: e,
|
|
6
|
+
opened: _,
|
|
7
|
+
overflow: g
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
e as contents,
|
|
11
|
+
s as default,
|
|
12
|
+
n as icon,
|
|
13
|
+
_ as opened,
|
|
14
|
+
g as overflow,
|
|
15
|
+
o as trigger,
|
|
16
|
+
t as trigger_content
|
|
17
|
+
};
|
|
@@ -8,15 +8,6 @@ type __VLS_Props = {
|
|
|
8
8
|
background: string;
|
|
9
9
|
text: string;
|
|
10
10
|
};
|
|
11
|
-
cssStyle?: {
|
|
12
|
-
textColor: string;
|
|
13
|
-
backgroundColor: string;
|
|
14
|
-
border: {
|
|
15
|
-
color: string;
|
|
16
|
-
size: string;
|
|
17
|
-
radius: string;
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
11
|
initialIndex?: number;
|
|
21
12
|
};
|
|
22
13
|
declare function __VLS_template(): {
|
|
@@ -27,15 +18,6 @@ declare function __VLS_template(): {
|
|
|
27
18
|
};
|
|
28
19
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
29
20
|
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
30
|
-
cssStyle: {
|
|
31
|
-
textColor: string;
|
|
32
|
-
backgroundColor: string;
|
|
33
|
-
border: {
|
|
34
|
-
color: string;
|
|
35
|
-
size: string;
|
|
36
|
-
radius: string;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
21
|
color: {
|
|
40
22
|
active: string;
|
|
41
23
|
background: string;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { defineComponent as L, ref as h, openBlock as a, createElementBlock as s, createElementVNode as S, normalizeClass as p, normalizeStyle as T, unref as A, Fragment as y, renderList as I, renderSlot as g, createTextVNode as D, toDisplayString as N, createCommentVNode as R, withDirectives as V, vShow as z } from "vue";
|
|
2
|
+
import { COLOR as B } from "@geckou/ui-core";
|
|
3
|
+
import { nextUniqueId as E } from "../scripts/unique-id.js";
|
|
4
|
+
const K = ["id", "aria-controls", "aria-selected", "tabindex", "onClick"], O = ["id", "aria-labelledby"], _ = /* @__PURE__ */ L({
|
|
5
|
+
__name: "TabUI",
|
|
6
|
+
props: {
|
|
7
|
+
tabs: {},
|
|
8
|
+
color: { default: void 0 },
|
|
9
|
+
initialIndex: { default: 0 }
|
|
10
|
+
},
|
|
11
|
+
setup(l) {
|
|
12
|
+
const r = l, k = E("tabs"), f = (e) => `${k}_tab_${e}`, b = (e) => `${k}_panel_${e}`, d = r.tabs[r.initialIndex] ?? r.tabs[0], o = h((d == null ? void 0 : d.key) ?? ""), v = h([]), w = (e) => o.value = e, m = (e) => {
|
|
13
|
+
var n;
|
|
14
|
+
o.value = r.tabs[e].key, (n = v.value[e]) == null || n.focus();
|
|
15
|
+
}, x = (e) => {
|
|
16
|
+
if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
|
|
17
|
+
return;
|
|
18
|
+
const n = r.tabs.findIndex(
|
|
19
|
+
(c) => c.key === o.value
|
|
20
|
+
);
|
|
21
|
+
if (n === -1)
|
|
22
|
+
return;
|
|
23
|
+
e.preventDefault();
|
|
24
|
+
const i = r.tabs.length - 1;
|
|
25
|
+
e.key === "ArrowLeft" ? m(n > 0 ? n - 1 : i) : m(n < i ? n + 1 : 0);
|
|
26
|
+
};
|
|
27
|
+
return (e, n) => {
|
|
28
|
+
var i, c, $;
|
|
29
|
+
return a(), s("div", null, [
|
|
30
|
+
S("div", {
|
|
31
|
+
class: p(e.$style.tabs),
|
|
32
|
+
style: T({
|
|
33
|
+
"--active-color": ((i = l.color) == null ? void 0 : i.active) || A(B).blue,
|
|
34
|
+
"--background-color": ((c = l.color) == null ? void 0 : c.background) || "transparent",
|
|
35
|
+
"--text-color": (($ = l.color) == null ? void 0 : $.text) || "inherit"
|
|
36
|
+
}),
|
|
37
|
+
role: "tablist",
|
|
38
|
+
onKeydown: x
|
|
39
|
+
}, [
|
|
40
|
+
(a(!0), s(y, null, I(l.tabs, (t, C) => (a(), s("button", {
|
|
41
|
+
id: f(t.key),
|
|
42
|
+
key: t.key,
|
|
43
|
+
ref_for: !0,
|
|
44
|
+
ref: (u) => {
|
|
45
|
+
u && (v.value[C] = u);
|
|
46
|
+
},
|
|
47
|
+
type: "button",
|
|
48
|
+
role: "tab",
|
|
49
|
+
"aria-controls": b(t.key),
|
|
50
|
+
"aria-selected": o.value === t.key,
|
|
51
|
+
tabindex: o.value === t.key ? 0 : -1,
|
|
52
|
+
class: p({ [e.$style.active]: o.value === t.key }),
|
|
53
|
+
onClick: (u) => w(t.key)
|
|
54
|
+
}, [
|
|
55
|
+
g(e.$slots, t.key),
|
|
56
|
+
e.$slots[t.key] ? R("", !0) : (a(), s(y, { key: 0 }, [
|
|
57
|
+
D(N(t.label), 1)
|
|
58
|
+
], 64))
|
|
59
|
+
], 10, K))), 128))
|
|
60
|
+
], 38),
|
|
61
|
+
(a(!0), s(y, null, I(l.tabs, (t) => V((a(), s("div", {
|
|
62
|
+
id: b(t.key),
|
|
63
|
+
key: `${t.key}_panel`,
|
|
64
|
+
role: "tabpanel",
|
|
65
|
+
"aria-labelledby": f(t.key)
|
|
66
|
+
}, [
|
|
67
|
+
g(e.$slots, `${t.key}Contents`)
|
|
68
|
+
], 8, O)), [
|
|
69
|
+
[z, o.value === t.key]
|
|
70
|
+
])), 128))
|
|
71
|
+
]);
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
export {
|
|
76
|
+
_ as default
|
|
77
|
+
};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { defineComponent as x, computed as y, ref as v, onMounted as V, watch as p, openBlock as b, createBlock as S, normalizeClass as w, withCtx as B, withDirectives as C, createElementVNode as k, vModelText as q, createVNode as D, nextTick as M } from "vue";
|
|
2
|
+
import { isEmptyValue as R, validateInputValue as E } from "@geckou/ui-core";
|
|
3
|
+
import H from "./InputBox.vue.js";
|
|
4
|
+
import T from "./ErrorMessage.vue.js";
|
|
5
|
+
const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows", "maxlength", "aria-invalid"], N = /* @__PURE__ */ x({
|
|
6
|
+
__name: "TextArea",
|
|
7
|
+
props: {
|
|
8
|
+
name: {},
|
|
9
|
+
modelValue: { default: void 0 },
|
|
10
|
+
cssStyle: { default: void 0 },
|
|
11
|
+
placeholder: { default: "入力してください" },
|
|
12
|
+
isDisabled: { type: Boolean, default: !1 },
|
|
13
|
+
isRequired: { type: Boolean, default: !1 },
|
|
14
|
+
rows: { default: void 0 },
|
|
15
|
+
maxLength: { default: 100 },
|
|
16
|
+
autocomplete: { default: "off" },
|
|
17
|
+
validates: { default: () => [] },
|
|
18
|
+
autoAdjustHeight: { type: Boolean }
|
|
19
|
+
},
|
|
20
|
+
emits: ["update:modelValue"],
|
|
21
|
+
setup(e, { emit: h }) {
|
|
22
|
+
const g = h, t = e, l = y({
|
|
23
|
+
get: () => t.modelValue ?? "",
|
|
24
|
+
set: (r) => g("update:modelValue", r)
|
|
25
|
+
}), o = v([]), a = v(null), u = () => {
|
|
26
|
+
o.value = E(l.value, {
|
|
27
|
+
isRequired: t.isRequired,
|
|
28
|
+
validates: t.validates
|
|
29
|
+
});
|
|
30
|
+
}, d = () => {
|
|
31
|
+
t.autoAdjustHeight && M(() => {
|
|
32
|
+
a.value && (a.value.style.height = "auto", a.value.style.height = `calc(${a.value.scrollHeight}px - 2rem)`);
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
return V(d), p(
|
|
36
|
+
l,
|
|
37
|
+
() => {
|
|
38
|
+
u(), d();
|
|
39
|
+
},
|
|
40
|
+
// 数値 0 も初期値として扱うため truthy 判定は使わない
|
|
41
|
+
{ immediate: !R(t.modelValue), flush: "post" }
|
|
42
|
+
), (r, s) => (b(), S(H, {
|
|
43
|
+
cssStyle: e.cssStyle,
|
|
44
|
+
class: w(r.$style.text_area),
|
|
45
|
+
isErrored: !!o.value.length,
|
|
46
|
+
isDisabled: e.isDisabled
|
|
47
|
+
}, {
|
|
48
|
+
default: B(() => {
|
|
49
|
+
var i, n, m, c;
|
|
50
|
+
return [
|
|
51
|
+
C(k("textarea", {
|
|
52
|
+
ref_key: "textareaRef",
|
|
53
|
+
ref: a,
|
|
54
|
+
"onUpdate:modelValue": s[0] || (s[0] = (f) => l.value = f),
|
|
55
|
+
name: e.name,
|
|
56
|
+
required: e.isRequired,
|
|
57
|
+
placeholder: e.placeholder,
|
|
58
|
+
disabled: e.isDisabled,
|
|
59
|
+
autocomplete: e.autocomplete,
|
|
60
|
+
rows: e.rows,
|
|
61
|
+
maxlength: e.maxLength,
|
|
62
|
+
"aria-invalid": o.value.length ? "true" : void 0,
|
|
63
|
+
onBlur: s[1] || (s[1] = (f) => u())
|
|
64
|
+
}, null, 40, j), [
|
|
65
|
+
[q, l.value]
|
|
66
|
+
]),
|
|
67
|
+
D(T, {
|
|
68
|
+
errorMessages: o.value,
|
|
69
|
+
cssStyle: {
|
|
70
|
+
textColor: (n = (i = e.cssStyle) == null ? void 0 : i.error) == null ? void 0 : n.backgroundColor,
|
|
71
|
+
backgroundColor: (c = (m = e.cssStyle) == null ? void 0 : m.error) == null ? void 0 : c.textColor
|
|
72
|
+
}
|
|
73
|
+
}, null, 8, ["errorMessages", "cssStyle"])
|
|
74
|
+
];
|
|
75
|
+
}),
|
|
76
|
+
_: 1
|
|
77
|
+
}, 8, ["cssStyle", "class", "isErrored", "isDisabled"]));
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
export {
|
|
81
|
+
N as default
|
|
82
|
+
};
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { defineComponent as y, ref as p, computed as g, watch as h, openBlock as b, createBlock as x, normalizeClass as V, withCtx as S, renderSlot as c, withDirectives as B, createElementVNode as C, vModelDynamic as D, createVNode as q } from "vue";
|
|
2
|
+
import { convertFullWidthToHalfWidth as E, isEmptyValue as M, validateInputValue as k } from "@geckou/ui-core";
|
|
3
|
+
import R from "./InputBox.vue.js";
|
|
4
|
+
import T from "./ErrorMessage.vue.js";
|
|
5
|
+
const $ = ["type", "name", "required", "placeholder", "disabled", "autocomplete", "maxlength", "aria-invalid"], w = /* @__PURE__ */ y({
|
|
6
|
+
__name: "TextBox",
|
|
7
|
+
props: {
|
|
8
|
+
name: {},
|
|
9
|
+
modelValue: { default: void 0 },
|
|
10
|
+
cssStyle: { default: void 0 },
|
|
11
|
+
inputType: { default: "text" },
|
|
12
|
+
placeholder: { default: "入力してください" },
|
|
13
|
+
isDisabled: { type: Boolean },
|
|
14
|
+
isRequired: { type: Boolean },
|
|
15
|
+
maxLength: { default: 30 },
|
|
16
|
+
autocomplete: { default: "off" },
|
|
17
|
+
validates: { default: () => [] }
|
|
18
|
+
},
|
|
19
|
+
emits: ["update:modelValue"],
|
|
20
|
+
setup(e, { emit: f }) {
|
|
21
|
+
const v = f, a = e, o = p([]), s = g({
|
|
22
|
+
get: () => a.modelValue ?? "",
|
|
23
|
+
set: (t) => {
|
|
24
|
+
const l = typeof t == "number" ? t : E(String(t));
|
|
25
|
+
v("update:modelValue", l);
|
|
26
|
+
}
|
|
27
|
+
}), d = () => {
|
|
28
|
+
o.value = k(s.value, {
|
|
29
|
+
isRequired: a.isRequired,
|
|
30
|
+
validates: a.validates
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
return h(s, () => d(), {
|
|
34
|
+
immediate: !M(a.modelValue),
|
|
35
|
+
flush: "post"
|
|
36
|
+
}), (t, l) => (b(), x(R, {
|
|
37
|
+
cssStyle: e.cssStyle,
|
|
38
|
+
class: V(t.$style.text_box),
|
|
39
|
+
isErrored: !!o.value.length,
|
|
40
|
+
isDisabled: e.isDisabled
|
|
41
|
+
}, {
|
|
42
|
+
default: S(() => {
|
|
43
|
+
var i, r, u, n;
|
|
44
|
+
return [
|
|
45
|
+
c(t.$slots, "before"),
|
|
46
|
+
B(C("input", {
|
|
47
|
+
"onUpdate:modelValue": l[0] || (l[0] = (m) => s.value = m),
|
|
48
|
+
type: e.inputType,
|
|
49
|
+
name: e.name,
|
|
50
|
+
required: e.isRequired,
|
|
51
|
+
placeholder: e.placeholder,
|
|
52
|
+
disabled: e.isDisabled,
|
|
53
|
+
autocomplete: e.autocomplete,
|
|
54
|
+
maxlength: e.maxLength,
|
|
55
|
+
"aria-invalid": o.value.length ? "true" : void 0,
|
|
56
|
+
onBlur: l[1] || (l[1] = (m) => d())
|
|
57
|
+
}, null, 40, $), [
|
|
58
|
+
[D, s.value]
|
|
59
|
+
]),
|
|
60
|
+
c(t.$slots, "after"),
|
|
61
|
+
q(T, {
|
|
62
|
+
errorMessages: o.value,
|
|
63
|
+
cssStyle: {
|
|
64
|
+
textColor: (r = (i = e.cssStyle) == null ? void 0 : i.error) == null ? void 0 : r.backgroundColor,
|
|
65
|
+
backgroundColor: (n = (u = e.cssStyle) == null ? void 0 : u.error) == null ? void 0 : n.textColor
|
|
66
|
+
}
|
|
67
|
+
}, null, 8, ["errorMessages", "cssStyle"])
|
|
68
|
+
];
|
|
69
|
+
}),
|
|
70
|
+
_: 3
|
|
71
|
+
}, 8, ["cssStyle", "class", "isErrored", "isDisabled"]));
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
export {
|
|
75
|
+
w as default
|
|
76
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { defineComponent as l, computed as n, openBlock as s, createElementBlock as r, normalizeClass as i, normalizeStyle as c, toDisplayString as u } from "vue";
|
|
2
|
+
import { COLOR as d } from "@geckou/ui-core";
|
|
3
|
+
const m = ["disabled"], x = /* @__PURE__ */ l({
|
|
4
|
+
__name: "TextButton",
|
|
5
|
+
props: {
|
|
6
|
+
text: {},
|
|
7
|
+
variant: { default: "default" },
|
|
8
|
+
isDisabled: { type: Boolean, default: !1 }
|
|
9
|
+
},
|
|
10
|
+
setup(t) {
|
|
11
|
+
const e = t, o = n(
|
|
12
|
+
() => e.variant === "caution" ? d.red : "var(--link-color)"
|
|
13
|
+
);
|
|
14
|
+
return (a, p) => (s(), r("button", {
|
|
15
|
+
type: "button",
|
|
16
|
+
class: i(a.$style.text_button),
|
|
17
|
+
disabled: t.isDisabled,
|
|
18
|
+
style: c({ "--text-button-color": o.value })
|
|
19
|
+
}, u(t.text), 15, m));
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
export {
|
|
23
|
+
x as default
|
|
24
|
+
};
|
|
@@ -1,23 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BaseStyle, StyleForEachStatus } from '../types';
|
|
2
|
+
type ToggleStyle = {
|
|
3
|
+
on: BaseStyle;
|
|
4
|
+
off: BaseStyle;
|
|
5
|
+
};
|
|
2
6
|
type __VLS_Props = {
|
|
3
7
|
name: string;
|
|
4
8
|
label?: Record<'on' | 'off', string>;
|
|
5
9
|
modelValue?: boolean;
|
|
6
10
|
isDisabled?: boolean;
|
|
7
|
-
cssStyle?:
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
+
cssStyle?: StyleForEachStatus<ToggleStyle>;
|
|
12
|
+
/** アクセシブル名。可視ラベルがあるなら ariaLabelledBy でその要素を指すこと */
|
|
13
|
+
ariaLabel?: string;
|
|
14
|
+
ariaLabelledBy?: string;
|
|
11
15
|
};
|
|
12
16
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
13
17
|
"update:modelValue": (newValue: boolean) => any;
|
|
14
18
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
15
19
|
"onUpdate:modelValue"?: ((newValue: boolean) => any) | undefined;
|
|
16
20
|
}>, {
|
|
17
|
-
cssStyle:
|
|
18
|
-
on: BaseStyle;
|
|
19
|
-
off: BaseStyle;
|
|
20
|
-
}>;
|
|
21
|
+
cssStyle: StyleForEachStatus<ToggleStyle>;
|
|
21
22
|
label: Record<"on" | "off", string>;
|
|
22
|
-
|
|
23
|
+
ariaLabel: string;
|
|
24
|
+
ariaLabelledBy: string;
|
|
25
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
23
26
|
export default _default;
|