@atscript/vue-aooth 0.1.86 → 0.1.88
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/as-sso-providers-BWPSghtC.cjs +280 -0
- package/dist/as-sso-providers-CscXrbEt.mjs +275 -0
- package/dist/as-sso-providers.cjs +2 -0
- package/dist/as-sso-providers.d.cts +39 -0
- package/dist/as-sso-providers.d.mts +39 -0
- package/dist/as-sso-providers.mjs +2 -0
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.mts +2 -1
- package/dist/index.mjs +2 -1
- package/package.json +14 -9
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
let vue = require("vue");
|
|
2
|
+
let _atscript_vue_form = require("@atscript/vue-form");
|
|
3
|
+
//#region src/components/as-sso-providers.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
const _hoisted_1 = { class: "as-sso-providers-stack" };
|
|
5
|
+
const _hoisted_2 = {
|
|
6
|
+
key: 0,
|
|
7
|
+
class: "as-sso-providers-primary"
|
|
8
|
+
};
|
|
9
|
+
const _hoisted_3 = ["disabled", "onClick"];
|
|
10
|
+
const _hoisted_4 = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "as-sso-providers-divider"
|
|
13
|
+
};
|
|
14
|
+
const _hoisted_5 = {
|
|
15
|
+
key: 2,
|
|
16
|
+
class: "as-sso-providers-secondary"
|
|
17
|
+
};
|
|
18
|
+
const _hoisted_6 = ["disabled", "onClick"];
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/as-sso-providers.vue
|
|
21
|
+
var as_sso_providers_default = /* @__PURE__ */ (0, vue.defineComponent)({
|
|
22
|
+
__name: "as-sso-providers",
|
|
23
|
+
props: {
|
|
24
|
+
onBlur: {
|
|
25
|
+
type: Function,
|
|
26
|
+
required: true
|
|
27
|
+
},
|
|
28
|
+
error: {
|
|
29
|
+
type: String,
|
|
30
|
+
required: false
|
|
31
|
+
},
|
|
32
|
+
model: {
|
|
33
|
+
type: Object,
|
|
34
|
+
required: true
|
|
35
|
+
},
|
|
36
|
+
value: {
|
|
37
|
+
type: null,
|
|
38
|
+
required: false
|
|
39
|
+
},
|
|
40
|
+
label: {
|
|
41
|
+
type: String,
|
|
42
|
+
required: false
|
|
43
|
+
},
|
|
44
|
+
description: {
|
|
45
|
+
type: String,
|
|
46
|
+
required: false
|
|
47
|
+
},
|
|
48
|
+
hint: {
|
|
49
|
+
type: String,
|
|
50
|
+
required: false
|
|
51
|
+
},
|
|
52
|
+
placeholder: {
|
|
53
|
+
type: String,
|
|
54
|
+
required: false
|
|
55
|
+
},
|
|
56
|
+
prefixIcon: {
|
|
57
|
+
type: String,
|
|
58
|
+
required: false
|
|
59
|
+
},
|
|
60
|
+
suffixIcon: {
|
|
61
|
+
type: String,
|
|
62
|
+
required: false
|
|
63
|
+
},
|
|
64
|
+
class: {
|
|
65
|
+
type: [Object, String],
|
|
66
|
+
required: false
|
|
67
|
+
},
|
|
68
|
+
style: {
|
|
69
|
+
type: [Object, String],
|
|
70
|
+
required: false
|
|
71
|
+
},
|
|
72
|
+
optional: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
required: false,
|
|
75
|
+
skipCheck: true
|
|
76
|
+
},
|
|
77
|
+
onToggleOptional: {
|
|
78
|
+
type: Function,
|
|
79
|
+
required: false
|
|
80
|
+
},
|
|
81
|
+
required: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
required: false,
|
|
84
|
+
skipCheck: true
|
|
85
|
+
},
|
|
86
|
+
readonly: {
|
|
87
|
+
type: Boolean,
|
|
88
|
+
required: false,
|
|
89
|
+
skipCheck: true
|
|
90
|
+
},
|
|
91
|
+
type: {
|
|
92
|
+
type: String,
|
|
93
|
+
required: true
|
|
94
|
+
},
|
|
95
|
+
formAction: {
|
|
96
|
+
type: Object,
|
|
97
|
+
required: false
|
|
98
|
+
},
|
|
99
|
+
name: {
|
|
100
|
+
type: String,
|
|
101
|
+
required: false
|
|
102
|
+
},
|
|
103
|
+
field: {
|
|
104
|
+
type: Object,
|
|
105
|
+
required: false
|
|
106
|
+
},
|
|
107
|
+
options: {
|
|
108
|
+
type: Array,
|
|
109
|
+
required: false
|
|
110
|
+
},
|
|
111
|
+
maxLength: {
|
|
112
|
+
type: Number,
|
|
113
|
+
required: false
|
|
114
|
+
},
|
|
115
|
+
autocomplete: {
|
|
116
|
+
type: String,
|
|
117
|
+
required: false
|
|
118
|
+
},
|
|
119
|
+
title: {
|
|
120
|
+
type: String,
|
|
121
|
+
required: false
|
|
122
|
+
},
|
|
123
|
+
level: {
|
|
124
|
+
type: Number,
|
|
125
|
+
required: false
|
|
126
|
+
},
|
|
127
|
+
onRemove: {
|
|
128
|
+
type: Function,
|
|
129
|
+
required: false
|
|
130
|
+
},
|
|
131
|
+
canRemove: {
|
|
132
|
+
type: Boolean,
|
|
133
|
+
required: false
|
|
134
|
+
},
|
|
135
|
+
removeLabel: {
|
|
136
|
+
type: String,
|
|
137
|
+
required: false
|
|
138
|
+
},
|
|
139
|
+
arrayIndex: {
|
|
140
|
+
type: Number,
|
|
141
|
+
required: false
|
|
142
|
+
},
|
|
143
|
+
path: {
|
|
144
|
+
type: String,
|
|
145
|
+
required: true
|
|
146
|
+
},
|
|
147
|
+
valueHelp: {
|
|
148
|
+
type: Object,
|
|
149
|
+
required: false
|
|
150
|
+
},
|
|
151
|
+
singularLabel: {
|
|
152
|
+
type: String,
|
|
153
|
+
required: false
|
|
154
|
+
},
|
|
155
|
+
inputId: {
|
|
156
|
+
type: String,
|
|
157
|
+
required: true
|
|
158
|
+
},
|
|
159
|
+
errorId: {
|
|
160
|
+
type: String,
|
|
161
|
+
required: true
|
|
162
|
+
},
|
|
163
|
+
descId: {
|
|
164
|
+
type: String,
|
|
165
|
+
required: true
|
|
166
|
+
},
|
|
167
|
+
ariaDescribedBy: {
|
|
168
|
+
type: String,
|
|
169
|
+
required: false
|
|
170
|
+
},
|
|
171
|
+
currencyCode: {
|
|
172
|
+
type: String,
|
|
173
|
+
required: false
|
|
174
|
+
},
|
|
175
|
+
unitCode: {
|
|
176
|
+
type: String,
|
|
177
|
+
required: false
|
|
178
|
+
},
|
|
179
|
+
precisionScale: {
|
|
180
|
+
type: Number,
|
|
181
|
+
required: false
|
|
182
|
+
},
|
|
183
|
+
prefix: {
|
|
184
|
+
type: String,
|
|
185
|
+
required: false
|
|
186
|
+
},
|
|
187
|
+
suffix: {
|
|
188
|
+
type: String,
|
|
189
|
+
required: false
|
|
190
|
+
},
|
|
191
|
+
scale: {
|
|
192
|
+
type: Number,
|
|
193
|
+
required: false
|
|
194
|
+
},
|
|
195
|
+
hasAdornment: {
|
|
196
|
+
type: Boolean,
|
|
197
|
+
required: false
|
|
198
|
+
},
|
|
199
|
+
disabled: {
|
|
200
|
+
type: Boolean,
|
|
201
|
+
required: false
|
|
202
|
+
},
|
|
203
|
+
hidden: {
|
|
204
|
+
type: Boolean,
|
|
205
|
+
required: false
|
|
206
|
+
},
|
|
207
|
+
providers: {
|
|
208
|
+
type: Array,
|
|
209
|
+
required: false
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
emits: ["action"],
|
|
213
|
+
setup(__props, { emit: __emit }) {
|
|
214
|
+
const props = __props;
|
|
215
|
+
const emit = __emit;
|
|
216
|
+
const groups = (0, vue.computed)(() => {
|
|
217
|
+
const primary = [];
|
|
218
|
+
const secondary = [];
|
|
219
|
+
for (const p of props.providers ?? []) (p.secondary === true ? secondary : primary).push(p);
|
|
220
|
+
return {
|
|
221
|
+
primary,
|
|
222
|
+
secondary
|
|
223
|
+
};
|
|
224
|
+
});
|
|
225
|
+
const hasBoth = (0, vue.computed)(() => groups.value.primary.length > 0 && groups.value.secondary.length > 0);
|
|
226
|
+
function select(provider) {
|
|
227
|
+
if (props.disabled) return;
|
|
228
|
+
props.model.value = provider.id;
|
|
229
|
+
if (props.formAction) emit("action", props.formAction.id);
|
|
230
|
+
}
|
|
231
|
+
return (_ctx, _cache) => {
|
|
232
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createCommentVNode)("\n `:chromeless=\"true\"` suppresses the auto-label / description chrome\n AsFieldShell would otherwise draw. The SSO field carries\n `@meta.label 'Or sign in with'`, but the picker is self-describing\n (the \"or\" divider IS the visual separator) so a header would be\n redundant — mirrors as-password-rules.vue's chromeless choice.\n\n `:form-action=\"undefined\"` suppresses the shell's footer action link.\n The field carries `@ui.form.action 'sso', 'Continue'` so `formAction`\n is truthy, and AsFieldShell would otherwise draw an `as-field-action-link`\n \"Continue\" button in its footer (chromeless does NOT suppress that footer).\n Here the provider buttons ARE the action — clicking one selects AND fires\n the action in a single click — so a separate footer \"Continue\" is a\n redundant control that would fire with NO provider chosen. `select()` still\n reads `props.formAction` internally to emit the action; only the shell's own\n footer link is suppressed. Overrides `v-bind=\"$props\".formAction` — the\n explicit binding wins via `mergeProps` semantics (same technique as\n as-consent-array's `:error=\"undefined\"`).\n\n The whole tree is gated on a non-empty provider list — same\n hide-when-empty contract as AsConsentArray; a persistent empty shell\n reads as broken UI (and guards the transient first render before\n `@ui.form.fn.attr` resolves).\n "), __props.providers && __props.providers.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_atscript_vue_form.AsFieldShell), (0, vue.mergeProps)({ key: 0 }, _ctx.$props, {
|
|
233
|
+
chromeless: true,
|
|
234
|
+
"form-action": void 0,
|
|
235
|
+
"field-class": "as-sso-providers"
|
|
236
|
+
}), {
|
|
237
|
+
default: (0, vue.withCtx)(() => [(0, vue.createCommentVNode)("\n Layout: providers default to the prominent main stack (full-width\n buttons); only those flagged `secondary: true` drop below the \"or\"\n divider as compact chips.\n\n Wrap the three groups in a SINGLE `as-sso-providers-stack` child so the\n shell's `as-field-input-row` (a flex ROW) holds one column owner;\n otherwise the main stack, divider, and secondary group would lay out\n side-by-side in the row. The stack owns the vertical layout (mirrors\n as-consent-array's single `as-consent-array-group` child).\n "), (0, vue.createElementVNode)("div", _hoisted_1, [
|
|
238
|
+
(0, vue.createCommentVNode)(" Main stack: full-width buttons, one per default (non-secondary) provider. "),
|
|
239
|
+
groups.value.primary.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(groups.value.primary, (p) => {
|
|
240
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
|
241
|
+
key: p.id,
|
|
242
|
+
type: "button",
|
|
243
|
+
class: "as-sso-provider-btn",
|
|
244
|
+
disabled: __props.disabled,
|
|
245
|
+
onClick: ($event) => select(p)
|
|
246
|
+
}, [p.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
|
|
247
|
+
key: 0,
|
|
248
|
+
class: (0, vue.normalizeClass)([p.icon, "as-sso-provider-icon"]),
|
|
249
|
+
"aria-hidden": "true"
|
|
250
|
+
}, null, 2)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(p.text), 1)], 8, _hoisted_3);
|
|
251
|
+
}), 128))])) : (0, vue.createCommentVNode)("v-if", true),
|
|
252
|
+
(0, vue.createCommentVNode)(" \"or\" divider — only between two populated groups. "),
|
|
253
|
+
hasBoth.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("span", null, "or", -1)])])) : (0, vue.createCommentVNode)("v-if", true),
|
|
254
|
+
(0, vue.createCommentVNode)(" Secondary group: compact chips for `secondary: true` providers. "),
|
|
255
|
+
groups.value.secondary.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(groups.value.secondary, (p) => {
|
|
256
|
+
return (0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
|
|
257
|
+
key: p.id,
|
|
258
|
+
type: "button",
|
|
259
|
+
class: "as-sso-provider-chip",
|
|
260
|
+
disabled: __props.disabled,
|
|
261
|
+
onClick: ($event) => select(p)
|
|
262
|
+
}, [p.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
|
|
263
|
+
key: 0,
|
|
264
|
+
class: (0, vue.normalizeClass)([p.icon, "as-sso-provider-icon"]),
|
|
265
|
+
"aria-hidden": "true"
|
|
266
|
+
}, null, 2)) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(p.text), 1)], 8, _hoisted_6);
|
|
267
|
+
}), 128))])) : (0, vue.createCommentVNode)("v-if", true)
|
|
268
|
+
])]),
|
|
269
|
+
_: 1
|
|
270
|
+
}, 16)) : (0, vue.createCommentVNode)("v-if", true)], 2112);
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
//#endregion
|
|
275
|
+
Object.defineProperty(exports, "as_sso_providers_default", {
|
|
276
|
+
enumerable: true,
|
|
277
|
+
get: function() {
|
|
278
|
+
return as_sso_providers_default;
|
|
279
|
+
}
|
|
280
|
+
});
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, renderList, toDisplayString, unref, withCtx } from "vue";
|
|
2
|
+
import { AsFieldShell } from "@atscript/vue-form";
|
|
3
|
+
//#region src/components/as-sso-providers.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
const _hoisted_1 = { class: "as-sso-providers-stack" };
|
|
5
|
+
const _hoisted_2 = {
|
|
6
|
+
key: 0,
|
|
7
|
+
class: "as-sso-providers-primary"
|
|
8
|
+
};
|
|
9
|
+
const _hoisted_3 = ["disabled", "onClick"];
|
|
10
|
+
const _hoisted_4 = {
|
|
11
|
+
key: 1,
|
|
12
|
+
class: "as-sso-providers-divider"
|
|
13
|
+
};
|
|
14
|
+
const _hoisted_5 = {
|
|
15
|
+
key: 2,
|
|
16
|
+
class: "as-sso-providers-secondary"
|
|
17
|
+
};
|
|
18
|
+
const _hoisted_6 = ["disabled", "onClick"];
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/as-sso-providers.vue
|
|
21
|
+
var as_sso_providers_default = /* @__PURE__ */ defineComponent({
|
|
22
|
+
__name: "as-sso-providers",
|
|
23
|
+
props: {
|
|
24
|
+
onBlur: {
|
|
25
|
+
type: Function,
|
|
26
|
+
required: true
|
|
27
|
+
},
|
|
28
|
+
error: {
|
|
29
|
+
type: String,
|
|
30
|
+
required: false
|
|
31
|
+
},
|
|
32
|
+
model: {
|
|
33
|
+
type: Object,
|
|
34
|
+
required: true
|
|
35
|
+
},
|
|
36
|
+
value: {
|
|
37
|
+
type: null,
|
|
38
|
+
required: false
|
|
39
|
+
},
|
|
40
|
+
label: {
|
|
41
|
+
type: String,
|
|
42
|
+
required: false
|
|
43
|
+
},
|
|
44
|
+
description: {
|
|
45
|
+
type: String,
|
|
46
|
+
required: false
|
|
47
|
+
},
|
|
48
|
+
hint: {
|
|
49
|
+
type: String,
|
|
50
|
+
required: false
|
|
51
|
+
},
|
|
52
|
+
placeholder: {
|
|
53
|
+
type: String,
|
|
54
|
+
required: false
|
|
55
|
+
},
|
|
56
|
+
prefixIcon: {
|
|
57
|
+
type: String,
|
|
58
|
+
required: false
|
|
59
|
+
},
|
|
60
|
+
suffixIcon: {
|
|
61
|
+
type: String,
|
|
62
|
+
required: false
|
|
63
|
+
},
|
|
64
|
+
class: {
|
|
65
|
+
type: [Object, String],
|
|
66
|
+
required: false
|
|
67
|
+
},
|
|
68
|
+
style: {
|
|
69
|
+
type: [Object, String],
|
|
70
|
+
required: false
|
|
71
|
+
},
|
|
72
|
+
optional: {
|
|
73
|
+
type: Boolean,
|
|
74
|
+
required: false,
|
|
75
|
+
skipCheck: true
|
|
76
|
+
},
|
|
77
|
+
onToggleOptional: {
|
|
78
|
+
type: Function,
|
|
79
|
+
required: false
|
|
80
|
+
},
|
|
81
|
+
required: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
required: false,
|
|
84
|
+
skipCheck: true
|
|
85
|
+
},
|
|
86
|
+
readonly: {
|
|
87
|
+
type: Boolean,
|
|
88
|
+
required: false,
|
|
89
|
+
skipCheck: true
|
|
90
|
+
},
|
|
91
|
+
type: {
|
|
92
|
+
type: String,
|
|
93
|
+
required: true
|
|
94
|
+
},
|
|
95
|
+
formAction: {
|
|
96
|
+
type: Object,
|
|
97
|
+
required: false
|
|
98
|
+
},
|
|
99
|
+
name: {
|
|
100
|
+
type: String,
|
|
101
|
+
required: false
|
|
102
|
+
},
|
|
103
|
+
field: {
|
|
104
|
+
type: Object,
|
|
105
|
+
required: false
|
|
106
|
+
},
|
|
107
|
+
options: {
|
|
108
|
+
type: Array,
|
|
109
|
+
required: false
|
|
110
|
+
},
|
|
111
|
+
maxLength: {
|
|
112
|
+
type: Number,
|
|
113
|
+
required: false
|
|
114
|
+
},
|
|
115
|
+
autocomplete: {
|
|
116
|
+
type: String,
|
|
117
|
+
required: false
|
|
118
|
+
},
|
|
119
|
+
title: {
|
|
120
|
+
type: String,
|
|
121
|
+
required: false
|
|
122
|
+
},
|
|
123
|
+
level: {
|
|
124
|
+
type: Number,
|
|
125
|
+
required: false
|
|
126
|
+
},
|
|
127
|
+
onRemove: {
|
|
128
|
+
type: Function,
|
|
129
|
+
required: false
|
|
130
|
+
},
|
|
131
|
+
canRemove: {
|
|
132
|
+
type: Boolean,
|
|
133
|
+
required: false
|
|
134
|
+
},
|
|
135
|
+
removeLabel: {
|
|
136
|
+
type: String,
|
|
137
|
+
required: false
|
|
138
|
+
},
|
|
139
|
+
arrayIndex: {
|
|
140
|
+
type: Number,
|
|
141
|
+
required: false
|
|
142
|
+
},
|
|
143
|
+
path: {
|
|
144
|
+
type: String,
|
|
145
|
+
required: true
|
|
146
|
+
},
|
|
147
|
+
valueHelp: {
|
|
148
|
+
type: Object,
|
|
149
|
+
required: false
|
|
150
|
+
},
|
|
151
|
+
singularLabel: {
|
|
152
|
+
type: String,
|
|
153
|
+
required: false
|
|
154
|
+
},
|
|
155
|
+
inputId: {
|
|
156
|
+
type: String,
|
|
157
|
+
required: true
|
|
158
|
+
},
|
|
159
|
+
errorId: {
|
|
160
|
+
type: String,
|
|
161
|
+
required: true
|
|
162
|
+
},
|
|
163
|
+
descId: {
|
|
164
|
+
type: String,
|
|
165
|
+
required: true
|
|
166
|
+
},
|
|
167
|
+
ariaDescribedBy: {
|
|
168
|
+
type: String,
|
|
169
|
+
required: false
|
|
170
|
+
},
|
|
171
|
+
currencyCode: {
|
|
172
|
+
type: String,
|
|
173
|
+
required: false
|
|
174
|
+
},
|
|
175
|
+
unitCode: {
|
|
176
|
+
type: String,
|
|
177
|
+
required: false
|
|
178
|
+
},
|
|
179
|
+
precisionScale: {
|
|
180
|
+
type: Number,
|
|
181
|
+
required: false
|
|
182
|
+
},
|
|
183
|
+
prefix: {
|
|
184
|
+
type: String,
|
|
185
|
+
required: false
|
|
186
|
+
},
|
|
187
|
+
suffix: {
|
|
188
|
+
type: String,
|
|
189
|
+
required: false
|
|
190
|
+
},
|
|
191
|
+
scale: {
|
|
192
|
+
type: Number,
|
|
193
|
+
required: false
|
|
194
|
+
},
|
|
195
|
+
hasAdornment: {
|
|
196
|
+
type: Boolean,
|
|
197
|
+
required: false
|
|
198
|
+
},
|
|
199
|
+
disabled: {
|
|
200
|
+
type: Boolean,
|
|
201
|
+
required: false
|
|
202
|
+
},
|
|
203
|
+
hidden: {
|
|
204
|
+
type: Boolean,
|
|
205
|
+
required: false
|
|
206
|
+
},
|
|
207
|
+
providers: {
|
|
208
|
+
type: Array,
|
|
209
|
+
required: false
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
emits: ["action"],
|
|
213
|
+
setup(__props, { emit: __emit }) {
|
|
214
|
+
const props = __props;
|
|
215
|
+
const emit = __emit;
|
|
216
|
+
const groups = computed(() => {
|
|
217
|
+
const primary = [];
|
|
218
|
+
const secondary = [];
|
|
219
|
+
for (const p of props.providers ?? []) (p.secondary === true ? secondary : primary).push(p);
|
|
220
|
+
return {
|
|
221
|
+
primary,
|
|
222
|
+
secondary
|
|
223
|
+
};
|
|
224
|
+
});
|
|
225
|
+
const hasBoth = computed(() => groups.value.primary.length > 0 && groups.value.secondary.length > 0);
|
|
226
|
+
function select(provider) {
|
|
227
|
+
if (props.disabled) return;
|
|
228
|
+
props.model.value = provider.id;
|
|
229
|
+
if (props.formAction) emit("action", props.formAction.id);
|
|
230
|
+
}
|
|
231
|
+
return (_ctx, _cache) => {
|
|
232
|
+
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode("\n `:chromeless=\"true\"` suppresses the auto-label / description chrome\n AsFieldShell would otherwise draw. The SSO field carries\n `@meta.label 'Or sign in with'`, but the picker is self-describing\n (the \"or\" divider IS the visual separator) so a header would be\n redundant — mirrors as-password-rules.vue's chromeless choice.\n\n `:form-action=\"undefined\"` suppresses the shell's footer action link.\n The field carries `@ui.form.action 'sso', 'Continue'` so `formAction`\n is truthy, and AsFieldShell would otherwise draw an `as-field-action-link`\n \"Continue\" button in its footer (chromeless does NOT suppress that footer).\n Here the provider buttons ARE the action — clicking one selects AND fires\n the action in a single click — so a separate footer \"Continue\" is a\n redundant control that would fire with NO provider chosen. `select()` still\n reads `props.formAction` internally to emit the action; only the shell's own\n footer link is suppressed. Overrides `v-bind=\"$props\".formAction` — the\n explicit binding wins via `mergeProps` semantics (same technique as\n as-consent-array's `:error=\"undefined\"`).\n\n The whole tree is gated on a non-empty provider list — same\n hide-when-empty contract as AsConsentArray; a persistent empty shell\n reads as broken UI (and guards the transient first render before\n `@ui.form.fn.attr` resolves).\n "), __props.providers && __props.providers.length > 0 ? (openBlock(), createBlock(unref(AsFieldShell), mergeProps({ key: 0 }, _ctx.$props, {
|
|
233
|
+
chromeless: true,
|
|
234
|
+
"form-action": void 0,
|
|
235
|
+
"field-class": "as-sso-providers"
|
|
236
|
+
}), {
|
|
237
|
+
default: withCtx(() => [createCommentVNode("\n Layout: providers default to the prominent main stack (full-width\n buttons); only those flagged `secondary: true` drop below the \"or\"\n divider as compact chips.\n\n Wrap the three groups in a SINGLE `as-sso-providers-stack` child so the\n shell's `as-field-input-row` (a flex ROW) holds one column owner;\n otherwise the main stack, divider, and secondary group would lay out\n side-by-side in the row. The stack owns the vertical layout (mirrors\n as-consent-array's single `as-consent-array-group` child).\n "), createElementVNode("div", _hoisted_1, [
|
|
238
|
+
createCommentVNode(" Main stack: full-width buttons, one per default (non-secondary) provider. "),
|
|
239
|
+
groups.value.primary.length ? (openBlock(), createElementBlock("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value.primary, (p) => {
|
|
240
|
+
return openBlock(), createElementBlock("button", {
|
|
241
|
+
key: p.id,
|
|
242
|
+
type: "button",
|
|
243
|
+
class: "as-sso-provider-btn",
|
|
244
|
+
disabled: __props.disabled,
|
|
245
|
+
onClick: ($event) => select(p)
|
|
246
|
+
}, [p.icon ? (openBlock(), createElementBlock("span", {
|
|
247
|
+
key: 0,
|
|
248
|
+
class: normalizeClass([p.icon, "as-sso-provider-icon"]),
|
|
249
|
+
"aria-hidden": "true"
|
|
250
|
+
}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(p.text), 1)], 8, _hoisted_3);
|
|
251
|
+
}), 128))])) : createCommentVNode("v-if", true),
|
|
252
|
+
createCommentVNode(" \"or\" divider — only between two populated groups. "),
|
|
253
|
+
hasBoth.value ? (openBlock(), createElementBlock("div", _hoisted_4, [..._cache[0] || (_cache[0] = [createElementVNode("span", null, "or", -1)])])) : createCommentVNode("v-if", true),
|
|
254
|
+
createCommentVNode(" Secondary group: compact chips for `secondary: true` providers. "),
|
|
255
|
+
groups.value.secondary.length ? (openBlock(), createElementBlock("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(groups.value.secondary, (p) => {
|
|
256
|
+
return openBlock(), createElementBlock("button", {
|
|
257
|
+
key: p.id,
|
|
258
|
+
type: "button",
|
|
259
|
+
class: "as-sso-provider-chip",
|
|
260
|
+
disabled: __props.disabled,
|
|
261
|
+
onClick: ($event) => select(p)
|
|
262
|
+
}, [p.icon ? (openBlock(), createElementBlock("span", {
|
|
263
|
+
key: 0,
|
|
264
|
+
class: normalizeClass([p.icon, "as-sso-provider-icon"]),
|
|
265
|
+
"aria-hidden": "true"
|
|
266
|
+
}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(p.text), 1)], 8, _hoisted_6);
|
|
267
|
+
}), 128))])) : createCommentVNode("v-if", true)
|
|
268
|
+
])]),
|
|
269
|
+
_: 1
|
|
270
|
+
}, 16)) : createCommentVNode("v-if", true)], 2112);
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
//#endregion
|
|
275
|
+
export { as_sso_providers_default as t };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as vue from "vue";
|
|
2
|
+
import { TAsComponentProps } from "@atscript/vue-form";
|
|
3
|
+
|
|
4
|
+
//#region src/components/as-sso-providers.vue.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Single SSO provider descriptor — fed via `@ui.form.attr` /
|
|
7
|
+
* `@ui.form.fn.attr` on the consumer's `.as` schema (the aooth backend
|
|
8
|
+
* supplies the resolved list at runtime).
|
|
9
|
+
*
|
|
10
|
+
* - `id` — committed to the bound model (`model.value = id`) on click and
|
|
11
|
+
* carried by the fired form action; identifies which provider the
|
|
12
|
+
* workflow should redirect to.
|
|
13
|
+
* - `text` — rendered VERBATIM. The backend owns the full display string
|
|
14
|
+
* (e.g. "Continue with Google" for a main-stack button, "Discord" for a
|
|
15
|
+
* secondary chip). We never compose a "Continue with {name}" prefix.
|
|
16
|
+
* - `icon` — optional CSS class painting the brand glyph (e.g.
|
|
17
|
+
* `i-logos-google-icon`). Applied as-is; the consumer owns the safelist /
|
|
18
|
+
* preset coverage, same contract as `prefixIcon`.
|
|
19
|
+
* - `secondary` — `true` ⇒ renders as a compact chip below the "or" divider;
|
|
20
|
+
* omitted/false ⇒ renders as a full-width button in the main stack (the
|
|
21
|
+
* default).
|
|
22
|
+
*/
|
|
23
|
+
interface AsSsoProvider {
|
|
24
|
+
id: string;
|
|
25
|
+
text: string;
|
|
26
|
+
icon?: string;
|
|
27
|
+
secondary?: boolean;
|
|
28
|
+
}
|
|
29
|
+
type __VLS_Props = TAsComponentProps<string | undefined> & {
|
|
30
|
+
providers?: AsSsoProvider[];
|
|
31
|
+
};
|
|
32
|
+
declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
|
|
33
|
+
action: (name: string) => any;
|
|
34
|
+
}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
35
|
+
onAction?: ((name: string) => any) | undefined;
|
|
36
|
+
}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
|
37
|
+
declare const _default: typeof __VLS_export;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { AsSsoProvider, _default as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as vue from "vue";
|
|
2
|
+
import { TAsComponentProps } from "@atscript/vue-form";
|
|
3
|
+
|
|
4
|
+
//#region src/components/as-sso-providers.vue.d.ts
|
|
5
|
+
/**
|
|
6
|
+
* Single SSO provider descriptor — fed via `@ui.form.attr` /
|
|
7
|
+
* `@ui.form.fn.attr` on the consumer's `.as` schema (the aooth backend
|
|
8
|
+
* supplies the resolved list at runtime).
|
|
9
|
+
*
|
|
10
|
+
* - `id` — committed to the bound model (`model.value = id`) on click and
|
|
11
|
+
* carried by the fired form action; identifies which provider the
|
|
12
|
+
* workflow should redirect to.
|
|
13
|
+
* - `text` — rendered VERBATIM. The backend owns the full display string
|
|
14
|
+
* (e.g. "Continue with Google" for a main-stack button, "Discord" for a
|
|
15
|
+
* secondary chip). We never compose a "Continue with {name}" prefix.
|
|
16
|
+
* - `icon` — optional CSS class painting the brand glyph (e.g.
|
|
17
|
+
* `i-logos-google-icon`). Applied as-is; the consumer owns the safelist /
|
|
18
|
+
* preset coverage, same contract as `prefixIcon`.
|
|
19
|
+
* - `secondary` — `true` ⇒ renders as a compact chip below the "or" divider;
|
|
20
|
+
* omitted/false ⇒ renders as a full-width button in the main stack (the
|
|
21
|
+
* default).
|
|
22
|
+
*/
|
|
23
|
+
interface AsSsoProvider {
|
|
24
|
+
id: string;
|
|
25
|
+
text: string;
|
|
26
|
+
icon?: string;
|
|
27
|
+
secondary?: boolean;
|
|
28
|
+
}
|
|
29
|
+
type __VLS_Props = TAsComponentProps<string | undefined> & {
|
|
30
|
+
providers?: AsSsoProvider[];
|
|
31
|
+
};
|
|
32
|
+
declare const __VLS_export: vue.DefineComponent<__VLS_Props, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
|
|
33
|
+
action: (name: string) => any;
|
|
34
|
+
}, string, vue.PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
35
|
+
onAction?: ((name: string) => any) | undefined;
|
|
36
|
+
}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
|
37
|
+
declare const _default: typeof __VLS_export;
|
|
38
|
+
//#endregion
|
|
39
|
+
export { AsSsoProvider, _default as default };
|
package/dist/index.cjs
CHANGED
|
@@ -3,7 +3,9 @@ const require_as_consent_array = require("./as-consent-array-B8gtVvew.cjs");
|
|
|
3
3
|
const require_as_copy = require("./as-copy-USMxrTlI.cjs");
|
|
4
4
|
const require_as_password_rules = require("./as-password-rules-DBoLmROR.cjs");
|
|
5
5
|
const require_as_qr_code = require("./as-qr-code-BoEy7mvV.cjs");
|
|
6
|
+
const require_as_sso_providers = require("./as-sso-providers-BWPSghtC.cjs");
|
|
6
7
|
exports.AsConsentArray = require_as_consent_array.as_consent_array_default;
|
|
7
8
|
exports.AsCopy = require_as_copy.as_copy_default;
|
|
8
9
|
exports.AsPasswordRules = require_as_password_rules.as_password_rules_default;
|
|
9
10
|
exports.AsQrCode = require_as_qr_code.as_qr_code_default;
|
|
11
|
+
exports.AsSsoProviders = require_as_sso_providers.as_sso_providers_default;
|
package/dist/index.d.cts
CHANGED
|
@@ -2,4 +2,5 @@ import _default from "./as-consent-array.cjs";
|
|
|
2
2
|
import _default$1 from "./as-copy.cjs";
|
|
3
3
|
import _default$2 from "./as-password-rules.cjs";
|
|
4
4
|
import _default$3 from "./as-qr-code.cjs";
|
|
5
|
-
|
|
5
|
+
import _default$4 from "./as-sso-providers.cjs";
|
|
6
|
+
export { _default as AsConsentArray, _default$1 as AsCopy, _default$2 as AsPasswordRules, _default$3 as AsQrCode, _default$4 as AsSsoProviders };
|
package/dist/index.d.mts
CHANGED
|
@@ -2,4 +2,5 @@ import _default from "./as-consent-array.mjs";
|
|
|
2
2
|
import _default$1 from "./as-copy.mjs";
|
|
3
3
|
import _default$2 from "./as-password-rules.mjs";
|
|
4
4
|
import _default$3 from "./as-qr-code.mjs";
|
|
5
|
-
|
|
5
|
+
import _default$4 from "./as-sso-providers.mjs";
|
|
6
|
+
export { _default as AsConsentArray, _default$1 as AsCopy, _default$2 as AsPasswordRules, _default$3 as AsQrCode, _default$4 as AsSsoProviders };
|
package/dist/index.mjs
CHANGED
|
@@ -2,4 +2,5 @@ import { t as as_consent_array_default } from "./as-consent-array-C1GpSvgX.mjs";
|
|
|
2
2
|
import { t as as_copy_default } from "./as-copy-CxLJdyxe.mjs";
|
|
3
3
|
import { t as as_password_rules_default } from "./as-password-rules-DuKe47j8.mjs";
|
|
4
4
|
import { t as as_qr_code_default } from "./as-qr-code-U4sjF5lD.mjs";
|
|
5
|
-
|
|
5
|
+
import { t as as_sso_providers_default } from "./as-sso-providers-CscXrbEt.mjs";
|
|
6
|
+
export { as_consent_array_default as AsConsentArray, as_copy_default as AsCopy, as_password_rules_default as AsPasswordRules, as_qr_code_default as AsQrCode, as_sso_providers_default as AsSsoProviders };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atscript/vue-aooth",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.88",
|
|
4
4
|
"description": "Custom form components for the Aooth auth system, built on @atscript/vue-form",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"aooth",
|
|
@@ -54,36 +54,41 @@
|
|
|
54
54
|
"import": "./dist/as-qr-code.mjs",
|
|
55
55
|
"require": "./dist/as-qr-code.cjs"
|
|
56
56
|
},
|
|
57
|
+
"./as-sso-providers": {
|
|
58
|
+
"types": "./dist/as-sso-providers.d.mts",
|
|
59
|
+
"import": "./dist/as-sso-providers.mjs",
|
|
60
|
+
"require": "./dist/as-sso-providers.cjs"
|
|
61
|
+
},
|
|
57
62
|
"./package.json": "./package.json"
|
|
58
63
|
},
|
|
59
64
|
"publishConfig": {
|
|
60
65
|
"access": "public"
|
|
61
66
|
},
|
|
62
67
|
"dependencies": {
|
|
63
|
-
"@atscript/ui": "^0.1.
|
|
64
|
-
"@atscript/vue-form": "^0.1.
|
|
68
|
+
"@atscript/ui": "^0.1.88",
|
|
69
|
+
"@atscript/vue-form": "^0.1.88"
|
|
65
70
|
},
|
|
66
71
|
"devDependencies": {
|
|
67
|
-
"@atscript/core": "^0.1.
|
|
68
|
-
"@atscript/typescript": "^0.1.
|
|
72
|
+
"@atscript/core": "^0.1.69",
|
|
73
|
+
"@atscript/typescript": "^0.1.69",
|
|
69
74
|
"@tsdown/css": "^0.21.4",
|
|
70
75
|
"@types/qrcode": "^1.5.5",
|
|
71
76
|
"@vitejs/plugin-vue": "^6",
|
|
72
77
|
"@vue/test-utils": "^2",
|
|
73
78
|
"happy-dom": "^18",
|
|
74
79
|
"qrcode": "^1.5.4",
|
|
75
|
-
"unplugin-atscript": "^0.1.
|
|
80
|
+
"unplugin-atscript": "^0.1.69",
|
|
76
81
|
"vitest": "npm:@voidzero-dev/vite-plus-test@0.1.14",
|
|
77
82
|
"vue": "^3",
|
|
78
83
|
"vue-tsc": "~3.2.9",
|
|
79
84
|
"vunor": "^0.2.1",
|
|
80
|
-
"@atscript/ui-fns": "^0.1.
|
|
85
|
+
"@atscript/ui-fns": "^0.1.88"
|
|
81
86
|
},
|
|
82
87
|
"peerDependencies": {
|
|
83
88
|
"qrcode": "^1.5.4",
|
|
84
89
|
"vue": "^3",
|
|
85
|
-
"@atscript/ui-fns": "^0.1.
|
|
86
|
-
"@atscript/vue-form": "^0.1.
|
|
90
|
+
"@atscript/ui-fns": "^0.1.88",
|
|
91
|
+
"@atscript/vue-form": "^0.1.88"
|
|
87
92
|
},
|
|
88
93
|
"peerDependenciesMeta": {
|
|
89
94
|
"qrcode": {
|