@resee-movies/nuxt-ux 0.8.0 → 0.9.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/dist/module.json +1 -1
- package/dist/runtime/components/Button.vue +3 -1
- package/dist/runtime/components/LayoutPageColumn.vue +2 -2
- package/dist/runtime/components/LayoutPageColumn.vue.d.ts +2 -2
- package/dist/runtime/components/LayoutPageContainer.vue +37 -9
- package/dist/runtime/components/LayoutPageContainer.vue.d.ts +6 -0
- package/dist/runtime/components/Lorem.vue +24 -22
- package/dist/runtime/components/form/Form.vue +12 -4
- package/dist/runtime/components/form/Form.vue.d.ts +11 -1
- package/dist/runtime/components/form/FormFieldBuilder.vue +57 -0
- package/dist/runtime/components/form/FormFieldBuilder.vue.d.ts +42 -0
- package/dist/runtime/components/form/element/FormElementEmptyDiv.vue +20 -0
- package/dist/runtime/components/form/element/FormElementEmptyDiv.vue.d.ts +17 -0
- package/dist/runtime/components/form/element/FormElementSelectButton.vue +1 -0
- package/dist/runtime/components/form/element/FormElementSelectOptions.vue +2 -2
- package/dist/runtime/components/form/element/FormElementTurnstile.vue.d.ts +2 -2
- package/dist/runtime/theme/css/brand/button.css +1 -1
- package/dist/runtime/theme/css/brand/form.css +2 -2
- package/dist/runtime/theme/css/brand/typography.css +1 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script>
|
|
11
|
-
|
|
11
|
+
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<script setup>
|
|
@@ -19,5 +19,5 @@ const props = defineProps({
|
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
21
|
<style scoped>
|
|
22
|
-
@reference "tailwindcss";:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant
|
|
22
|
+
@reference "tailwindcss";:global(:root){--page-column-gutter:calc(var(--spacing)*3);--page-column-pad-y:calc(var(--spacing)*12);--page-column-pad-vista:calc(var(--spacing)*52)}.page-column{margin-left:auto;margin-right:auto;padding:var(--page-column-gutter)}.page-column.layout-main:where(:has(:first-child.page-container)){padding-bottom:0;padding-top:0}.page-column.layout-vista:where(:has(:last-child.page-container)){padding-bottom:0}@variant sm{.page-column{max-width:var(--container-3xl)}.page-column.layout-main{padding-top:var(--page-column-pad-y)}.page-column.layout-main,.page-column.layout-vista{padding-bottom:var(--page-column-pad-y)}}@variant lg{.page-column{max-width:var(--container-5xl)}.page-column.layout-vista{padding-top:var(--page-column-pad-vista)}}@variant portrait{.page-column.layout-vista{padding-top:min(calc(var(--spacing)*52),calc(56.25vw - 110px))}}
|
|
23
23
|
</style>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export interface
|
|
1
|
+
export interface LayoutPageColumnProps {
|
|
2
2
|
is?: string;
|
|
3
3
|
layout?: 'main' | 'vista';
|
|
4
4
|
}
|
|
5
|
-
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<
|
|
5
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageColumnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageColumnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
6
6
|
default?: (props: {}) => any;
|
|
7
7
|
}>;
|
|
8
8
|
declare const _default: typeof __VLS_export;
|
|
@@ -1,15 +1,32 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<Component
|
|
3
3
|
:is = "props.is"
|
|
4
|
-
:class = "['page-container',
|
|
4
|
+
:class = "['page-container', { 'glass-effect': props.glassEffect }]"
|
|
5
5
|
>
|
|
6
|
-
<div
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
<div
|
|
7
|
+
v-if = "showTitleBar"
|
|
8
|
+
:class = "['mb-6', { 'prose-layout-container': props.prose, 'sm': props.prose === 'sm' }]"
|
|
9
|
+
>
|
|
10
|
+
<div v-if="showHeading || slots.actions" class="flex gap-4 items-center">
|
|
11
|
+
<slot name="heading">
|
|
12
|
+
<Heading :text="props.headingText" class="grow" />
|
|
13
|
+
</slot>
|
|
14
|
+
|
|
15
|
+
<div v-if="slots.actions">
|
|
16
|
+
<slot name="actions" />
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div v-if="showSubheading">
|
|
21
|
+
<slot name="subheading">
|
|
22
|
+
<p class="text-global-foreground-accent">{{ props.subheadingText }}</p>
|
|
23
|
+
</slot>
|
|
24
|
+
</div>
|
|
10
25
|
</div>
|
|
11
26
|
|
|
12
|
-
<
|
|
27
|
+
<div :class="{ 'prose-container': props.prose, 'sm': props.prose === 'sm' }">
|
|
28
|
+
<slot name="default" />
|
|
29
|
+
</div>
|
|
13
30
|
</Component>
|
|
14
31
|
</template>
|
|
15
32
|
|
|
@@ -18,17 +35,28 @@
|
|
|
18
35
|
</script>
|
|
19
36
|
|
|
20
37
|
<script setup>
|
|
21
|
-
import { useSlots } from "vue";
|
|
38
|
+
import { computed, useSlots } from "vue";
|
|
22
39
|
import Heading from "./Heading.vue";
|
|
23
40
|
const slots = useSlots();
|
|
24
41
|
const props = defineProps({
|
|
25
42
|
is: { type: String, required: false, default: "div" },
|
|
26
43
|
glassEffect: { type: Boolean, required: false, default: false },
|
|
27
44
|
accentColor: { type: String, required: false, default: void 0 },
|
|
28
|
-
headingText: { type: String, required: false, default: void 0 }
|
|
45
|
+
headingText: { type: String, required: false, default: void 0 },
|
|
46
|
+
subheadingText: { type: String, required: false, default: void 0 },
|
|
47
|
+
prose: { type: [Boolean, String], required: false, default: false }
|
|
29
48
|
});
|
|
49
|
+
const showSubheading = computed(
|
|
50
|
+
() => !!(props.subheadingText || slots.subheading)
|
|
51
|
+
);
|
|
52
|
+
const showHeading = computed(
|
|
53
|
+
() => !!(props.headingText || slots.heading)
|
|
54
|
+
);
|
|
55
|
+
const showTitleBar = computed(
|
|
56
|
+
() => showHeading.value || showSubheading.value || !!slots.actions
|
|
57
|
+
);
|
|
30
58
|
</script>
|
|
31
59
|
|
|
32
60
|
<style scoped>
|
|
33
|
-
@reference "tailwindcss";:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 40%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}}
|
|
61
|
+
@reference "tailwindcss";:global(:root){--page-container-pad-y:calc(var(--page-column-gutter)*2);--page-container-pad-x:var(--page-container-pad-y);--page-container-radius:calc(var(--spacing)*1)}.page-container{--custom-accent-color:v-bind(accentColor);--page-container-accent-color:var(--custom-accent-color,var(--color-global-foreground-accent));background-color:var(--color-global-background);border:1px solid var(--page-container-accent-color);border-radius:var(--page-container-radius);box-shadow:var(--shadow-heavy);padding:var(--page-container-pad-y) var(--page-container-pad-x);transition:border-color;transition-duration:var(--default-transition-duration)}@variant sm{.page-container.glass-effect{backdrop-filter:blur(var(--blur-sm));background-color:color-mix(in srgb-linear,transparent 40%,var(--color-global-background))}}@variant max-sm{.page-container:where(.page-column>.page-container){border-bottom:none;border-left:none;border-radius:0;border-right:none;box-shadow:none;margin-left:calc(var(--page-column-gutter)*-1);margin-right:calc(var(--page-column-gutter)*-1);padding-left:var(--page-column-gutter);padding-right:var(--page-column-gutter)}.page-container:not(.page-container+.page-container):where(.page-column:not(.layout-vista)>.page-container){border-top:none}}
|
|
34
62
|
</style>
|
|
@@ -4,9 +4,15 @@ export interface LayoutPageContainerProps {
|
|
|
4
4
|
glassEffect?: boolean;
|
|
5
5
|
accentColor?: string;
|
|
6
6
|
headingText?: string;
|
|
7
|
+
subheadingText?: string;
|
|
8
|
+
prose?: boolean | 'md' | 'sm';
|
|
7
9
|
}
|
|
8
10
|
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LayoutPageContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LayoutPageContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
9
11
|
heading?: (props: {}) => any;
|
|
12
|
+
} & {
|
|
13
|
+
actions?: (props: {}) => any;
|
|
14
|
+
} & {
|
|
15
|
+
subheading?: (props: {}) => any;
|
|
10
16
|
} & {
|
|
11
17
|
default?: (props: {}) => any;
|
|
12
18
|
}>;
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
</script>
|
|
16
16
|
|
|
17
17
|
<script setup>
|
|
18
|
-
import {
|
|
19
|
-
import { computed } from "vue";
|
|
18
|
+
import { useState } from "#imports";
|
|
19
|
+
import { computed, useId } from "vue";
|
|
20
20
|
const props = defineProps({
|
|
21
21
|
type: { type: String, required: false, default: "words" },
|
|
22
22
|
min: { type: [String, Number], required: false, default: void 0 },
|
|
@@ -28,26 +28,6 @@ const props = defineProps({
|
|
|
28
28
|
minWordCount: { type: [String, Number], required: false, default: 5 },
|
|
29
29
|
maxWordCount: { type: [String, Number], required: false, default: 25 }
|
|
30
30
|
});
|
|
31
|
-
const values = computed(() => {
|
|
32
|
-
const { min, max, type } = props;
|
|
33
|
-
const minWord = toInteger(type === "words" && min, props.minWordCount) ?? 5;
|
|
34
|
-
const maxWord = toInteger(type === "words" && max, props.maxWordCount, minWord + 20) ?? 25;
|
|
35
|
-
if (props.type === "words") {
|
|
36
|
-
return getWords(minWord, maxWord);
|
|
37
|
-
}
|
|
38
|
-
const minSent = toInteger(type === "sentences" && min, props.minSentenceCount) ?? 1;
|
|
39
|
-
const maxSent = toInteger(type === "sentences" && max, props.maxSentenceCount, minSent + 3) ?? 4;
|
|
40
|
-
if (props.type === "sentences") {
|
|
41
|
-
return getSentences(minSent, maxSent, minWord, maxWord);
|
|
42
|
-
}
|
|
43
|
-
const minPara = toInteger(type === "paragraphs" && min, props.minParagraphCount) ?? 1;
|
|
44
|
-
const maxPara = toInteger(type === "paragraphs" && max, props.maxParagraphCount, minPara + 3) ?? 4;
|
|
45
|
-
if (props.type === "paragraphs") {
|
|
46
|
-
return getParagraphs(minPara, maxPara, minSent, maxSent, minWord, maxWord);
|
|
47
|
-
}
|
|
48
|
-
return [];
|
|
49
|
-
});
|
|
50
|
-
const lorem = useState(useId(), () => values);
|
|
51
31
|
const LoremWords = [
|
|
52
32
|
"lorem",
|
|
53
33
|
"ipsum",
|
|
@@ -273,6 +253,28 @@ const LoremWords = [
|
|
|
273
253
|
"elit, ",
|
|
274
254
|
"vehicula"
|
|
275
255
|
];
|
|
256
|
+
const uid = useId();
|
|
257
|
+
const values = useState(uid, () => generate());
|
|
258
|
+
const lorem = computed(() => values.value ?? generate());
|
|
259
|
+
function generate() {
|
|
260
|
+
const { min, max, type } = props;
|
|
261
|
+
const minWord = toInteger(type === "words" && min, props.minWordCount) ?? 5;
|
|
262
|
+
const maxWord = toInteger(type === "words" && max, props.maxWordCount, minWord + 20) ?? 25;
|
|
263
|
+
if (props.type === "words") {
|
|
264
|
+
return getWords(minWord, maxWord);
|
|
265
|
+
}
|
|
266
|
+
const minSent = toInteger(type === "sentences" && min, props.minSentenceCount) ?? 1;
|
|
267
|
+
const maxSent = toInteger(type === "sentences" && max, props.maxSentenceCount, minSent + 3) ?? 4;
|
|
268
|
+
if (props.type === "sentences") {
|
|
269
|
+
return getSentences(minSent, maxSent, minWord, maxWord);
|
|
270
|
+
}
|
|
271
|
+
const minPara = toInteger(type === "paragraphs" && min, props.minParagraphCount) ?? 1;
|
|
272
|
+
const maxPara = toInteger(type === "paragraphs" && max, props.maxParagraphCount, minPara + 3) ?? 4;
|
|
273
|
+
if (props.type === "paragraphs") {
|
|
274
|
+
return getParagraphs(minPara, maxPara, minSent, maxSent, minWord, maxWord);
|
|
275
|
+
}
|
|
276
|
+
return [];
|
|
277
|
+
}
|
|
276
278
|
function randomInteger(min, max) {
|
|
277
279
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
278
280
|
}
|
|
@@ -11,7 +11,13 @@
|
|
|
11
11
|
:aria-disabled = "props.disabled"
|
|
12
12
|
@submit = "handleFormSubmit"
|
|
13
13
|
>
|
|
14
|
-
<slot :state="$form" />
|
|
14
|
+
<slot name="before" :state="$form" />
|
|
15
|
+
|
|
16
|
+
<slot name="default" :state="$form">
|
|
17
|
+
<FormFieldBuilder v-if="props.fields?.length" :fields="props.fields" />
|
|
18
|
+
</slot>
|
|
19
|
+
|
|
20
|
+
<slot name="after" :state="$form" />
|
|
15
21
|
</PrimeForm>
|
|
16
22
|
</template>
|
|
17
23
|
|
|
@@ -25,12 +31,14 @@ import { toNonNullableArray } from "@resee-movies/utilities/arrays/to-non-nullab
|
|
|
25
31
|
import { isPromiseLike } from "@resee-movies/utilities/objects/is-promise-like";
|
|
26
32
|
import { syncRefs, useDebounceFn } from "@vueuse/core";
|
|
27
33
|
import { useTemplateRef } from "vue";
|
|
34
|
+
import FormFieldBuilder from "./FormFieldBuilder.vue";
|
|
28
35
|
import { useReactiveObjectsSync } from "../../composables/use-reactive-objects-sync";
|
|
29
36
|
import { provideFormInstance, getValuesFromFormState } from "../../utils/form";
|
|
30
37
|
const props = defineProps({
|
|
31
|
-
disabled: { type: Boolean, required: false },
|
|
32
|
-
onSubmit: { type: [Function, Array], required: false },
|
|
33
|
-
onChange: { type: Function, required: false }
|
|
38
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
39
|
+
onSubmit: { type: [Function, Array], required: false, default: void 0 },
|
|
40
|
+
onChange: { type: Function, required: false, default: void 0 },
|
|
41
|
+
fields: { type: Array, required: false, default: void 0 }
|
|
34
42
|
});
|
|
35
43
|
const form = useTemplateRef("form");
|
|
36
44
|
const values = defineModel("values", { type: null, ...{ default: void 0 } });
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FormSubmitEvent, FormSubmitHandler, FormValues } from '../../types/form.js';
|
|
2
|
+
import type { FormFieldBuilderOption } from './FormFieldBuilder.vue.js';
|
|
2
3
|
export * from '../../types/form.js';
|
|
3
4
|
export interface FormProps<T extends FormValues = FormValues> {
|
|
4
5
|
disabled?: boolean;
|
|
5
6
|
onSubmit?: FormSubmitHandler<T> | FormSubmitHandler<T>[];
|
|
6
7
|
onChange?: (values: T | null) => void;
|
|
8
|
+
fields?: FormFieldBuilderOption[];
|
|
7
9
|
}
|
|
8
10
|
declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
9
11
|
props: __VLS_PrettifyLocal<(FormProps<T> & {
|
|
@@ -17,9 +19,17 @@ declare const __VLS_export: <T extends FormValues>(__VLS_props: NonNullable<Awai
|
|
|
17
19
|
expose: (exposed: {}) => void;
|
|
18
20
|
attrs: any;
|
|
19
21
|
slots: {
|
|
22
|
+
before?: (props: {
|
|
23
|
+
state: any;
|
|
24
|
+
}) => any;
|
|
25
|
+
} & {
|
|
20
26
|
default?: (props: {
|
|
21
27
|
state: any;
|
|
22
28
|
}) => any;
|
|
29
|
+
} & {
|
|
30
|
+
after?: (props: {
|
|
31
|
+
state: any;
|
|
32
|
+
}) => any;
|
|
23
33
|
};
|
|
24
34
|
emit: {
|
|
25
35
|
(e: "submit", evt: FormSubmitEvent<T>): (void | Promise<void>);
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="@container">
|
|
3
|
+
<div class="grid grid-cols-1 gap-x-4 gap-y-6 @lg:grid-cols-2 @lg:gap-y-7">
|
|
4
|
+
<template v-for="(field, index) of props.fields" :key="field.name ?? index">
|
|
5
|
+
<Component
|
|
6
|
+
:is = "getComponent(field)"
|
|
7
|
+
v-bind = "field"
|
|
8
|
+
:class = "{
|
|
9
|
+
'@lg:col-span-2': field.width !== 'half'
|
|
10
|
+
}"
|
|
11
|
+
/>
|
|
12
|
+
</template>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
</template>
|
|
16
|
+
|
|
17
|
+
<script>
|
|
18
|
+
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<script setup>
|
|
22
|
+
import { h } from "vue";
|
|
23
|
+
import EmptyDiv from "./element/FormElementEmptyDiv.vue";
|
|
24
|
+
import CheckboxField from "./FormFieldCheckbox.vue";
|
|
25
|
+
import SelectField from "./FormFieldSelect.vue";
|
|
26
|
+
import SelectButtonField from "./FormFieldSelectButton.vue";
|
|
27
|
+
import SubmitButton from "./FormSubmitButton.vue";
|
|
28
|
+
import TextField from "./FormFieldText.vue";
|
|
29
|
+
import TextareaField from "./FormFieldTextarea.vue";
|
|
30
|
+
import ToggleSwitchField from "./FormFieldToggleSwitch.vue";
|
|
31
|
+
import TurnstileField from "./FormFieldTurnstile.vue";
|
|
32
|
+
const props = defineProps({
|
|
33
|
+
fields: { type: null, required: true }
|
|
34
|
+
});
|
|
35
|
+
function getComponent(field) {
|
|
36
|
+
switch (field.fieldType) {
|
|
37
|
+
case "checkbox":
|
|
38
|
+
return CheckboxField;
|
|
39
|
+
case "select":
|
|
40
|
+
return SelectField;
|
|
41
|
+
case "select-button":
|
|
42
|
+
return SelectButtonField;
|
|
43
|
+
case "text":
|
|
44
|
+
return TextField;
|
|
45
|
+
case "textarea":
|
|
46
|
+
return TextareaField;
|
|
47
|
+
case "toggle":
|
|
48
|
+
return ToggleSwitchField;
|
|
49
|
+
case "turnstile":
|
|
50
|
+
return TurnstileField;
|
|
51
|
+
case "submit":
|
|
52
|
+
return h(EmptyDiv, { class: "text-end" }, h(SubmitButton));
|
|
53
|
+
default:
|
|
54
|
+
return "div";
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
</script>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { FormFieldCheckboxProps } from './FormFieldCheckbox.vue.js';
|
|
2
|
+
import type { FormFieldSelectProps } from './FormFieldSelect.vue.js';
|
|
3
|
+
import type { FormFieldSelectButtonProps } from './FormFieldSelectButton.vue.js';
|
|
4
|
+
import type { FormFieldTextProps } from './FormFieldText.vue.js';
|
|
5
|
+
import type { FormFieldTextareaProps } from './FormFieldTextarea.vue.js';
|
|
6
|
+
import type { FormFieldToggleSwitchProps } from './FormFieldToggleSwitch.vue.js';
|
|
7
|
+
import type { FormFieldTurnstileProps } from './FormFieldTurnstile.vue.js';
|
|
8
|
+
import type { FormSubmitButtonProps } from './FormSubmitButton.vue.js';
|
|
9
|
+
export interface CommonOptions {
|
|
10
|
+
width?: 'full' | 'half';
|
|
11
|
+
}
|
|
12
|
+
export interface CheckboxField extends FormFieldCheckboxProps, CommonOptions {
|
|
13
|
+
fieldType: 'checkbox';
|
|
14
|
+
}
|
|
15
|
+
export interface SelectField extends FormFieldSelectProps, CommonOptions {
|
|
16
|
+
fieldType: 'select';
|
|
17
|
+
}
|
|
18
|
+
export interface SelectButtonField extends FormFieldSelectButtonProps, CommonOptions {
|
|
19
|
+
fieldType: 'select-button';
|
|
20
|
+
}
|
|
21
|
+
export interface TextField extends FormFieldTextProps, CommonOptions {
|
|
22
|
+
fieldType: 'text';
|
|
23
|
+
}
|
|
24
|
+
export interface TextareaField extends FormFieldTextareaProps, CommonOptions {
|
|
25
|
+
fieldType: 'textarea';
|
|
26
|
+
}
|
|
27
|
+
export interface ToggleSwitchField extends FormFieldToggleSwitchProps, CommonOptions {
|
|
28
|
+
fieldType: 'toggle';
|
|
29
|
+
}
|
|
30
|
+
export interface TurnstileField extends FormFieldTurnstileProps, CommonOptions {
|
|
31
|
+
fieldType: 'turnstile';
|
|
32
|
+
}
|
|
33
|
+
export interface SubmitButton extends FormSubmitButtonProps, CommonOptions {
|
|
34
|
+
fieldType: 'submit';
|
|
35
|
+
}
|
|
36
|
+
export type FormFieldBuilderOption = CheckboxField | SelectField | SelectButtonField | TextField | TextareaField | ToggleSwitchField | TurnstileField | SubmitButton;
|
|
37
|
+
export interface FormFieldBuilderProps {
|
|
38
|
+
fields: undefined | FormFieldBuilderOption[];
|
|
39
|
+
}
|
|
40
|
+
declare const __VLS_export: import("vue").DefineComponent<FormFieldBuilderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormFieldBuilderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
41
|
+
declare const _default: typeof __VLS_export;
|
|
42
|
+
export default _default;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div :id="props.id" :class="props.class" :style="props.style">
|
|
3
|
+
<slot />
|
|
4
|
+
</div>
|
|
5
|
+
</template>
|
|
6
|
+
|
|
7
|
+
<script>
|
|
8
|
+
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<script setup>
|
|
12
|
+
defineOptions({
|
|
13
|
+
inheritAttrs: false
|
|
14
|
+
});
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
id: { type: String, required: false },
|
|
17
|
+
class: { type: null, required: false },
|
|
18
|
+
style: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true }
|
|
19
|
+
});
|
|
20
|
+
</script>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { StyleValue } from '@vue/runtime-dom';
|
|
2
|
+
import type { HTMLElementClassNames } from '../../../types/index.js';
|
|
3
|
+
export interface FormElementEmptyDivProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
class?: HTMLElementClassNames;
|
|
6
|
+
style?: StyleValue;
|
|
7
|
+
}
|
|
8
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<FormElementEmptyDivProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementEmptyDivProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
9
|
+
default?: (props: {}) => any;
|
|
10
|
+
}>;
|
|
11
|
+
declare const _default: typeof __VLS_export;
|
|
12
|
+
export default _default;
|
|
13
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
14
|
+
new (): {
|
|
15
|
+
$slots: S;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
>
|
|
8
8
|
<template v-for="(option, index) of props.options" :key="getOptionRenderKey(option) ?? index">
|
|
9
9
|
<ToggleButton
|
|
10
|
+
class = "input-button"
|
|
10
11
|
severity = "unset"
|
|
11
12
|
:pressed = "getSelectedOptionIndex(option) !== -1"
|
|
12
13
|
:text = "props.iconOnly ? void 0 : getOptionLabel(option)"
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
<Button
|
|
45
45
|
severity = "unset"
|
|
46
46
|
icon = "i-ph-x"
|
|
47
|
-
class = "input-group-addon"
|
|
47
|
+
class = "input-button input-group-addon"
|
|
48
48
|
@click = "clearCallback"
|
|
49
49
|
:data-pc-section = "
|
|
50
50
|
'clearicon'
|
|
@@ -169,7 +169,7 @@ const sharedPassthroughProps = computed(() => {
|
|
|
169
169
|
return {
|
|
170
170
|
header: { class: "menu-prefix input-menu-header" },
|
|
171
171
|
overlay: { class: "menu input-menu" },
|
|
172
|
-
dropdown: { class: "input-group-addon" },
|
|
172
|
+
dropdown: { class: "input-group-addon input-button" },
|
|
173
173
|
listContainer: { class: "menu-list" },
|
|
174
174
|
pcFilterContainer: { root: { class: "input-menu-filter" } },
|
|
175
175
|
pcFilterIconContainer: { root: { class: "input-group-addon" } },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TurnstileRenderOptions } from '../../../composables/use-cloudflare-turnstile.js';
|
|
2
|
-
export interface
|
|
2
|
+
export interface FormElementTurnstileProps extends TurnstileRenderOptions {
|
|
3
3
|
}
|
|
4
|
-
declare const __VLS_export: import("vue").DefineComponent<
|
|
4
|
+
declare const __VLS_export: import("vue").DefineComponent<FormElementTurnstileProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FormElementTurnstileProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
5
5
|
declare const _default: typeof __VLS_export;
|
|
6
6
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button,.prose-container button{--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button,.prose-container button{background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:focus-visible,.prose-container button:focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button.borderless,.prose-container button.borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button.icon-only,.prose-container button.icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button.icon-only .label,.prose-container button.icon-only .label{display:none}.btn.small,.prose button.small,.prose-container button.small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button.small.icon-only,.prose-container button.small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button.small:not(.icon-only),.prose-container button.small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button.large,.prose-container button.large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button.large.icon-only,.prose-container button.large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button.large:not(.icon-only),.prose-container button.large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button.loading,.prose-container button.loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button,.prose-container button{@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}
|
|
1
|
+
@layer components{@property --btn-background-color{syntax:"<color>";inherits:false;initial-value:transparent}.btn,.btn.default,.prose button:not([class]),.prose-container button:not([class]){--btn-border-width:2px;--btn-background-color:var(--color-background-scale-a);--btn-background-focus-color:var(--color-background-scale-c);--btn-border-color:var(--color-background-scale-g);--btn-bg-image-background-layer:linear-gradient(to right,var(--btn-background-color),var(--btn-background-color));--btn-bg-image-border-layer:linear-gradient(to right,var(--btn-border-color),var(--btn-border-color));--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-linear));--btn-background-image:var(--btn-bg-image-background-layer),var(--btn-bg-image-border-layer),var(--btn-bg-image-color-layer);@variant dark{--btn-bg-image-color-layer:linear-gradient(to right,var(--colorscale-resee-lite-linear))}}.btn.default.icon-only,.btn.icon-only,.prose button:not([class]).icon-only,.prose-container button:not([class]).icon-only{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-conic));@variant dark{--btn-bg-image-color-layer:conic-gradient(from 0deg,var(--colorscale-resee-lite-conic))}}.btn,.prose button:not([class]),.prose-container button:not([class]){background-clip:padding-box,border-box,border-box;background-image:var(--btn-background-image);background-origin:border-box;background-position:100% 100%;background-repeat:no-repeat;background-size:100%,100% 100%,100%;border:solid var(--btn-border-width) var(--btn-border-color);border-radius:var(--radius-full);cursor:pointer;display:inline-block;padding:--spacing(1) --spacing(5);text-align:center;transition:box-shadow,background-size,--btn-background-color,border-color;transition-duration:.3s;transition-timing-function:ease-in-out}.btn:focus-visible,.prose button:not([class]):focus-visible,.prose-container button:not([class]):focus-visible{outline:none}.btn:where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose button:not([class]):where(:disabled,.disabled,[aria-disabled=true]):not(.loading),.prose-container button:not([class]):where(:disabled,.disabled,[aria-disabled=true]):not(.loading){cursor:not-allowed;opacity:.4}.btn.borderless,.prose button:not([class]).borderless,.prose-container button:not([class]).borderless{background-clip:border-box;background-image:var(--btn-bg-image-background-layer);border:2px solid transparent}.btn.icon-only,.prose button:not([class]).icon-only,.prose-container button:not([class]).icon-only{line-height:1;padding:--spacing(2)}.btn.icon-only .label,.prose button:not([class]).icon-only .label,.prose-container button:not([class]).icon-only .label{display:none}.btn.small,.prose button:not([class]).small,.prose-container button:not([class]).small{font-size:var(--icon-size-small)}.btn.small.icon-only,.prose button:not([class]).small.icon-only,.prose-container button:not([class]).small.icon-only{padding:--spacing(1.75)}.btn.small:not(.icon-only),.prose button:not([class]).small:not(.icon-only),.prose-container button:not([class]).small:not(.icon-only){padding:--spacing(.5) --spacing(4)}.btn.large,.prose button:not([class]).large,.prose-container button:not([class]).large{font-size:var(--icon-size-large)}.btn.large.icon-only,.prose button:not([class]).large.icon-only,.prose-container button:not([class]).large.icon-only{padding:--spacing(1.5)}.btn.large:not(.icon-only),.prose button:not([class]).large:not(.icon-only),.prose-container button:not([class]).large:not(.icon-only){padding:--spacing(1.5) --spacing(6)}.btn.loading,.prose button:not([class]).loading,.prose-container button:not([class]).loading{cursor:progress}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover,.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible,.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover{--btn-background-color:var(--btn-background-focus-color);background-size:100%,0 100%,100%;border-color:transparent}.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.btn:not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless),.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):focus-visible:not(.borderless),.prose-container button:not([class]):not(:disabled,.disabled,[aria-disabled=true],.loading):hover:not(.borderless){box-shadow:var(--shadow)}.btn,.prose button:not([class]),.prose-container button:not([class]){@variant max-md{&.responsive-grow{padding:.5rem;width:100%}&.responsive-shrink{line-height:1;padding:--spacing(2)}&.responsive-shrink :not(.icon){display:none}}}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding
|
|
1
|
+
@layer components{.input-label{display:block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label.required:after{color:var(--color-danger);content:"*";display:inline-block;margin-inline-start:--spacing(1)}.input-label.disabled{cursor:not-allowed;opacity:.6}.input-label-pair{display:flex;flex-direction:column;gap:--spacing(1);margin-block-end:--spacing(1)}.input-label-pair.label-after,.input-label-pair.label-before{align-items:center;flex-direction:row;gap:--spacing(3)}.input-label-pair.label-after .input-label,.input-label-pair.label-below .input-label{order:2}.input-validation{color:var(--color-danger);font-size:var(--text-sm);height:0;line-clamp:2}.input-field{display:flex;flex-direction:column}.input-control{flex-grow:1;padding:--spacing(2) --spacing(3)}.input-control::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-control .placeholder,.input-control::placeholder{color:var(--color-global-foreground-accent)}.input-group{align-items:center;display:flex}.input-group.input-group-loading{cursor:wait}.input-group .input-group-addon{color:var(--color-global-foreground-accent);padding:--spacing(1.5) --spacing(2)}.input-group button.input-group-addon{cursor:pointer}.input-group .input-control{outline:none}.input-control:where(:not(.input-group .input-control)),.input-group{background-color:var(--color-global-background);border-radius:--spacing(1);cursor:pointer;outline:solid 2px var(--color-background-scale-e);overflow:clip;transition:color,background-color,outline-color,box-shadow;transition-duration:calc(var(--default-transition-duration)*2);width:100%}.input-control:where(:not(.input-group .input-control)):where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))),.input-group:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)){cursor:default}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))))),.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))))){cursor:not-allowed;opacity:.6}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):hover,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):hover{outline-color:var(--color-global-foreground-accent)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):focus-within{box-shadow:var(--shadow-heavy)}.input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control))))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-control:where(:not(.input-group .input-control)):not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-control:where(:not(.input-group .input-control)))))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within,.input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group))):not(:where(.disabled,:disabled:not(.p-hidden-accessible input),:is(.disabled .input-group:not(:where(.readonly,[readonly]:not(.p-hidden-accessible input),:is(.readonly .input-group)))))):not(:has(>input[type=checkbox]),.input-button-bar):focus-within{background-color:var(--color-background-scale-b)}.input-group:where(:has(input[type=checkbox])){flex-shrink:0;height:1.5rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:1.5rem}
|
|
2
2
|
|
|
3
|
-
/* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button
|
|
3
|
+
/* !important is to overwrite what gets attached to i-* icons in the utility layer */.input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-group:where(:has(input[type=checkbox])) svg{display:block!important;font-size:1rem;height:1rem!important;line-height:1;margin-left:.25rem;width:1rem!important}.input-group:where(:has(input[type=checkbox])) input{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%;inset:0;opacity:0;position:absolute;z-index:10}.input-group:where(:has(input[type=checkbox])) input:not(:disabled,[readonly]){cursor:pointer}.input-group:where(:has(input[type=checkbox])).toggle-switch{border-radius:1rem;width:2.5rem}.input-group:where(:has(input[type=checkbox])).toggle-switch:has(:checked) .slider:before{background-color:var(--color-global-foreground);transform:translateX(1rem)}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider{border-radius:1rem;inset:0;position:absolute}.input-group:where(:has(input[type=checkbox])).toggle-switch .slider:before{background-color:var(--color-background-scale-d);border-radius:var(--radius-full);box-shadow:var(--shadow-md);content:"";height:1rem;left:.25rem;position:absolute;top:.25rem;transition:transform,background-color;transition-duration:var(--default-transition-duration);width:1rem}.input-menu .input-control,.input-menu .input-group{background-color:transparent}.input-menu .input-group:where(:has(input[type=checkbox])){height:1.2rem;width:1.2rem}.input-menu .input-group:where(:has(input[type=checkbox])) span[class^=i-],.input-menu .input-group:where(:has(input[type=checkbox])) svg{margin-left:.1rem;margin-top:-.1rem}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover{outline-color:var(--color-background-scale-e)!important}[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):focus-within input,[aria-disabled=true] .input-menu .input-group:where(:has(input[type=checkbox])):hover input{cursor:not-allowed!important}.input-menu-header{align-items:center;display:flex;gap:--spacing(2)}.input-menu-header .input-menu-filter{align-items:center;color:var(--color-global-foreground-accent);display:flex;flex-grow:1;transition:color var(--default-transition-duration) var(--default-transition-timing-function)}.input-menu-header .input-menu-filter input{flex-grow:1;outline:none;padding:--spacing(.5) 0}.input-menu-header .input-menu-filter input::-moz-placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter input::placeholder{color:var(--color-global-foreground-accent)}.input-menu-header .input-menu-filter:focus-within{color:var(--color-global-foreground)}.input-button{cursor:pointer;padding:--spacing(1.5) --spacing(2);transition:background-color var(--default-transition-duration) var(--default-transition-timing-function)}.input-button[aria-pressed=true]{background-color:var(--color-background-scale-f)}.input-button:where(.readonly .input-button){cursor:default}.input-button:where(:disabled,.disabled .input-button):not(:where(.readonly .input-button)){cursor:not-allowed;opacity:.6}.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):focus-visible,.input-button:not(:disabled,:where(.disabled .input-button),:where(.readonly .input-button),[aria-pressed=true]):hover{background-color:var(--color-background-scale-b)}.input-button-bar{gap:--spacing(.5);padding:--spacing(.5);width:-moz-fit-content;width:fit-content}.input-button-bar button:first-child{border-bottom-left-radius:var(--radius-sm);border-top-left-radius:var(--radius-sm)}.input-button-bar button:last-child{border-bottom-right-radius:var(--radius-sm);border-top-right-radius:var(--radius-sm)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem)}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"";display:block}.prose-container
|
|
1
|
+
@utility prose-layout-container{margin-left:auto;margin-right:auto;max-width:var(--container-3xl);width:100%;&.sm{max-width:var(--container-md)}}@layer components{:root{--typo-h6:clamp(var(--text-base),2.500vw,1.2rem);--typo-h5:clamp(var(--typo-h6),3.000vw,1.44rem);--typo-h4:clamp(var(--typo-h5),3.600vw,1.728rem);--typo-h3:clamp(var(--typo-h4),4.320vw,2.0736rem);--typo-h2:clamp(var(--typo-h3),5.184vw,2.4883rem);--typo-h1:clamp(var(--typo-h2),6.221vw,2.986rem);--typo-h1-hero:clamp(var(--typo-h1),9.331vw,4.479rem);--typo-p-hero:clamp(1.25rem,3.125vw,1.5rem)}.font-variant-small-caps{font-variant:small-caps}.icon-inline{align-items:center;display:inline-flex}.icon-inline:before{content:"";display:block}.prose-container{@apply prose-layout-container}.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child,.prose-container:where(:not(.prose+.prose-container,.prose-container+.prose-container))>:first-child>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child,.prose:where(:not(.prose+.prose,.prose-container+.prose))>:first-child>:first-child{margin-block-start:0}.prose-container>:last-child,.prose-container>:last-child>:last-child,.prose>:last-child,.prose>:last-child>:last-child{margin-block-end:0}:where(.h1,.h2,.h3,.h4,.h5,.h6).prose,:where(.prose-container,.prose) :where(h1,h2,h3,h4,h5,h6){margin-block-end:.4lh;margin-block-start:.9lh;text-wrap:pretty}:where(.p,.pre,.table,.ol,.ul,.img,.figure,.blockquote).prose,:where(.prose-container,.prose) :where(p,pre,table,ol,ul,img,figure,blockquote){margin-block-end:1lh;text-wrap:pretty}:where(.prose-container,.prose) hr+*{margin-block-start:0}:where(.prose-container,.prose) :has(+hr){margin-block-end:0}.hr,.prose hr,.prose-container hr{border-color:var(--color-global-background-accent);margin-block-end:1lh;margin-block-start:1lh}.h1,.prose h1,.prose-container h1{color:color-mix(in srgb-linear,var(--custom-accent-color) 40%,currentColor);font-size:var(--typo-h1);letter-spacing:.0025em;line-height:1.125}.h1.hero,.prose h1.hero,.prose-container h1.hero{font-size:var(--typo-h1-hero);line-height:1}.h2,.prose h2,.prose-container h2{font-size:var(--typo-h2);font-weight:var(--font-weight-extralight);letter-spacing:.0108em;line-height:1.1765}.h3,.prose h3,.prose-container h3{font-size:var(--typo-h3);font-weight:var(--font-weight-extralight);letter-spacing:.022em;line-height:1.2}.h4,.prose h4,.prose-container h4{font-size:var(--typo-h4);letter-spacing:.035em;line-height:1.25}.h5,.prose h5,.prose-container h5{font-size:var(--typo-h5);letter-spacing:.0532em;line-height:1.28}.h6,.prose h6,.prose-container h6{font-size:var(--typo-h6);letter-spacing:.0532em;line-height:1.28}.p,.prose p,.prose-container p{font-size:1rem;letter-spacing:.03em;line-height:1.5}.p.hero,.prose p.hero,.prose-container p.hero{font-size:var(--typo-p-hero);line-height:1.3}.note{color:var(--color-foreground-scale-g);font-size:.95rem!important;letter-spacing:.05rem!important;line-height:1.5!important}.code,.pre,.prose code,.prose pre,.prose-container code,.prose-container pre{border-radius:.25rem;color:var(--color-foreground-scale-e);font-family:monospace;font-size:.9rem;font-weight:bolder;outline:dashed 2px var(--color-background-scale-g);outline-offset:-2px;padding:.2rem .25rem;transition:color,outline-color;transition-duration:.15s}.code:hover,.pre:hover,.prose code:hover,.prose pre:hover,.prose-container code:hover,.prose-container pre:hover{color:var(--color-global-foreground)}.pre,.prose pre,.prose-container pre{padding:.5rem .75rem}.prose table,.prose-container table,.table{border-collapse:collapse}.prose table td,.prose table th,.prose-container table td,.prose-container table th,.table td,.table th{border:1px solid var(--color-background-scale-f);padding:.5rem;vertical-align:top}.prose table tr:nth-child(2n),.prose-container table tr:nth-child(2n),.table tr:nth-child(2n){background-color:var(--color-background-scale-a)}.prose table th,.prose-container table th,.table th{background-color:var(--color-background-scale-c);font-weight:var(--font-weight-normal);letter-spacing:.1em;text-align:start}.prose table td>:last-child,.prose-container table td>:last-child,.table td>:last-child{margin-block-end:0}.ol,.prose ol,.prose ul,.prose-container ol,.prose-container ul,.ul{list-style-type:disc;padding-inline-start:1.25rem}.ol li ol,.ol li ul,.prose ol li ol,.prose ol li ul,.prose ul li ol,.prose ul li ul,.prose-container ol li ol,.prose-container ol li ul,.prose-container ul li ol,.prose-container ul li ul,.ul li ol,.ul li ul{padding-inline-start:2rem}.ol li:not(:last-child) ol:not(p+ol),.ol li:not(:last-child) ul:not(p+ul),.prose ol li:not(:last-child) ol:not(p+ol),.prose ol li:not(:last-child) ul:not(p+ul),.prose ul li:not(:last-child) ol:not(p+ol),.prose ul li:not(:last-child) ul:not(p+ul),.prose-container ol li:not(:last-child) ol:not(p+ol),.prose-container ol li:not(:last-child) ul:not(p+ul),.prose-container ul li:not(:last-child) ol:not(p+ol),.prose-container ul li:not(:last-child) ul:not(p+ul),.ul li:not(:last-child) ol:not(p+ol),.ul li:not(:last-child) ul:not(p+ul){margin-block-end:0}.ol,.prose ol,.prose-container ol{counter-reset:item;list-style-type:none}.ol>li,.prose ol>li,.prose-container ol>li{counter-increment:item}.ol>li::marker,.prose ol>li::marker,.prose-container ol>li::marker{content:counters(item,".") ". "}.img,.prose img,.prose-container img{border:2px solid var(--color-background-scale-e);border-radius:.25rem;margin-left:auto;margin-right:auto;max-height:450px;width:auto}.figure,.prose figure,.prose-container figure{display:table;margin-left:auto;margin-right:auto}.figure img,.prose figure img,.prose-container figure img{display:block;margin:0}.figure img:has(+figcaption),.prose figure img:has(+figcaption),.prose-container figure img:has(+figcaption){border-bottom-left-radius:0;border-bottom-right-radius:0}.figure figcaption,.prose figure figcaption,.prose-container figure figcaption{background-color:var(--color-background-scale-e);border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;caption-side:bottom;display:table-caption;font-size:.85rem;padding:.5rem;text-align:center}.figure figcaption>*,.prose figure figcaption>*,.prose-container figure figcaption>*{font-size:.85rem}.figure figcaption>:last-child,.prose figure figcaption>:last-child,.prose-container figure figcaption>:last-child{margin-block-end:0}.blockquote,.prose blockquote,.prose-container blockquote{background-color:var(--color-background-scale-b);border-radius:.25rem;font-family:serif;font-size:1.1rem;padding:.25rem .75rem}.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6{counter-reset:l1}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2{counter-reset:l2}:where(.prose-numbering-2,.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h2:before{content:counter(l1) ". ";counter-increment:l1}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3{counter-reset:l3}:where(.prose-numbering-3,.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h3:before{content:counter(l1) "." counter(l2) ". ";counter-increment:l2}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4{counter-reset:l4}:where(.prose-numbering-4,.prose-numbering-5,.prose-numbering-6) h4:before{content:counter(l1) "." counter(l2) "." counter(l3) ". ";counter-increment:l3}:where(.prose-numbering-5,.prose-numbering-6) h5{counter-reset:l5}:where(.prose-numbering-5,.prose-numbering-6) h5:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) ". ";counter-increment:l4}.prose-numbering-6 h6{counter-reset:l6}.prose-numbering-6 h6:before{content:counter(l1) "." counter(l2) "." counter(l3) "." counter(l4) "." counter(l5) ". ";counter-increment:l5}}
|
package/package.json
CHANGED