eco-vue-js 0.25.1 → 0.26.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/components/InfiniteList/components/InfiniteListPage.vue.d.ts.map +1 -1
- package/dist/components/InfiniteList/components/InfiniteListPage.vue_vue_type_script_setup_true_lang.js +7 -5
- package/dist/components/Input/WInputOptions.vue.d.ts +5 -8
- package/dist/components/Input/WInputOptions.vue.d.ts.map +1 -1
- package/dist/components/Input/WInputOptions.vue_vue_type_script_setup_true_lang.js +168 -43
- package/dist/components/Input/types.d.ts +25 -12
- package/dist/components/Input/types.d.ts.map +1 -1
- package/dist/components/MenuItem/WMenuItem.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Select/WSelect.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Select/WSelectAsync.vue_vue_type_script_setup_true_lang.js +1 -1
- package/dist/components/Select/components/SelectAsyncList.vue.d.ts +4 -0
- package/dist/components/Select/components/SelectAsyncList.vue.d.ts.map +1 -1
- package/dist/components/Select/components/SelectAsyncList.vue_vue_type_script_setup_true_lang.js +18 -13
- package/dist/components/Select/components/SelectOption.vue.d.ts +16 -0
- package/dist/components/Select/components/SelectOption.vue.d.ts.map +1 -1
- package/dist/components/Select/components/SelectOption.vue_vue_type_script_setup_true_lang.js +3 -1
- package/docs/components/input.md +49 -6
- package/docs/guide/theming.md +5 -5
- package/docs/llms.txt +1 -1
- package/package.json +1 -1
- package/tailwind-base/css/theme.css +9 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfiniteListPage.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListPage.vue"],"names":[],"mappings":"AAiEA;
|
|
1
|
+
{"version":3,"file":"InfiniteListPage.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/InfiniteList/components/InfiniteListPage.vue"],"names":[],"mappings":"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"}
|
|
@@ -93,11 +93,13 @@ var InfiniteListPage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
93
93
|
for (const item of results) {
|
|
94
94
|
const id = props.valueGetter(item);
|
|
95
95
|
const kept = keepById.get(id);
|
|
96
|
-
if (kept)
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
96
|
+
if (kept) {
|
|
97
|
+
keepById.delete(id);
|
|
98
|
+
newSlots.push({
|
|
99
|
+
key: kept.key,
|
|
100
|
+
id
|
|
101
|
+
});
|
|
102
|
+
} else if (isFullReplacement && freeIdx < freed.length) newSlots.push({
|
|
101
103
|
key: freed[freeIdx++].key,
|
|
102
104
|
id
|
|
103
105
|
});
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { InputClearValue, InputOptionsProps } from './types';
|
|
2
|
+
import { SelectOptionComponent, SelectOptionProps } from '../Select/types';
|
|
2
3
|
declare const __VLS_export: <Type extends InputType = "text", Option extends Record<string, any> & {
|
|
3
4
|
id: number;
|
|
4
5
|
} = Record<string, any> & {
|
|
5
6
|
id: number;
|
|
6
|
-
}, ClearValue extends InputClearValue = "">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
7
|
-
props: import('vue').PublicProps & __VLS_PrettifyLocal<InputOptionsProps<Type, Option, ClearValue> & {
|
|
7
|
+
}, QueryParams = unknown, OptionComponent extends SelectOptionComponent<Option> = SelectOptionComponent<Option>, ClearValue extends InputClearValue = "">(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
8
|
+
props: import('vue').PublicProps & __VLS_PrettifyLocal<InputOptionsProps<Type, Option, QueryParams, OptionComponent, ClearValue> & {
|
|
8
9
|
"onUpdate:model-value"?: ((value: (Type extends "number" ? number : string) | null) => any) | undefined;
|
|
9
10
|
}> & (typeof globalThis extends {
|
|
10
11
|
__VLS_PROPS_FALLBACK: infer P;
|
|
@@ -21,12 +22,8 @@ declare const __VLS_export: <Type extends InputType = "text", Option extends Rec
|
|
|
21
22
|
subtitle?: () => void;
|
|
22
23
|
/** Content to the right of the field. */
|
|
23
24
|
right?: () => void;
|
|
24
|
-
/** Content of an option in the menu. Replaces `optionComponent`. */
|
|
25
|
-
option?: (props:
|
|
26
|
-
option: Option;
|
|
27
|
-
selected: boolean;
|
|
28
|
-
model: boolean;
|
|
29
|
-
}) => void;
|
|
25
|
+
/** Content of an option in the menu. Replaces `optionComponent`. `option` is `undefined` on a loading skeleton row. */
|
|
26
|
+
option?: (props: PartialNot<SelectOptionProps<Option>>) => void;
|
|
30
27
|
};
|
|
31
28
|
emit: (e: "update:model-value", value: (Type extends "number" ? number : string) | null) => void;
|
|
32
29
|
}>) => import('vue').VNode & {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WInputOptions.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputOptions.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WInputOptions.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/WInputOptions.vue"],"names":[],"mappings":"AAmKA;AAiVA,OAAO,KAAK,EAAC,eAAe,EAAE,iBAAiB,EAAC,MAAM,SAAS,CAAA;AAC/D,OAAO,KAAK,EAAC,qBAAqB,EAA8B,iBAAiB,EAAC,MAAM,2BAA2B,CAAA;AAanH,QAAA,MAAM,YAAY,GAAK,IAAI,SAAS,SAAS,GAAG,MAAM,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,EAAE,EAAE,MAAM,CAAA;CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;IAAC,EAAE,EAAE,MAAM,CAAA;CAAC,EAAE,WAAW,GAAG,OAAO,EAAE,eAAe,SAAS,qBAAqB,CAAC,MAAM,CAAC,GAAG,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,SAAS,eAAe,GAAG,EAAE,EACpS,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAgnBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;;KAAmC,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;QA5lBT,iCAAiC;gBACzB,MAAM,IAAI;QAClB,+CAA+C;mBACpC,MAAM,IAAI;QACrB,yCAAyC;gBACjC,MAAM,IAAI;QAClB,uHAAuH;iBAC9G,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC,KAAK,IAAI;;cAZ3D,oBAAoB,8DAAsB,IAAI;EAqmBhD,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
|
|
@@ -3,20 +3,31 @@ import { useComponentStates } from "../../utils/useComponentStates.js";
|
|
|
3
3
|
import { useClearValue } from "../../utils/useClearValue.js";
|
|
4
4
|
import WInputSuggest_default from "./WInputSuggest.vue.js";
|
|
5
5
|
import SelectOption_default from "../Select/components/SelectOption.vue.js";
|
|
6
|
-
import
|
|
6
|
+
import SelectAsyncList_default from "../Select/components/SelectAsyncList.vue.js";
|
|
7
|
+
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeProps, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
8
|
+
import { keepPreviousData } from "@tanstack/vue-query";
|
|
7
9
|
//#region src/components/Input/WInputOptions.vue?vue&type=script&setup=true&lang.ts
|
|
8
10
|
var _hoisted_1 = {
|
|
9
11
|
key: 0,
|
|
12
|
+
class: "w-option w-option-padding-y flex items-center truncate font-semibold"
|
|
13
|
+
};
|
|
14
|
+
var _hoisted_2 = { class: "w-option w-option-padding-y flex items-center self-start pr-2" };
|
|
15
|
+
var _hoisted_3 = {
|
|
16
|
+
key: 0,
|
|
17
|
+
class: "w-option w-option-padding-y flex items-center truncate font-semibold"
|
|
18
|
+
};
|
|
19
|
+
var _hoisted_4 = {
|
|
20
|
+
key: 1,
|
|
21
|
+
class: "text-description w-option w-option-padding-y flex items-center"
|
|
22
|
+
};
|
|
23
|
+
var _hoisted_5 = {
|
|
24
|
+
key: 1,
|
|
10
25
|
class: "px-4.25 py-2 first:pt-4 last:pb-4"
|
|
11
26
|
};
|
|
12
|
-
var
|
|
27
|
+
var _hoisted_6 = { class: "w-select-field sm-not:px-3 cursor-default select-none" };
|
|
13
28
|
var WInputOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
14
29
|
__name: "WInputOptions",
|
|
15
30
|
props: {
|
|
16
|
-
options: {},
|
|
17
|
-
valueGetter: {},
|
|
18
|
-
emptyStub: {},
|
|
19
|
-
optionComponent: {},
|
|
20
31
|
mobileTitle: {},
|
|
21
32
|
persist: { type: Boolean },
|
|
22
33
|
closeOnClear: { type: Boolean },
|
|
@@ -88,7 +99,17 @@ var WInputOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
88
99
|
hideTitle: { type: Boolean },
|
|
89
100
|
embedded: { type: Boolean },
|
|
90
101
|
horizontalAlign: {},
|
|
91
|
-
dropdownClass: {}
|
|
102
|
+
dropdownClass: {},
|
|
103
|
+
optionComponent: {},
|
|
104
|
+
optionComponentProps: {},
|
|
105
|
+
options: {},
|
|
106
|
+
useQueryFnOptions: {},
|
|
107
|
+
queryParamsOptions: {},
|
|
108
|
+
searchField: {},
|
|
109
|
+
valueGetter: {},
|
|
110
|
+
emptyStub: {},
|
|
111
|
+
draft: { type: Boolean },
|
|
112
|
+
applyPrefix: {}
|
|
92
113
|
},
|
|
93
114
|
emits: ["update:model-value"],
|
|
94
115
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
@@ -98,15 +119,26 @@ var WInputOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
98
119
|
const { isReadonly, isDisabled } = useComponentStates(props);
|
|
99
120
|
const isOpen = ref(false);
|
|
100
121
|
const inputRef = useTemplateRef("input");
|
|
122
|
+
const listRef = useTemplateRef("list");
|
|
101
123
|
const cursor = ref(-1);
|
|
102
124
|
const isCursorLocked = ref(false);
|
|
103
|
-
const
|
|
125
|
+
const search = ref(props.modelValue ?? null);
|
|
126
|
+
const applyIndex = computed(() => props.options?.length ?? 0);
|
|
127
|
+
const lastIndex = computed(() => props.draft ? applyIndex.value : applyIndex.value - 1);
|
|
128
|
+
const queryParams = computed(() => ({
|
|
129
|
+
...props.queryParamsOptions,
|
|
130
|
+
[props.searchField ?? "search"]: search.value ?? ""
|
|
131
|
+
}));
|
|
132
|
+
watch(() => props.modelValue, (value) => {
|
|
133
|
+
search.value = value ?? null;
|
|
134
|
+
});
|
|
104
135
|
const focused = ref(false);
|
|
105
136
|
const loadingOptionIndex = ref(null);
|
|
106
137
|
const isDisabledComputed = computed(() => props.loading || isReadonly.value || isDisabled.value);
|
|
107
138
|
const close = () => {
|
|
108
139
|
isOpen.value = false;
|
|
109
140
|
focused.value = false;
|
|
141
|
+
if (props.draft) search.value = props.modelValue ?? null;
|
|
110
142
|
};
|
|
111
143
|
const setLoadingOptionIndex = (value) => {
|
|
112
144
|
if (isDisabledComputed.value) return;
|
|
@@ -125,19 +157,33 @@ var WInputOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
125
157
|
};
|
|
126
158
|
const cursorUp = () => {
|
|
127
159
|
if (isDisabledComputed.value) return;
|
|
160
|
+
if (listRef.value) return listRef.value.cursorUp();
|
|
128
161
|
lockCursor();
|
|
129
|
-
cursor.value =
|
|
162
|
+
cursor.value = lastIndex.value < 0 ? -1 : cursor.value < 1 ? lastIndex.value : cursor.value - 1;
|
|
130
163
|
};
|
|
131
164
|
const cursorDown = () => {
|
|
132
165
|
if (isDisabledComputed.value) return;
|
|
166
|
+
if (listRef.value) return listRef.value.cursorDown();
|
|
133
167
|
lockCursor();
|
|
134
|
-
cursor.value =
|
|
168
|
+
cursor.value = lastIndex.value < 0 ? -1 : cursor.value >= lastIndex.value ? 0 : cursor.value + 1;
|
|
135
169
|
};
|
|
136
170
|
const selectCursor = () => {
|
|
137
171
|
if (isDisabledComputed.value) return;
|
|
138
|
-
|
|
172
|
+
if (listRef.value) return listRef.value.selectCursor();
|
|
173
|
+
if (props.draft && (cursor.value === -1 || cursor.value === applyIndex.value)) return apply();
|
|
174
|
+
const value = cursor.value !== -1 ? props.options?.[cursor.value] : void 0;
|
|
139
175
|
if (value) select(value);
|
|
140
176
|
};
|
|
177
|
+
const apply = () => {
|
|
178
|
+
if (isDisabledComputed.value) return;
|
|
179
|
+
updateModelValue(search.value);
|
|
180
|
+
blur();
|
|
181
|
+
};
|
|
182
|
+
const updateSearch = (value) => {
|
|
183
|
+
search.value = value ?? null;
|
|
184
|
+
cursor.value = props.draft ? applyIndex.value : -1;
|
|
185
|
+
if (!props.draft) updateModelValue(value);
|
|
186
|
+
};
|
|
141
187
|
const select = (option) => {
|
|
142
188
|
updateModelValue(props.valueGetter(option));
|
|
143
189
|
blur();
|
|
@@ -159,53 +205,132 @@ var WInputOptions_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
|
|
|
159
205
|
return (_ctx, _cache) => {
|
|
160
206
|
return openBlock(), createBlock(WInputSuggest_default, mergeProps({ ref: "input" }, {
|
|
161
207
|
...props,
|
|
208
|
+
modelValue: search.value,
|
|
162
209
|
clearValue: unref(getClearValue)()
|
|
163
210
|
}, {
|
|
164
211
|
class: _ctx.$attrs.class,
|
|
165
|
-
"onUpdate:modelValue":
|
|
212
|
+
"onUpdate:modelValue": updateSearch,
|
|
213
|
+
"onClick:clear": _cache[3] || (_cache[3] = ($event) => __props.draft && updateModelValue(unref(getClearValue)())),
|
|
166
214
|
"onKeypress:enter": withModifiers(selectCursor, ["stop", "prevent"]),
|
|
167
215
|
"onKeypress:up": withModifiers(cursorUp, ["prevent"]),
|
|
168
216
|
"onKeypress:down": withModifiers(cursorDown, ["prevent"]),
|
|
169
|
-
onOpen: _cache[
|
|
217
|
+
onOpen: _cache[4] || (_cache[4] = ($event) => isOpen.value = true),
|
|
170
218
|
onClose: close,
|
|
171
|
-
onFocus: _cache[
|
|
172
|
-
onBlur: _cache[
|
|
219
|
+
onFocus: _cache[5] || (_cache[5] = ($event) => focused.value = true),
|
|
220
|
+
onBlur: _cache[6] || (_cache[6] = ($event) => focused.value = false)
|
|
173
221
|
}), createSlots({
|
|
174
|
-
content: withCtx(() => [
|
|
175
|
-
|
|
176
|
-
|
|
222
|
+
content: withCtx(() => [__props.useQueryFnOptions ? (openBlock(), createBlock(SelectAsyncList_default, {
|
|
223
|
+
key: 0,
|
|
224
|
+
ref: "list",
|
|
225
|
+
"model-value": __props.modelValue === void 0 || __props.modelValue === null ? [] : [__props.modelValue],
|
|
226
|
+
"use-query-fn": __props.useQueryFnOptions,
|
|
227
|
+
"query-params": queryParams.value,
|
|
228
|
+
loading: __props.loading,
|
|
229
|
+
disabled: isDisabledComputed.value,
|
|
230
|
+
"empty-stub": __props.emptyStub ?? "No suggestion",
|
|
231
|
+
"value-getter": __props.valueGetter,
|
|
232
|
+
"query-options": { placeholderData: unref(keepPreviousData) },
|
|
233
|
+
search: __props.draft ? search.value?.toString() : void 0,
|
|
234
|
+
"allow-create": __props.draft,
|
|
235
|
+
"create-prefix": __props.applyPrefix ?? "Apply:",
|
|
236
|
+
"cursor-on-create": __props.draft,
|
|
237
|
+
"apply-always": "",
|
|
238
|
+
onSelect: _cache[0] || (_cache[0] = (_value, option) => select(option)),
|
|
239
|
+
onUnselect: _cache[1] || (_cache[1] = (_value, option) => select(option)),
|
|
240
|
+
"onCreate:option": apply
|
|
241
|
+
}, {
|
|
242
|
+
default: withCtx(({ option, selected, skeleton: skeletonOption, index }) => [!option && !skeletonOption ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(search.value), 1)) : renderSlot(_ctx.$slots, "option", {
|
|
243
|
+
option,
|
|
244
|
+
selected,
|
|
245
|
+
skeleton: skeletonOption,
|
|
246
|
+
model: false,
|
|
177
247
|
index,
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
248
|
+
search: void 0
|
|
249
|
+
}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), mergeProps(__props.optionComponentProps, {
|
|
250
|
+
option,
|
|
251
|
+
selected,
|
|
252
|
+
skeleton: skeletonOption,
|
|
253
|
+
model: false
|
|
254
|
+
}), null, 16, [
|
|
255
|
+
"option",
|
|
256
|
+
"selected",
|
|
257
|
+
"skeleton"
|
|
258
|
+
]))], void 0, 1)]),
|
|
259
|
+
_: 3
|
|
260
|
+
}, 8, [
|
|
261
|
+
"model-value",
|
|
262
|
+
"use-query-fn",
|
|
263
|
+
"query-params",
|
|
264
|
+
"loading",
|
|
265
|
+
"disabled",
|
|
266
|
+
"empty-stub",
|
|
267
|
+
"value-getter",
|
|
268
|
+
"query-options",
|
|
269
|
+
"search",
|
|
270
|
+
"allow-create",
|
|
271
|
+
"create-prefix",
|
|
272
|
+
"cursor-on-create"
|
|
273
|
+
])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
274
|
+
__props.draft ? (openBlock(), createBlock(SelectOption_default, {
|
|
275
|
+
key: 0,
|
|
276
|
+
index: applyIndex.value,
|
|
277
|
+
"is-selected": false,
|
|
278
|
+
"is-cursor": cursor.value === applyIndex.value,
|
|
181
279
|
scroll: isCursorLocked.value,
|
|
280
|
+
disabled: !search.value,
|
|
182
281
|
class: "first:pt-4 last:pb-4",
|
|
183
|
-
onSelect:
|
|
184
|
-
|
|
185
|
-
setLoadingOptionIndex(index);
|
|
186
|
-
},
|
|
187
|
-
onMouseenter: ($event) => setCursor(index)
|
|
282
|
+
onSelect: apply,
|
|
283
|
+
onMouseenter: _cache[2] || (_cache[2] = ($event) => setCursor(applyIndex.value))
|
|
188
284
|
}, {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), {
|
|
194
|
-
option,
|
|
195
|
-
selected,
|
|
196
|
-
model: false
|
|
197
|
-
}, null, 8, ["option", "selected"]))])]),
|
|
198
|
-
_: 2
|
|
199
|
-
}, 1032, [
|
|
285
|
+
prefix: withCtx(() => [createElementVNode("span", _hoisted_2, toDisplayString(__props.applyPrefix ?? "Apply:"), 1)]),
|
|
286
|
+
default: withCtx(() => [search.value ? (openBlock(), createElementBlock("span", _hoisted_3, toDisplayString(search.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_4, "Start typing.."))]),
|
|
287
|
+
_: 1
|
|
288
|
+
}, 8, [
|
|
200
289
|
"index",
|
|
201
|
-
"is-selected",
|
|
202
290
|
"is-cursor",
|
|
203
|
-
"loading",
|
|
204
291
|
"scroll",
|
|
205
|
-
"
|
|
206
|
-
|
|
207
|
-
])
|
|
208
|
-
|
|
292
|
+
"disabled"
|
|
293
|
+
])) : createCommentVNode("", true),
|
|
294
|
+
!__props.options?.length ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("div", _hoisted_6, toDisplayString(__props.emptyStub ?? "No suggestion"), 1)])) : createCommentVNode("", true),
|
|
295
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
|
|
296
|
+
return openBlock(), createBlock(SelectOption_default, {
|
|
297
|
+
key: option.id,
|
|
298
|
+
index,
|
|
299
|
+
"is-selected": __props.modelValue === __props.valueGetter(option),
|
|
300
|
+
"is-cursor": index === cursor.value,
|
|
301
|
+
loading: loadingOptionIndex.value === index && __props.loading,
|
|
302
|
+
scroll: isCursorLocked.value,
|
|
303
|
+
class: "first:pt-4 last:pb-4",
|
|
304
|
+
onSelect: ($event) => {
|
|
305
|
+
select(option);
|
|
306
|
+
setLoadingOptionIndex(index);
|
|
307
|
+
},
|
|
308
|
+
onMouseenter: ($event) => setCursor(index)
|
|
309
|
+
}, {
|
|
310
|
+
default: withCtx(({ selected }) => [renderSlot(_ctx.$slots, "option", {
|
|
311
|
+
option,
|
|
312
|
+
selected,
|
|
313
|
+
skeleton: false,
|
|
314
|
+
model: false,
|
|
315
|
+
index,
|
|
316
|
+
search: void 0
|
|
317
|
+
}, () => [(openBlock(), createBlock(resolveDynamicComponent(__props.optionComponent), mergeProps({ ref_for: true }, __props.optionComponentProps, {
|
|
318
|
+
option,
|
|
319
|
+
selected,
|
|
320
|
+
model: false
|
|
321
|
+
}), null, 16, ["option", "selected"]))])]),
|
|
322
|
+
_: 2
|
|
323
|
+
}, 1032, [
|
|
324
|
+
"index",
|
|
325
|
+
"is-selected",
|
|
326
|
+
"is-cursor",
|
|
327
|
+
"loading",
|
|
328
|
+
"scroll",
|
|
329
|
+
"onSelect",
|
|
330
|
+
"onMouseenter"
|
|
331
|
+
]);
|
|
332
|
+
}), 128))
|
|
333
|
+
], 64))]),
|
|
209
334
|
_: 2
|
|
210
335
|
}, [
|
|
211
336
|
_ctx.$slots.title ? {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { DropdownMenuProps } from '../DropdownMenu/types';
|
|
2
|
+
import { SelectOptionComponent, SelectOptionComponentProps } from '../Select/types';
|
|
2
3
|
import { FieldWrapperProps } from '../FieldWrapper/types';
|
|
3
4
|
import { WrapSelectionType } from '../../utils/utils';
|
|
4
|
-
import { Component } from 'vue';
|
|
5
5
|
export type InputClearValue = '' | undefined | null;
|
|
6
6
|
export interface InputProps<Type extends InputType, ClearValue extends InputClearValue = ''> extends Omit<FieldWrapperProps, 'modelValue'> {
|
|
7
7
|
/** Field value — a `number` when `type` is `number`, otherwise a `string`. */
|
|
@@ -93,20 +93,32 @@ export interface InputSuggestProps<Type extends InputType, ClearValue extends In
|
|
|
93
93
|
/** Hides the button that opens and closes the menu. */
|
|
94
94
|
hideToggle?: boolean;
|
|
95
95
|
}
|
|
96
|
-
|
|
97
|
-
/** Suggestions shown in the menu.
|
|
96
|
+
interface InputOptionsStatic<Option> {
|
|
97
|
+
/** Suggestions shown in the menu. Filter them by the typed text yourself. Use either this or `useQueryFnOptions`. */
|
|
98
98
|
options: Option[];
|
|
99
|
+
useQueryFnOptions?: never;
|
|
100
|
+
queryParamsOptions?: never;
|
|
101
|
+
searchField?: never;
|
|
102
|
+
}
|
|
103
|
+
interface InputOptionsPaginated<Option, QueryParams> {
|
|
104
|
+
options?: never;
|
|
105
|
+
/** Paginated query that loads the suggestions, page by page as the menu scrolls. The typed text is sent in `searchField`. Use either this or `options`. */
|
|
106
|
+
useQueryFnOptions: UseQueryDefault<PaginatedResponse<Option>, QueryParams>;
|
|
107
|
+
/** Parameters for `useQueryFnOptions`. */
|
|
108
|
+
queryParamsOptions: QueryParams;
|
|
109
|
+
/** Query parameter that receives the typed text. Defaults to `search`. */
|
|
110
|
+
searchField?: keyof QueryParams;
|
|
111
|
+
}
|
|
112
|
+
export type InputOptionsProps<Type extends InputType, Option, QueryParams, OptionComponent extends SelectOptionComponent<Option>, ClearValue extends InputClearValue = ''> = InputSuggestProps<Type, ClearValue> & SelectOptionComponentProps<Option, OptionComponent> & (InputOptionsStatic<Option> | InputOptionsPaginated<Option, QueryParams>) & {
|
|
99
113
|
/** Value an option puts into the input. */
|
|
100
|
-
valueGetter: (option: Option) =>
|
|
101
|
-
/** Text shown when
|
|
114
|
+
valueGetter: (option: Option) => NonNullable<InputSuggestProps<Type>['modelValue']>;
|
|
115
|
+
/** Text shown when there are no suggestions. Defaults to "No suggestion". */
|
|
102
116
|
emptyStub?: string;
|
|
103
|
-
/**
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}>;
|
|
109
|
-
}
|
|
117
|
+
/** Treats the typed text as a draft: it only drives the suggestions, and the value changes when a suggestion is picked, on Enter, or from the apply row at the top of the menu. The draft is dropped when the menu closes. Clearing applies at once. */
|
|
118
|
+
draft?: boolean;
|
|
119
|
+
/** Label before the typed text in the apply row of a `draft` input. Defaults to "Apply:". */
|
|
120
|
+
applyPrefix?: string;
|
|
121
|
+
};
|
|
110
122
|
export interface InputDateProps extends Omit<InputSuggestProps<'text'>, 'modelValue' | 'clearValue'> {
|
|
111
123
|
/** Selected date. Typed text is parsed into a date as it changes. */
|
|
112
124
|
modelValue?: Date | undefined;
|
|
@@ -166,4 +178,5 @@ export type TextPart = {
|
|
|
166
178
|
class?: string;
|
|
167
179
|
id?: string;
|
|
168
180
|
} | string;
|
|
181
|
+
export {};
|
|
169
182
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,uBAAuB,CAAA;AAC5D,OAAO,KAAK,EAAC,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -45,7 +45,7 @@ var WMenuItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
|
|
|
45
45
|
"hover:text-tone cursor-pointer": !__props.disabled && !__props.loading,
|
|
46
46
|
"cursor-not-allowed opacity-50": __props.disabled,
|
|
47
47
|
"text-tone": __props.active && !__props.disabled,
|
|
48
|
-
"text-
|
|
48
|
+
"text-accent": !__props.active && !toned.value || __props.disabled,
|
|
49
49
|
"cursor-progress": __props.loading
|
|
50
50
|
}],
|
|
51
51
|
disabled: __props.disabled,
|
|
@@ -4,8 +4,8 @@ import { useComponentStates } from "../../utils/useComponentStates.js";
|
|
|
4
4
|
import { ApiError } from "../../utils/api.js";
|
|
5
5
|
import WInputSuggest_default from "../Input/WInputSuggest.vue.js";
|
|
6
6
|
import SelectOption_default from "./components/SelectOption.vue.js";
|
|
7
|
-
import SelectOptionPrefix_default from "./components/SelectOptionPrefix.vue.js";
|
|
8
7
|
import { useScrollSelected } from "./models/useScrollSelected.js";
|
|
8
|
+
import SelectOptionPrefix_default from "./components/SelectOptionPrefix.vue.js";
|
|
9
9
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, mergeProps, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toRef, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
10
10
|
//#region src/components/Select/WSelect.vue?vue&type=script&setup=true&lang.ts
|
|
11
11
|
var _hoisted_1 = { role: "listbox" };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { useIsMobile } from "../../utils/mobile.js";
|
|
2
2
|
import { useComponentStates } from "../../utils/useComponentStates.js";
|
|
3
3
|
import WInputSuggest_default from "../Input/WInputSuggest.vue.js";
|
|
4
|
-
import "../../utils/useDefaultQuery.js";
|
|
5
4
|
import SelectAsyncList_default from "./components/SelectAsyncList.vue.js";
|
|
5
|
+
import "../../utils/useDefaultQuery.js";
|
|
6
6
|
import SelectAsyncPrefix_default from "./components/SelectAsyncPrefix.vue.js";
|
|
7
7
|
import { computed, createBlock, createCommentVNode, createSlots, createVNode, defineComponent, guardReactiveProps, mergeProps, nextTick, normalizeProps, openBlock, ref, renderSlot, resolveDynamicComponent, unref, useTemplateRef, watch, withCtx, withModifiers } from "vue";
|
|
8
8
|
import { keepPreviousData } from "@tanstack/vue-query";
|
|
@@ -13,6 +13,9 @@ declare const __VLS_export: <Model extends number | string, Data extends Default
|
|
|
13
13
|
selectOnly?: boolean;
|
|
14
14
|
unselectOnly?: boolean;
|
|
15
15
|
allowCreate?: boolean;
|
|
16
|
+
createPrefix?: string;
|
|
17
|
+
/** Puts the cursor on the create row instead of the first option, so Enter creates. */
|
|
18
|
+
cursorOnCreate?: boolean;
|
|
16
19
|
hideOptionIcon?: boolean;
|
|
17
20
|
valueGetter: (data: Data) => Model;
|
|
18
21
|
queryOptions?: Partial<Parameters<UseQueryDefault<PaginatedResponse<Data>, QueryParams>>[1]>;
|
|
@@ -23,6 +26,7 @@ declare const __VLS_export: <Model extends number | string, Data extends Default
|
|
|
23
26
|
scrollSelected?: boolean;
|
|
24
27
|
/** Also puts the cursor on that option. */
|
|
25
28
|
cursorSelected?: boolean;
|
|
29
|
+
applyAlways?: boolean;
|
|
26
30
|
} & {
|
|
27
31
|
onSelect?: ((value: Model, data: Data) => any) | undefined;
|
|
28
32
|
onUnselect?: ((value: Model, data: Data) => any) | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectAsyncList.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectAsyncList.vue"],"names":[],"mappings":"AA2HA;
|
|
1
|
+
{"version":3,"file":"SelectAsyncList.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectAsyncList.vue"],"names":[],"mappings":"AA2HA;AAuRA,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAY/C,QAAA,MAAM,YAAY,GAAK,KAAK,SAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,WAAW,EAAE,WAAW,EAC1F,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,gBAAgB,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EAClE;WAmkBO,OAAO,KAAK,EAAE,WAAW,GAAG,mBAAmB,CAAC;oBAjkB1C,KAAK,EAAE;oBACP,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;qBACpD,WAAW;kBACd,OAAO;mBACN,OAAO;qBACL,OAAO;wBACJ,CAAC,MAAM,WAAW,CAAC,EAAE;oBACzB,OAAO;oBACP,MAAM;qBACL,OAAO;uBACL,OAAO;sBACR,OAAO;uBACN,MAAM;QACrB,uFAAuF;yBACtE,OAAO;yBACP,OAAO;qBACX,CAAC,IAAI,EAAE,IAAI,KAAK,KAAK;uBACnB,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBAC5E,OAAO;iBACd,MAAM;kBACL,OAAO;QACjB,2HAA2H;yBAC1G,OAAO;QACxB,2CAA2C;yBAC1B,OAAO;sBACV,OAAO;;;;;;KAwiBoE,CAAC,GAAG,CAAC,OAAO,UAAU,SAAS;QAAE,oBAAoB,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,CAAC,GAAG,EAAE,CAAC;YAC5J,CAAC,OAAO,EAAE,OAAO,KAAK,EAAE,gBAAgB;;;;MAAsB,KAAK,IAAI;WACxE,GAAG;;kBAxbC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI;kBACpD,MAAM,IAAI;;;YA9GhB,QAAQ,SAAS,KAAK,QAAQ,IAAI,GAAG,IAAI;YACzC,UAAU,SAAS,KAAK,QAAQ,IAAI,GAAG,IAAI;YAC3C,cAAc,SAAS,MAAM,GAAG,IAAI;YACpC,eAAe,GAAG,IAAI;;EAsiBxB,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAA;CAAI,CAAC;wBACpE,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,CAAC,SAAS,GAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG;KAAG,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,CAAC,GAAG,EAAE,CAAC"}
|
package/dist/components/Select/components/SelectAsyncList.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -2,14 +2,15 @@ import { debounce } from "../../../utils/utils.js";
|
|
|
2
2
|
import WInfiniteList_default from "../../InfiniteList/WInfiniteList.vue.js";
|
|
3
3
|
import SelectOption_default from "./SelectOption.vue.js";
|
|
4
4
|
import { useScrollSelected } from "../models/useScrollSelected.js";
|
|
5
|
-
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref,
|
|
5
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, withCtx } from "vue";
|
|
6
6
|
//#region src/components/Select/components/SelectAsyncList.vue?vue&type=script&setup=true&lang.ts
|
|
7
7
|
var _hoisted_1 = { role: "listbox" };
|
|
8
|
-
var _hoisted_2 = {
|
|
8
|
+
var _hoisted_2 = { class: "w-option w-option-padding-y flex items-center self-start pr-2" };
|
|
9
|
+
var _hoisted_3 = {
|
|
9
10
|
key: 1,
|
|
10
11
|
class: "text-description w-option w-option-padding-y flex items-center"
|
|
11
12
|
};
|
|
12
|
-
var
|
|
13
|
+
var _hoisted_4 = { class: "w-option flex cursor-default select-none items-center" };
|
|
13
14
|
var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
|
|
14
15
|
__name: "SelectAsyncList",
|
|
15
16
|
props: {
|
|
@@ -25,6 +26,8 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
25
26
|
selectOnly: { type: Boolean },
|
|
26
27
|
unselectOnly: { type: Boolean },
|
|
27
28
|
allowCreate: { type: Boolean },
|
|
29
|
+
createPrefix: {},
|
|
30
|
+
cursorOnCreate: { type: Boolean },
|
|
28
31
|
hideOptionIcon: { type: Boolean },
|
|
29
32
|
valueGetter: { type: Function },
|
|
30
33
|
queryOptions: {},
|
|
@@ -32,7 +35,8 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
32
35
|
search: {},
|
|
33
36
|
reverse: { type: Boolean },
|
|
34
37
|
scrollSelected: { type: Boolean },
|
|
35
|
-
cursorSelected: { type: Boolean }
|
|
38
|
+
cursorSelected: { type: Boolean },
|
|
39
|
+
applyAlways: { type: Boolean }
|
|
36
40
|
},
|
|
37
41
|
emits: [
|
|
38
42
|
"select",
|
|
@@ -43,7 +47,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
43
47
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
44
48
|
const props = __props;
|
|
45
49
|
const emit = __emit;
|
|
46
|
-
const
|
|
50
|
+
const selectCursorTrigger = ref(0);
|
|
47
51
|
const cursor = ref(void 0);
|
|
48
52
|
const cursorPrevious = ref(void 0);
|
|
49
53
|
const cursorNext = ref(void 0);
|
|
@@ -52,7 +56,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
52
56
|
const firstItem = ref();
|
|
53
57
|
const lastItem = ref();
|
|
54
58
|
const count = ref(0);
|
|
55
|
-
const isModelValueSearch = computed(() => !!props.search && props.modelValue.includes(props.search));
|
|
59
|
+
const isModelValueSearch = computed(() => !props.applyAlways && !!props.search && props.modelValue.includes(props.search));
|
|
56
60
|
const setLoadingOption = (value) => {
|
|
57
61
|
loadingOption.value = value;
|
|
58
62
|
};
|
|
@@ -90,7 +94,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
90
94
|
if (props.allowCreate) emit("create:option");
|
|
91
95
|
return;
|
|
92
96
|
}
|
|
93
|
-
|
|
97
|
+
selectCursorTrigger.value++;
|
|
94
98
|
};
|
|
95
99
|
const { isScrollSelected, takeSelected } = useScrollSelected(() => props.scrollSelected, () => props.search);
|
|
96
100
|
const scrollToSelected = (value, scroll) => {
|
|
@@ -127,7 +131,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
127
131
|
scroll: isCursorLocked.value,
|
|
128
132
|
previous: lastItem.value,
|
|
129
133
|
next: firstItem.value,
|
|
130
|
-
first: count.value === 0,
|
|
134
|
+
first: __props.cursorOnCreate || count.value === 0,
|
|
131
135
|
"is-no-cursor": cursor.value === void 0,
|
|
132
136
|
"hide-option-icon": __props.hideOptionIcon,
|
|
133
137
|
disabled: !__props.search || isModelValueSearch.value,
|
|
@@ -143,7 +147,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
143
147
|
"onUpdate:next": _cache[4] || (_cache[4] = ($event) => cursorNext.value = $event),
|
|
144
148
|
onUnmounted: _cache[5] || (_cache[5] = ($event) => updateCursor(void 0))
|
|
145
149
|
}, {
|
|
146
|
-
prefix: withCtx(() => [
|
|
150
|
+
prefix: withCtx(() => [createElementVNode("span", _hoisted_2, toDisplayString(__props.createPrefix ?? "new:"), 1)]),
|
|
147
151
|
default: withCtx(() => [__props.search && !isModelValueSearch.value ? renderSlot(_ctx.$slots, "default", {
|
|
148
152
|
option: void 0,
|
|
149
153
|
selected: false,
|
|
@@ -151,7 +155,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
151
155
|
search: __props.search,
|
|
152
156
|
model: false,
|
|
153
157
|
index: void 0
|
|
154
|
-
}, void 0, void 0, 0) : (openBlock(), createElementBlock("div",
|
|
158
|
+
}, void 0, void 0, 0) : (openBlock(), createElementBlock("div", _hoisted_3, " Start typing.. "))]),
|
|
155
159
|
_: 3
|
|
156
160
|
}, 8, [
|
|
157
161
|
"is-cursor",
|
|
@@ -181,7 +185,6 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
181
185
|
})
|
|
182
186
|
}, {
|
|
183
187
|
default: withCtx(({ item, skeleton, previous, next, first, last, index }) => [createVNode(SelectOption_default, {
|
|
184
|
-
ref: "option",
|
|
185
188
|
index,
|
|
186
189
|
"is-selected": !skeleton && __props.modelValue.includes(__props.valueGetter(item)),
|
|
187
190
|
"is-cursor": !skeleton && __props.valueGetter(item) === cursor.value,
|
|
@@ -192,9 +195,10 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
192
195
|
last,
|
|
193
196
|
previous: first && __props.allowCreate ? null : previous ? __props.valueGetter(previous) : void 0,
|
|
194
197
|
next: last && __props.allowCreate ? null : next ? __props.valueGetter(next) : void 0,
|
|
195
|
-
"is-no-cursor": cursor.value === void 0,
|
|
198
|
+
"is-no-cursor": cursor.value === void 0 && !__props.cursorOnCreate,
|
|
196
199
|
"hide-option-icon": __props.hideOptionIcon,
|
|
197
200
|
reverse: __props.reverse,
|
|
201
|
+
"select-cursor-trigger": selectCursorTrigger.value,
|
|
198
202
|
"scroll-selected": unref(isScrollSelected),
|
|
199
203
|
class: normalizeClass({
|
|
200
204
|
"pt---w-select-option-padding": !__props.noPadding && first && !__props.allowCreate,
|
|
@@ -235,6 +239,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
235
239
|
"is-no-cursor",
|
|
236
240
|
"hide-option-icon",
|
|
237
241
|
"reverse",
|
|
242
|
+
"select-cursor-trigger",
|
|
238
243
|
"scroll-selected",
|
|
239
244
|
"class",
|
|
240
245
|
"onSelect",
|
|
@@ -246,7 +251,7 @@ var SelectAsyncList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
|
|
|
246
251
|
"onUpdate:last",
|
|
247
252
|
"onScroll:selected"
|
|
248
253
|
])]),
|
|
249
|
-
empty: withCtx(() => [createElementVNode("div", { class: normalizeClass(["w-select-option pb---w-select-option-padding", { "pt---w-select-option-padding": !__props.noPadding && !__props.allowCreate }]) }, [createElementVNode("div",
|
|
254
|
+
empty: withCtx(() => [createElementVNode("div", { class: normalizeClass(["w-select-option pb---w-select-option-padding", { "pt---w-select-option-padding": !__props.noPadding && !__props.allowCreate }]) }, [createElementVNode("div", _hoisted_4, toDisplayString(__props.emptyStub ?? (__props.search ? "No match" : "Nothing to show")), 1)], 2)]),
|
|
250
255
|
_: 3
|
|
251
256
|
}, 8, [
|
|
252
257
|
"use-query-fn",
|
|
@@ -16,6 +16,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
16
16
|
reverse?: boolean;
|
|
17
17
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
18
18
|
scrollSelected?: boolean;
|
|
19
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
20
|
+
selectCursorTrigger?: number;
|
|
19
21
|
} & {
|
|
20
22
|
onSelect?: (() => any) | undefined;
|
|
21
23
|
onMouseenter?: ((value: MouseEvent) => any) | undefined;
|
|
@@ -54,6 +56,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
54
56
|
reverse?: boolean;
|
|
55
57
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
56
58
|
scrollSelected?: boolean;
|
|
59
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
60
|
+
selectCursorTrigger?: number;
|
|
57
61
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">, import('vue').Ref<import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
58
62
|
isSelected: boolean;
|
|
59
63
|
isCursor?: boolean;
|
|
@@ -71,6 +75,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
71
75
|
reverse?: boolean;
|
|
72
76
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
73
77
|
scrollSelected?: boolean;
|
|
78
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
79
|
+
selectCursorTrigger?: number;
|
|
74
80
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">, import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
75
81
|
isSelected: boolean;
|
|
76
82
|
isCursor?: boolean;
|
|
@@ -88,6 +94,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
88
94
|
reverse?: boolean;
|
|
89
95
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
90
96
|
scrollSelected?: boolean;
|
|
97
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
98
|
+
selectCursorTrigger?: number;
|
|
91
99
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">>, [import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
92
100
|
isSelected: boolean;
|
|
93
101
|
isCursor?: boolean;
|
|
@@ -105,6 +113,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
105
113
|
reverse?: boolean;
|
|
106
114
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
107
115
|
scrollSelected?: boolean;
|
|
116
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
117
|
+
selectCursorTrigger?: number;
|
|
108
118
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">] extends [import('vue').Ref<any, any>] ? import('vue').Ref<any, any> & import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
109
119
|
isSelected: boolean;
|
|
110
120
|
isCursor?: boolean;
|
|
@@ -122,6 +132,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
122
132
|
reverse?: boolean;
|
|
123
133
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
124
134
|
scrollSelected?: boolean;
|
|
135
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
136
|
+
selectCursorTrigger?: number;
|
|
125
137
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index"> : import('vue').Ref<import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
126
138
|
isSelected: boolean;
|
|
127
139
|
isCursor?: boolean;
|
|
@@ -139,6 +151,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
139
151
|
reverse?: boolean;
|
|
140
152
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
141
153
|
scrollSelected?: boolean;
|
|
154
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
155
|
+
selectCursorTrigger?: number;
|
|
142
156
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">, import('@vue/reactivity').ToRefValue<import('vue').DefineProps<import('@vue/shared').LooseRequired<{
|
|
143
157
|
isSelected: boolean;
|
|
144
158
|
isCursor?: boolean;
|
|
@@ -156,6 +170,8 @@ declare const __VLS_export: <Model extends number | string>(__VLS_props: NonNull
|
|
|
156
170
|
reverse?: boolean;
|
|
157
171
|
/** Emits `scroll:selected` once the option shows as selected — set while the menu opens. */
|
|
158
172
|
scrollSelected?: boolean;
|
|
173
|
+
/** Picks the option when this number changes while it has the cursor. */
|
|
174
|
+
selectCursorTrigger?: number;
|
|
159
175
|
}>, "scroll" | "reverse" | "skeleton" | "disabled" | "loading" | "hideOptionIcon" | "isSelected" | "first" | "last" | "isCursor" | "isNoCursor" | "scrollSelected" | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "next" : never) | (Model | null | undefined extends boolean | undefined ? undefined extends undefined ? never : "previous" : never)>, "index">>>;
|
|
160
176
|
}>) => void;
|
|
161
177
|
attrs: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectOption.vue"],"names":[],"mappings":"AAgDA;
|
|
1
|
+
{"version":3,"file":"SelectOption.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/SelectOption.vue"],"names":[],"mappings":"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"}
|
package/dist/components/Select/components/SelectOption.vue_vue_type_script_setup_true_lang.js
CHANGED
|
@@ -25,7 +25,8 @@ var SelectOption_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
|
|
|
25
25
|
disabled: { type: Boolean },
|
|
26
26
|
index: {},
|
|
27
27
|
reverse: { type: Boolean },
|
|
28
|
-
scrollSelected: { type: Boolean }
|
|
28
|
+
scrollSelected: { type: Boolean },
|
|
29
|
+
selectCursorTrigger: {}
|
|
29
30
|
},
|
|
30
31
|
emits: [
|
|
31
32
|
"select",
|
|
@@ -54,6 +55,7 @@ var SelectOption_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
|
|
|
54
55
|
if (!props.isCursor) return;
|
|
55
56
|
toggle();
|
|
56
57
|
};
|
|
58
|
+
watch(() => props.selectCursorTrigger, toggleCursor);
|
|
57
59
|
const scrollIntoView = () => {
|
|
58
60
|
if (elementRef.value) scrollInParent(elementRef.value);
|
|
59
61
|
};
|
package/docs/components/input.md
CHANGED
|
@@ -150,7 +150,7 @@ const isEmail: ValidateFn = value => typeof value === 'string' && value.includes
|
|
|
150
150
|
>
|
|
151
151
|
<template #option="{option}">
|
|
152
152
|
<div class="w-option flex items-center">
|
|
153
|
-
{{ option
|
|
153
|
+
{{ option?.emoji }} {{ option?.name }}
|
|
154
154
|
</div>
|
|
155
155
|
</template>
|
|
156
156
|
</WInputOptions>
|
|
@@ -180,6 +180,43 @@ const filtered = computed(() => plants.filter(item => item.name.toLowerCase().in
|
|
|
180
180
|
</script>
|
|
181
181
|
```
|
|
182
182
|
|
|
183
|
+
The suggestions can come from a paginated query instead: pass `useQueryFnOptions` and `queryParamsOptions` in place of `options`. The typed text is sent in `searchField` (`search` by default), more pages load as the menu scrolls, and `optionComponent` takes the same components as `WSelectAsync`. The value stays free text — a suggestion only fills it in.
|
|
184
|
+
|
|
185
|
+
With `draft`, typing changes only the suggestions, not the value. An apply row at the top of the menu shows the typed text; it, Enter, or a picked suggestion sets the value, and closing the menu drops the draft. Use it where every change is costly, like a list filter.
|
|
186
|
+
|
|
187
|
+
```vue
|
|
188
|
+
<template>
|
|
189
|
+
<WInputOptions
|
|
190
|
+
v-model="variety"
|
|
191
|
+
title="Variety"
|
|
192
|
+
placeholder="Type any name or pick a known one"
|
|
193
|
+
:use-query-fn-options="varietyModelApi.paginated.use"
|
|
194
|
+
:query-params-options="{}"
|
|
195
|
+
:value-getter="option => option.name"
|
|
196
|
+
:option-component="OptionVariety"
|
|
197
|
+
empty-stub="No known variety"
|
|
198
|
+
draft
|
|
199
|
+
allow-clear
|
|
200
|
+
class="max-w-xl"
|
|
201
|
+
/>
|
|
202
|
+
|
|
203
|
+
<p class="text-sm text-description">
|
|
204
|
+
Model: {{ variety || '—' }}
|
|
205
|
+
</p>
|
|
206
|
+
</template>
|
|
207
|
+
|
|
208
|
+
<script lang="ts" setup>
|
|
209
|
+
import {ref} from 'vue'
|
|
210
|
+
|
|
211
|
+
import WInputOptions from 'eco-vue-js/dist/components/Input/WInputOptions.vue'
|
|
212
|
+
|
|
213
|
+
import {varietyModelApi} from '../../../Select/docs/examples/api/garden'
|
|
214
|
+
import OptionVariety from '../../../Select/docs/examples/parts/OptionVariety.vue'
|
|
215
|
+
|
|
216
|
+
const variety = ref<string | null>()
|
|
217
|
+
</script>
|
|
218
|
+
```
|
|
219
|
+
|
|
183
220
|
## Date
|
|
184
221
|
|
|
185
222
|
`WInputDate` binds a `Date` and opens a calendar. The user can also type a date; `minDate` and `maxDate` limit both.
|
|
@@ -532,10 +569,6 @@ import WInputOptions from 'eco-vue-js/dist/components/Input/WInputOptions.vue'
|
|
|
532
569
|
|
|
533
570
|
| Prop | Type | Default | Description |
|
|
534
571
|
| --- | --- | --- | --- |
|
|
535
|
-
| `options` | `Option[]` | **required** | Suggestions shown in the menu. Picking one sets the value and blurs the input. |
|
|
536
|
-
| `valueGetter` | `(option: Option) => (Type extends "number" ? number : string) \| null` | **required** | Value an option puts into the input. |
|
|
537
|
-
| `emptyStub` | `string` | — | Text shown when `options` is empty. Defaults to "No suggestion". |
|
|
538
|
-
| `optionComponent` | `Component<{ option: Option; selected?: boolean \| undefined; model?: boolean \| undefined; }>` | — | Renders an option in the menu. The `option` slot replaces it. |
|
|
539
572
|
| `mobileTitle` | `string` | — | Title for the mobile bottom sheet the menu opens in. Defaults to `title`. |
|
|
540
573
|
| `persist` | `boolean` | — | Keeps the menu open when the input loses focus. |
|
|
541
574
|
| `closeOnClear` | `boolean` | — | Closes the menu when the value is cleared. |
|
|
@@ -576,8 +609,18 @@ import WInputOptions from 'eco-vue-js/dist/components/Input/WInputOptions.vue'
|
|
|
576
609
|
| `debounce` | `number` | — | With `async`, also saves after this many ms without typing, showing a progress bar under the text. |
|
|
577
610
|
| `hideDebounce` | `boolean` | — | Hides the `debounce` progress bar. |
|
|
578
611
|
| `explicit` | `boolean` | — | With `async`, shows Save and Cancel buttons while there are unsaved edits. Always on for `textarea` and `textSecure`. |
|
|
612
|
+
| `options` | `Option[]` | — | Suggestions shown in the menu. Filter them by the typed text yourself. Use either this or `useQueryFnOptions`. |
|
|
613
|
+
| `useQueryFnOptions` | `UseQueryDefault<PaginatedResponse<Option>, QueryParams>` | — | Paginated query that loads the suggestions, page by page as the menu scrolls. The typed text is sent in `searchField`. Use either this or `options`. |
|
|
614
|
+
| `queryParamsOptions` | `QueryParams` | — | Parameters for `useQueryFnOptions`. |
|
|
615
|
+
| `searchField` | `keyof QueryParams` | — | Query parameter that receives the typed text. Defaults to `search`. |
|
|
616
|
+
| `valueGetter` | `(option: Option) => (Type extends "number" ? number : string) & {}` | **required** | Value an option puts into the input. |
|
|
617
|
+
| `emptyStub` | `string` | — | Text shown when there are no suggestions. Defaults to "No suggestion". |
|
|
618
|
+
| `draft` | `boolean` | — | Treats the typed text as a draft: it only drives the suggestions, and the value changes when a suggestion is picked, on Enter, or from the apply row at the top of the menu. The draft is dropped when the menu closes. Clearing applies at once. |
|
|
619
|
+
| `applyPrefix` | `string` | — | Label before the typed text in the apply row of a `draft` input. Defaults to "Apply:". |
|
|
579
620
|
| `horizontalAlign` | `HorizontalAlign` | — | Horizontal placement relative to the parent. When it does not fit the viewport, the next placement in order is tried. |
|
|
580
621
|
| `dropdownClass` | `string` | — | Classes for the menu's content box. Defaults to `w-max`. |
|
|
622
|
+
| `optionComponent` | `OptionComponent` | — | Component that renders an option, in the menu and in the selected chips. Receives `option`, `selected`, `model` and `search`. The `option` slot replaces it. |
|
|
623
|
+
| `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
|
|
581
624
|
|
|
582
625
|
::: details Inherited from `src/components/FieldWrapper/types.ts` (21)
|
|
583
626
|
|
|
@@ -620,7 +663,7 @@ import WInputOptions from 'eco-vue-js/dist/components/Input/WInputOptions.vue'
|
|
|
620
663
|
| `title` | — | Replaces the `title` text. |
|
|
621
664
|
| `subtitle` | — | Content between the title and the field. |
|
|
622
665
|
| `right` | — | Content to the right of the field. |
|
|
623
|
-
| `option` | `
|
|
666
|
+
| `option` | `PartialNot<SelectOptionProps<Option>>` | Content of an option in the menu. Replaces `optionComponent`. `option` is `undefined` on a loading skeleton row. |
|
|
624
667
|
|
|
625
668
|
### WInputDate
|
|
626
669
|
|
package/docs/guide/theming.md
CHANGED
|
@@ -212,7 +212,7 @@ To make a theme from a description — "a warm, rounded theme for a finance dash
|
|
|
212
212
|
|
|
213
213
|
| Key | Default | Controls |
|
|
214
214
|
| --- | --- | --- |
|
|
215
|
-
| `color-primary` | `oklch(
|
|
215
|
+
| `color-primary` | `oklch(62% 0.17 286.8)` | Fills, links, focus and selection |
|
|
216
216
|
| `color-primary-dark` | `primary` | The same in dark mode |
|
|
217
217
|
| `color-primary-light` | `primary` 10% over `default` | List headers and the backdrop in light mode |
|
|
218
218
|
| `color-primary-darkest` | `primary-dark` 20% over `default-dark` | The same in dark mode |
|
|
@@ -220,10 +220,10 @@ To make a theme from a description — "a warm, rounded theme for a finance dash
|
|
|
220
220
|
| `color-default` | `#ffffff` | Page and card background in light mode |
|
|
221
221
|
| `color-default-dark` | `oklch(21% 0.006 285.885)`, zinc's 900 | Page and card background in dark mode |
|
|
222
222
|
| `color-black-default` | `#333333` | Main text in light mode |
|
|
223
|
-
| `color-negative` | `oklch(
|
|
224
|
-
| `color-positive` | `oklch(
|
|
225
|
-
| `color-warning` | `oklch(
|
|
226
|
-
| `color-info` | `oklch(
|
|
223
|
+
| `color-negative` | `oklch(64% 0.2 24.1)` | Errors and destructive actions |
|
|
224
|
+
| `color-positive` | `oklch(69% 0.148 150)` | Success |
|
|
225
|
+
| `color-warning` | `oklch(85% 0.16 85)` | Warnings; black text on the fill |
|
|
226
|
+
| `color-info` | `oklch(63% 0.16 262.6)` | Information |
|
|
227
227
|
| `color-*-dark` | the light value | Each status color in dark mode |
|
|
228
228
|
| `color-data-*` | Tailwind's hues at mid lightness: white text on all but orange and amber; gray is the scale's 500 | [Data palette](#data-palette) |
|
|
229
229
|
| `role-*`, `role-*-dark` | see [Roles](#roles) | One role, per mode |
|
package/docs/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eco-vue-js
|
|
2
2
|
|
|
3
|
-
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.
|
|
3
|
+
> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.0, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
|
|
4
4
|
|
|
5
5
|
Release notes, for what changed between versions: https://github.com/rsmple/eco-vue-js/releases. The docs site, with live demos: https://rsmple.github.io/eco-vue-js/
|
|
6
6
|
|
package/package.json
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* Fills are dark enough for white text and light enough to stand out on the dark surface, so one value serves both
|
|
13
13
|
* modes; text shades and the text on fills are derived from them (roles.css).
|
|
14
14
|
*/
|
|
15
|
-
--color-primary: oklch(
|
|
15
|
+
--color-primary: oklch(62% 0.17 286.8);
|
|
16
16
|
--color-primary-dark: var(--color-primary);
|
|
17
17
|
--color-primary-light: color-mix(in oklab, var(--color-primary) 7%, var(--color-default));
|
|
18
18
|
--color-primary-darkest: color-mix(in oklab, var(--color-primary-dark) 10%, var(--color-default-dark));
|
|
@@ -46,13 +46,17 @@
|
|
|
46
46
|
--color-slate-900: oklch(20.8% 0.042 265.755);
|
|
47
47
|
--color-slate-950: oklch(12.9% 0.042 264.695);
|
|
48
48
|
|
|
49
|
-
|
|
49
|
+
/*
|
|
50
|
+
* Status fills are lighter than the primary: white text on them keeps APCA Lc 64–69 rather than 80, still clear of
|
|
51
|
+
* the 60 it needs, so a badge or an alert doesn't weigh more than the content beside it.
|
|
52
|
+
*/
|
|
53
|
+
--color-negative: oklch(64% 0.2 24.1);
|
|
50
54
|
--color-negative-dark: var(--color-negative);
|
|
51
|
-
--color-positive: oklch(
|
|
55
|
+
--color-positive: oklch(69% 0.148 150);
|
|
52
56
|
--color-positive-dark: var(--color-positive);
|
|
53
|
-
--color-warning: oklch(
|
|
57
|
+
--color-warning: oklch(85% 0.16 85);
|
|
54
58
|
--color-warning-dark: var(--color-warning);
|
|
55
|
-
--color-info: oklch(
|
|
59
|
+
--color-info: oklch(63% 0.16 262.6);
|
|
56
60
|
--color-info-dark: var(--color-info);
|
|
57
61
|
|
|
58
62
|
/*
|