comand-component-library 4.2.84 → 4.2.85
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/dist/comand-component-library.js +105 -103
- package/package.json +1 -1
- package/src/components/CmdFormElement.vue +110 -106
|
@@ -3170,13 +3170,13 @@ const Gt = {
|
|
|
3170
3170
|
key: 2,
|
|
3171
3171
|
"aria-hidden": "true"
|
|
3172
3172
|
}, Ya = ["title", "aria-errormessage", "id"], Ja = {
|
|
3173
|
-
key:
|
|
3173
|
+
key: 0,
|
|
3174
3174
|
class: "flex-container inner-input-wrapper"
|
|
3175
3175
|
}, Za = ["id", "autocomplete", "list", "value", "minlength", "maxlength"], Qa = ["title"], Xa = ["title"], $a = ["id"], es = ["value"], ts = ["checked", "value", "id", "disabled", "aria-invalid"], ns = ["innerHTML"], is = { key: 2 }, ls = { class: "switch-label-wrapper" }, os = ["checked", "value", "id", "disabled", "aria-invalid"], as = { class: "label-text" }, ss = { class: "label-text" }, rs = ["innerHTML"], ds = { key: 0 }, us = ["id"], cs = ["value", "selected"], ms = ["label"], ps = ["value", "selected"], fs = ["id", "value", "maxlength"], hs = {
|
|
3176
|
-
key:
|
|
3176
|
+
key: 4,
|
|
3177
3177
|
class: "characters-left-wrapper"
|
|
3178
3178
|
}, gs = { key: 0 }, ys = {
|
|
3179
|
-
key:
|
|
3179
|
+
key: 5,
|
|
3180
3180
|
class: "inner-input-wrapper flex-container no-gap"
|
|
3181
3181
|
}, bs = ["id", "maxlength", "value"], xs = ["title"], Cs = ["title"], vs = { key: 1 };
|
|
3182
3182
|
function ks(e, t, n, s, i, l) {
|
|
@@ -3233,116 +3233,118 @@ function ks(e, t, n, s, i, l) {
|
|
|
3233
3233
|
role: e.validationStatus === "error" ? "alert" : "dialog"
|
|
3234
3234
|
}, null, 8, ["validationStatus", "relatedId", "scrollContainerForTooltip", "cmdListOfRequirements", "role"])) : m("", !0)
|
|
3235
3235
|
], 2)) : m("", !0),
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
class: "place-inside",
|
|
3240
|
-
iconClass: n.fieldIconClass
|
|
3241
|
-
}, null, 8, ["iconClass"])) : m("", !0),
|
|
3242
|
-
n.element === "input" && e.$attrs.type !== "search" ? (a(), r(T, { key: 1 }, [
|
|
3243
|
-
o("input", S({
|
|
3244
|
-
id: e.htmlId,
|
|
3245
|
-
class: n.inputClass,
|
|
3246
|
-
onFocus: t[1] || (t[1] = (u) => e.tooltip = !0),
|
|
3247
|
-
onBlur: t[2] || (t[2] = (...u) => l.onBlur && l.onBlur(...u)),
|
|
3248
|
-
onInput: t[3] || (t[3] = (...u) => l.onInput && l.onInput(...u)),
|
|
3249
|
-
onMouseover: t[4] || (t[4] = (...u) => l.datalistFocus && l.datalistFocus(...u)),
|
|
3250
|
-
onKeyup: t[5] || (t[5] = (...u) => e.checkForCapsLock && e.checkForCapsLock(...u)),
|
|
3251
|
-
onChange: t[6] || (t[6] = (u) => e.$emit("change", u)),
|
|
3252
|
-
autocomplete: l.autocomplete,
|
|
3253
|
-
list: n.datalist ? n.datalist.id : null,
|
|
3254
|
-
value: n.modelValue,
|
|
3255
|
-
minlength: e.$attrs.type === "password" ? "8" : null,
|
|
3256
|
-
maxlength: l.getMaxLength(),
|
|
3257
|
-
ref: "input"
|
|
3258
|
-
}, l.elementAttributes), null, 16, Za),
|
|
3259
|
-
n.iconDelete?.show && !e.$attrs.disabled && (e.$attrs.type === "text" || e.$attrs.type === "email" || e.$attrs.type === "phone") ? (a(), r("a", {
|
|
3236
|
+
n.element === "input" ? (a(), r(T, { key: 1 }, [
|
|
3237
|
+
e.$attrs.type !== "checkbox" && e.$attrs.type !== "radio" && e.$attrs.type !== "search" ? (a(), r("span", Ja, [
|
|
3238
|
+
n.fieldIconClass ? (a(), x(d, {
|
|
3260
3239
|
key: 0,
|
|
3261
|
-
class: "
|
|
3240
|
+
class: "place-inside",
|
|
3241
|
+
iconClass: n.fieldIconClass
|
|
3242
|
+
}, null, 8, ["iconClass"])) : m("", !0),
|
|
3243
|
+
n.element === "input" && e.$attrs.type !== "search" ? (a(), r(T, { key: 1 }, [
|
|
3244
|
+
o("input", S({
|
|
3245
|
+
id: e.htmlId,
|
|
3246
|
+
class: n.inputClass,
|
|
3247
|
+
onFocus: t[1] || (t[1] = (u) => e.tooltip = !0),
|
|
3248
|
+
onBlur: t[2] || (t[2] = (...u) => l.onBlur && l.onBlur(...u)),
|
|
3249
|
+
onInput: t[3] || (t[3] = (...u) => l.onInput && l.onInput(...u)),
|
|
3250
|
+
onMouseover: t[4] || (t[4] = (...u) => l.datalistFocus && l.datalistFocus(...u)),
|
|
3251
|
+
onKeyup: t[5] || (t[5] = (...u) => e.checkForCapsLock && e.checkForCapsLock(...u)),
|
|
3252
|
+
onChange: t[6] || (t[6] = (u) => e.$emit("change", u)),
|
|
3253
|
+
autocomplete: l.autocomplete,
|
|
3254
|
+
list: n.datalist ? n.datalist.id : null,
|
|
3255
|
+
value: n.modelValue,
|
|
3256
|
+
minlength: e.$attrs.type === "password" ? "8" : null,
|
|
3257
|
+
maxlength: l.getMaxLength(),
|
|
3258
|
+
ref: "input"
|
|
3259
|
+
}, l.elementAttributes), null, 16, Za),
|
|
3260
|
+
n.iconDelete?.show && !e.$attrs.disabled && (e.$attrs.type === "text" || e.$attrs.type === "email" || e.$attrs.type === "phone") ? (a(), r("a", {
|
|
3261
|
+
key: 0,
|
|
3262
|
+
class: "deleteicon",
|
|
3263
|
+
href: "#",
|
|
3264
|
+
onClick: t[7] || (t[7] = w((...u) => l.deleteInput && l.deleteInput(...u), ["prevent"])),
|
|
3265
|
+
title: n.iconDelete?.tooltip
|
|
3266
|
+
}, [
|
|
3267
|
+
f(d, {
|
|
3268
|
+
iconClass: n.iconDelete?.iconClass,
|
|
3269
|
+
type: n.iconDelete?.iconType
|
|
3270
|
+
}, null, 8, ["iconClass", "type"])
|
|
3271
|
+
], 8, Qa)) : m("", !0)
|
|
3272
|
+
], 64)) : m("", !0),
|
|
3273
|
+
e.$attrs.type === "password" ? (a(), r("a", {
|
|
3274
|
+
key: 2,
|
|
3262
3275
|
href: "#",
|
|
3263
|
-
|
|
3264
|
-
|
|
3276
|
+
class: "place-inside",
|
|
3277
|
+
onMousedown: t[8] || (t[8] = w((...u) => l.showPassword && l.showPassword(...u), ["prevent"])),
|
|
3278
|
+
onMouseup: t[9] || (t[9] = w((...u) => l.hidePassword && l.hidePassword(...u), ["prevent"])),
|
|
3279
|
+
onMouseleave: t[10] || (t[10] = w((...u) => l.hidePassword && l.hidePassword(...u), ["prevent"])),
|
|
3280
|
+
onClick: t[11] || (t[11] = w(() => {
|
|
3281
|
+
}, ["prevent"])),
|
|
3282
|
+
title: n.iconPasswordVisible.tooltip
|
|
3265
3283
|
}, [
|
|
3266
3284
|
f(d, {
|
|
3267
|
-
iconClass: n.
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
href: "#",
|
|
3275
|
-
class: "place-inside",
|
|
3276
|
-
onMousedown: t[8] || (t[8] = w((...u) => l.showPassword && l.showPassword(...u), ["prevent"])),
|
|
3277
|
-
onMouseup: t[9] || (t[9] = w((...u) => l.hidePassword && l.hidePassword(...u), ["prevent"])),
|
|
3278
|
-
onMouseleave: t[10] || (t[10] = w((...u) => l.hidePassword && l.hidePassword(...u), ["prevent"])),
|
|
3279
|
-
onClick: t[11] || (t[11] = w(() => {
|
|
3280
|
-
}, ["prevent"])),
|
|
3281
|
-
title: n.iconPasswordVisible.tooltip
|
|
3285
|
+
iconClass: n.iconPasswordVisible.iconClass
|
|
3286
|
+
}, null, 8, ["iconClass"])
|
|
3287
|
+
], 40, Xa)) : m("", !0)
|
|
3288
|
+
])) : m("", !0),
|
|
3289
|
+
n.datalist && n.datalist.options.length ? (a(), r("datalist", {
|
|
3290
|
+
key: 1,
|
|
3291
|
+
id: n.datalist.id
|
|
3282
3292
|
}, [
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3293
|
+
(a(!0), r(T, null, P(n.datalist.options, (u, h) => (a(), r("option", {
|
|
3294
|
+
key: h,
|
|
3295
|
+
value: u
|
|
3296
|
+
}, null, 8, es))), 128))
|
|
3297
|
+
], 8, $a)) : e.$attrs.type === "checkbox" || e.$attrs.type === "radio" ? (a(), r(T, { key: 2 }, [
|
|
3298
|
+
n.onLabel && n.offLabel ? n.onLabel && n.offLabel ? (a(), r(T, { key: 1 }, [
|
|
3299
|
+
o("span", ls, [
|
|
3300
|
+
o("input", S(l.elementAttributes, {
|
|
3301
|
+
onChange: t[15] || (t[15] = (...u) => l.onChange && l.onChange(...u)),
|
|
3302
|
+
onBlur: t[16] || (t[16] = (...u) => l.onBlur && l.onBlur(...u)),
|
|
3303
|
+
checked: l.isChecked,
|
|
3304
|
+
value: n.inputValue,
|
|
3305
|
+
class: { inputClass: n.inputClass, validationStatus: e.validationStatus },
|
|
3306
|
+
id: e.htmlId,
|
|
3307
|
+
disabled: e.$attrs.disabled,
|
|
3308
|
+
"aria-invalid": e.validationStatus === "error"
|
|
3309
|
+
}), null, 16, os),
|
|
3310
|
+
o("span", as, y(n.onLabel), 1),
|
|
3311
|
+
o("span", ss, y(n.offLabel), 1)
|
|
3312
|
+
]),
|
|
3313
|
+
n.labelText ? (a(), r("span", {
|
|
3314
|
+
key: 0,
|
|
3315
|
+
class: b(["label-text", { hidden: !n.showLabel }])
|
|
3316
|
+
}, [
|
|
3317
|
+
o("span", { innerHTML: n.labelText }, null, 8, rs),
|
|
3318
|
+
e.$attrs.required ? (a(), r("sup", ds, "*")) : m("", !0)
|
|
3319
|
+
], 2)) : m("", !0)
|
|
3320
|
+
], 64)) : F(e.$slots, "default", { key: 2 }) : (a(), r(T, { key: 0 }, [
|
|
3299
3321
|
o("input", S(l.elementAttributes, {
|
|
3300
|
-
onChange: t[
|
|
3301
|
-
onBlur: t[
|
|
3322
|
+
onChange: t[12] || (t[12] = (...u) => l.onChange && l.onChange(...u)),
|
|
3323
|
+
onBlur: t[13] || (t[13] = (...u) => l.onBlur && l.onBlur(...u)),
|
|
3324
|
+
onInput: t[14] || (t[14] = (...u) => l.onInput && l.onInput(...u)),
|
|
3302
3325
|
checked: l.isChecked,
|
|
3303
3326
|
value: n.inputValue,
|
|
3304
|
-
class:
|
|
3327
|
+
class: [n.inputClass, e.validationStatus, l.toggleSwitchIconClass, { "replace-input-type": n.replaceInputType }],
|
|
3305
3328
|
id: e.htmlId,
|
|
3306
3329
|
disabled: e.$attrs.disabled,
|
|
3307
3330
|
"aria-invalid": e.validationStatus === "error"
|
|
3308
|
-
}), null, 16,
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
onInput: t[14] || (t[14] = (...u) => l.onInput && l.onInput(...u)),
|
|
3324
|
-
checked: l.isChecked,
|
|
3325
|
-
value: n.inputValue,
|
|
3326
|
-
class: [n.inputClass, e.validationStatus, l.toggleSwitchIconClass, { "replace-input-type": n.replaceInputType }],
|
|
3327
|
-
id: e.htmlId,
|
|
3328
|
-
disabled: e.$attrs.disabled,
|
|
3329
|
-
"aria-invalid": e.validationStatus === "error"
|
|
3330
|
-
}), null, 16, ts),
|
|
3331
|
-
n.labelText || e.$slots.labeltext ? (a(), r("span", {
|
|
3332
|
-
key: 0,
|
|
3333
|
-
class: b(["label-text", { hidden: !n.showLabel }])
|
|
3334
|
-
}, [
|
|
3335
|
-
o("span", null, [
|
|
3336
|
-
n.labelText ? (a(), r("span", {
|
|
3337
|
-
key: 0,
|
|
3338
|
-
innerHTML: n.labelText
|
|
3339
|
-
}, null, 8, ns)) : F(e.$slots, "labeltext", { key: 1 }),
|
|
3340
|
-
e.$attrs.required ? (a(), r("sup", is, "*")) : m("", !0)
|
|
3341
|
-
])
|
|
3342
|
-
], 2)) : m("", !0)
|
|
3343
|
-
], 64))
|
|
3331
|
+
}), null, 16, ts),
|
|
3332
|
+
n.labelText || e.$slots.labeltext ? (a(), r("span", {
|
|
3333
|
+
key: 0,
|
|
3334
|
+
class: b(["label-text", { hidden: !n.showLabel }])
|
|
3335
|
+
}, [
|
|
3336
|
+
o("span", null, [
|
|
3337
|
+
n.labelText ? (a(), r("span", {
|
|
3338
|
+
key: 0,
|
|
3339
|
+
innerHTML: n.labelText
|
|
3340
|
+
}, null, 8, ns)) : F(e.$slots, "labeltext", { key: 1 }),
|
|
3341
|
+
e.$attrs.required ? (a(), r("sup", is, "*")) : m("", !0)
|
|
3342
|
+
])
|
|
3343
|
+
], 2)) : m("", !0)
|
|
3344
|
+
], 64))
|
|
3345
|
+
], 64)) : m("", !0)
|
|
3344
3346
|
], 64)) : m("", !0),
|
|
3345
|
-
n.element === "select" ? (a(), r("select", S({ key:
|
|
3347
|
+
n.element === "select" ? (a(), r("select", S({ key: 2 }, l.elementAttributes, {
|
|
3346
3348
|
id: e.htmlId,
|
|
3347
3349
|
onBlur: t[17] || (t[17] = (...u) => l.onBlur && l.onBlur(...u)),
|
|
3348
3350
|
onChange: t[18] || (t[18] = (...u) => l.onChange && l.onChange(...u))
|
|
@@ -3362,7 +3364,7 @@ function ks(e, t, n, s, i, l) {
|
|
|
3362
3364
|
selected: u.value === n.modelValue
|
|
3363
3365
|
}, y(u.text), 9, cs))), 128))
|
|
3364
3366
|
], 16, us)) : m("", !0),
|
|
3365
|
-
n.element === "textarea" ? (a(), r("textarea", S({ key:
|
|
3367
|
+
n.element === "textarea" ? (a(), r("textarea", S({ key: 3 }, l.elementAttributes, {
|
|
3366
3368
|
id: e.htmlId,
|
|
3367
3369
|
value: n.modelValue,
|
|
3368
3370
|
maxlength: l.getMaxLength(),
|
|
@@ -20851,7 +20853,7 @@ const Dx = /* @__PURE__ */ B(Ix, [["render", Bx]]), Fx = [
|
|
|
20851
20853
|
text: "Zimbabwe",
|
|
20852
20854
|
value: "zw"
|
|
20853
20855
|
}
|
|
20854
|
-
], JC = "comand-component-library", ZC = "4.2.
|
|
20856
|
+
], JC = "comand-component-library", ZC = "4.2.85", QC = "GPL-3.0-only", XC = "CoManD-UI", $C = "module", e1 = { prepublishOnly: "npm run build-lib", dev: "vite", build: "vite build", "build-lib": "vite build && gulp", preview: "vite preview" }, t1 = ["dist", "src"], n1 = { ".": "./dist/comand-component-library.js", "./css.js": "./src/css.js", "./comand-component-library.css": "./dist/comand-component-library.css", "./variables.scss": "./src/assets/styles/variables.scss", "./export-example-data.js": "./src/assets/data/export-example-data.js", "./countries.json": "./src/assets/lists-of-data/countries.json", "./currencies.json": "./src/assets/lists-of-data/currencies.json", "./dial-codes.json": "./src/assets/lists-of-data/dial-codes.json", "./us-cities.json": "./src/assets/lists-of-data/us-cities.json" }, i1 = { "clickout-event": "^1.1.2", "comand-frontend-framework": "^4.3.21", "comand-ui-iconfonts": "^1.0.19", "core-js": "^3.20.1", prismjs: "^1.27.0", vue: "^3.5.25", "vue-router": "^4.0.12", vuex: "^4.0.2" }, l1 = { "@iconify/vue": "^4.0.0", "@vitejs/plugin-vue": "^6.0.2", "@vue/test-utils": "^2.0.0-0", axios: "^1.7.2", gulp: "^4.0.2", sass: "^1.54.9", "unplugin-vue-components": "^0.24.0", vite: "^7.2.4", "vue-jest": "^5.0.0-0" }, o1 = {
|
|
20855
20857
|
name: JC,
|
|
20856
20858
|
version: ZC,
|
|
20857
20859
|
license: QC,
|
package/package.json
CHANGED
|
@@ -62,129 +62,133 @@
|
|
|
62
62
|
</span>
|
|
63
63
|
<!-- end label-text (+ required asterisk) -->
|
|
64
64
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
<!-- begin element 'input' -->
|
|
66
|
+
<template v-if="element === 'input'">
|
|
67
|
+
<span v-if="$attrs.type !== 'checkbox' && $attrs.type !== 'radio' && $attrs.type !== 'search'"
|
|
68
|
+
class="flex-container inner-input-wrapper"><!-- container required to place inner icons correctly -->
|
|
69
|
+
<!-- begin CmdIcon (for icon inside field) -->
|
|
70
|
+
<CmdIcon v-if="fieldIconClass" class="place-inside" :iconClass="fieldIconClass" />
|
|
71
|
+
<!-- end CmdIcon (for icon inside field) -->
|
|
70
72
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
73
|
+
<!-- begin inputfield -->
|
|
74
|
+
<template v-if="element === 'input' && $attrs.type !== 'search'">
|
|
75
|
+
<input
|
|
76
|
+
:id="htmlId"
|
|
77
|
+
:class="inputClass"
|
|
78
|
+
@focus="tooltip = true"
|
|
79
|
+
@blur="onBlur"
|
|
80
|
+
@input="onInput"
|
|
81
|
+
@mouseover="datalistFocus"
|
|
82
|
+
@keyup="checkForCapsLock"
|
|
83
|
+
@change="$emit('change', $event)"
|
|
84
|
+
:autocomplete="autocomplete"
|
|
85
|
+
:list="datalist ? datalist.id : null"
|
|
86
|
+
:value="modelValue"
|
|
87
|
+
:minlength="$attrs.type === 'password' ? '8' : null"
|
|
88
|
+
:maxlength="getMaxLength()"
|
|
89
|
+
ref="input"
|
|
90
|
+
v-bind="elementAttributes"
|
|
91
|
+
/>
|
|
92
|
+
<!-- begin delete-icon -->
|
|
93
|
+
<a v-if="iconDelete?.show && !$attrs.disabled && ($attrs.type === 'text' || $attrs.type === 'email' || $attrs.type === 'phone')"
|
|
94
|
+
class="deleteicon"
|
|
95
|
+
href="#"
|
|
96
|
+
@click.prevent="deleteInput"
|
|
97
|
+
:title="iconDelete?.tooltip">
|
|
98
|
+
<!-- begin CmdIcon -->
|
|
99
|
+
<CmdIcon :iconClass="iconDelete?.iconClass" :type="iconDelete?.iconType"/>
|
|
100
|
+
<!-- end CmdIcon -->
|
|
101
|
+
</a>
|
|
102
|
+
<!-- end delete-icon -->
|
|
103
|
+
</template>
|
|
104
|
+
<!-- end inputfield -->
|
|
105
|
+
|
|
106
|
+
<!-- begin show-password-icon -->
|
|
107
|
+
<a v-if="$attrs.type === 'password'"
|
|
108
|
+
href="#"
|
|
109
|
+
class="place-inside"
|
|
110
|
+
@mousedown.prevent="showPassword"
|
|
111
|
+
@mouseup.prevent="hidePassword"
|
|
112
|
+
@mouseleave.prevent="hidePassword"
|
|
113
|
+
@click.prevent
|
|
114
|
+
:title="iconPasswordVisible.tooltip"
|
|
115
|
+
>
|
|
116
|
+
<!-- begin CmdIcon -->
|
|
117
|
+
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
98
118
|
<!-- end CmdIcon -->
|
|
99
119
|
</a>
|
|
100
|
-
<!-- end
|
|
101
|
-
</
|
|
102
|
-
<!-- end inputfield -->
|
|
103
|
-
|
|
104
|
-
<!-- begin show-password-icon -->
|
|
105
|
-
<a v-if="$attrs.type === 'password'"
|
|
106
|
-
href="#"
|
|
107
|
-
class="place-inside"
|
|
108
|
-
@mousedown.prevent="showPassword"
|
|
109
|
-
@mouseup.prevent="hidePassword"
|
|
110
|
-
@mouseleave.prevent="hidePassword"
|
|
111
|
-
@click.prevent
|
|
112
|
-
:title="iconPasswordVisible.tooltip"
|
|
113
|
-
>
|
|
114
|
-
<!-- begin CmdIcon -->
|
|
115
|
-
<CmdIcon :iconClass="iconPasswordVisible.iconClass"/>
|
|
116
|
-
<!-- end CmdIcon -->
|
|
117
|
-
</a>
|
|
118
|
-
<!-- end show-password-icon -->
|
|
119
|
-
</span>
|
|
120
|
-
|
|
121
|
-
<!-- begin datalist -->
|
|
122
|
-
<template v-if="datalist && datalist.options.length">
|
|
123
|
-
<datalist :id="datalist.id">
|
|
124
|
-
<option v-for="(option, index) in datalist.options" :key="index" :value="option"></option>
|
|
125
|
-
</datalist>
|
|
126
|
-
</template>
|
|
127
|
-
<!-- end datalist -->
|
|
128
|
-
|
|
129
|
-
<!-- begin checkbox and radiobutton -->
|
|
130
|
-
<template v-else-if="element === 'input' && ($attrs.type === 'checkbox' || $attrs.type === 'radio')">
|
|
131
|
-
<!-- begin default checkbox/radiobutton -->
|
|
132
|
-
<template v-if="!(onLabel && offLabel)">
|
|
133
|
-
<input
|
|
134
|
-
v-bind="elementAttributes"
|
|
135
|
-
@change="onChange"
|
|
136
|
-
@blur="onBlur"
|
|
137
|
-
@input="onInput"
|
|
138
|
-
:checked="isChecked"
|
|
139
|
-
:value="inputValue"
|
|
140
|
-
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
|
141
|
-
:id="htmlId"
|
|
142
|
-
:disabled="$attrs.disabled"
|
|
143
|
-
:aria-invalid="validationStatus === 'error'"
|
|
144
|
-
/>
|
|
145
|
-
<span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
|
|
146
|
-
<span>
|
|
147
|
-
<!-- begin labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
148
|
-
<span v-if="labelText" v-html="labelText"></span>
|
|
149
|
-
<!-- end labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
150
|
-
|
|
151
|
-
<!-- begin slot 'labeltext' -->
|
|
152
|
-
<slot v-else name="labeltext"/>
|
|
153
|
-
<!-- end slot 'labeltext' -->
|
|
120
|
+
<!-- end show-password-icon -->
|
|
121
|
+
</span>
|
|
154
122
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
123
|
+
<!-- begin datalist -->
|
|
124
|
+
<template v-if="datalist && datalist.options.length">
|
|
125
|
+
<datalist :id="datalist.id">
|
|
126
|
+
<option v-for="(option, index) in datalist.options" :key="index" :value="option"></option>
|
|
127
|
+
</datalist>
|
|
158
128
|
</template>
|
|
159
|
-
<!-- end
|
|
160
|
-
|
|
161
|
-
<!-- begin
|
|
162
|
-
<template v-else-if="
|
|
163
|
-
|
|
129
|
+
<!-- end datalist -->
|
|
130
|
+
|
|
131
|
+
<!-- begin checkbox and radiobutton -->
|
|
132
|
+
<template v-else-if="$attrs.type === 'checkbox' || $attrs.type === 'radio'">
|
|
133
|
+
<!-- begin default checkbox/radiobutton -->
|
|
134
|
+
<template v-if="!(onLabel && offLabel)">
|
|
164
135
|
<input
|
|
165
136
|
v-bind="elementAttributes"
|
|
166
137
|
@change="onChange"
|
|
167
138
|
@blur="onBlur"
|
|
139
|
+
@input="onInput"
|
|
168
140
|
:checked="isChecked"
|
|
169
141
|
:value="inputValue"
|
|
170
|
-
:class="
|
|
142
|
+
:class="[inputClass, validationStatus, toggleSwitchIconClass, { 'replace-input-type': replaceInputType}]"
|
|
171
143
|
:id="htmlId"
|
|
172
144
|
:disabled="$attrs.disabled"
|
|
173
145
|
:aria-invalid="validationStatus === 'error'"
|
|
174
146
|
/>
|
|
175
|
-
<span class="label-text
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
147
|
+
<span v-if="labelText || $slots.labeltext" :class="['label-text', { hidden: !showLabel }]">
|
|
148
|
+
<span>
|
|
149
|
+
<!-- begin labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
150
|
+
<span v-if="labelText" v-html="labelText"></span>
|
|
151
|
+
<!-- end labelText for checkbox/radio/toggle-switch (without switch-label) -->
|
|
152
|
+
|
|
153
|
+
<!-- begin slot 'labeltext' -->
|
|
154
|
+
<slot v-else name="labeltext"/>
|
|
155
|
+
<!-- end slot 'labeltext' -->
|
|
156
|
+
|
|
157
|
+
<sup v-if="$attrs.required">*</sup>
|
|
158
|
+
</span>
|
|
159
|
+
</span>
|
|
160
|
+
</template>
|
|
161
|
+
<!-- end default checkbox/radiobutton -->
|
|
162
|
+
|
|
163
|
+
<!-- begin labels for toggle-switch with switch-label -->
|
|
164
|
+
<template v-else-if="onLabel && offLabel">
|
|
165
|
+
<span class="switch-label-wrapper">
|
|
166
|
+
<input
|
|
167
|
+
v-bind="elementAttributes"
|
|
168
|
+
@change="onChange"
|
|
169
|
+
@blur="onBlur"
|
|
170
|
+
:checked="isChecked"
|
|
171
|
+
:value="inputValue"
|
|
172
|
+
:class="{inputClass, validationStatus}"
|
|
173
|
+
:id="htmlId"
|
|
174
|
+
:disabled="$attrs.disabled"
|
|
175
|
+
:aria-invalid="validationStatus === 'error'"
|
|
176
|
+
/>
|
|
177
|
+
<span class="label-text">{{ onLabel }}</span>
|
|
178
|
+
<span class="label-text">{{ offLabel }}</span>
|
|
179
|
+
</span>
|
|
180
|
+
<!-- begin labelText for checkbox/radio/toggle-switch (with switch-label) -->
|
|
181
|
+
<span v-if="labelText" :class="['label-text', {hidden: !showLabel}]">
|
|
182
|
+
<span v-html="labelText"></span><sup v-if="$attrs.required">*</sup>
|
|
183
|
+
</span>
|
|
184
|
+
<!-- end labelText for checkbox/radio/toggle-switch (with switch-label) -->
|
|
185
|
+
</template>
|
|
186
|
+
<slot v-else></slot>
|
|
187
|
+
<!-- end labels for toggle-switch with switch-label -->
|
|
183
188
|
</template>
|
|
184
|
-
|
|
185
|
-
<!-- end labels for toggle-switch with switch-label -->
|
|
189
|
+
<!-- end checkbox and radiobutton -->
|
|
186
190
|
</template>
|
|
187
|
-
<!-- end
|
|
191
|
+
<!-- end element 'input' -->
|
|
188
192
|
|
|
189
193
|
<!-- begin selectbox -->
|
|
190
194
|
<select v-if="element === 'select'"
|