eco-vue-js 0.26.19 → 0.26.21

package/dist/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"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"}

package/dist/utils/utils.js

@@ -20,7 +20,7 @@ var scrollInParent = (element, { block = "nearest", behavior, ifNeeded = false }
 	const delta = block === "start" ? top : block === "center" ? top - (parent.clientHeight - height) / 2 : top < 0 ? top : top + height - parent.clientHeight;
 	parent.scrollTo({
 		top: parent.scrollTop + delta,
-		behavior
+		behavior: behavior === "smooth" ? getSmoothScrollBehavior() : behavior
 	});
 };
 var getAllScrollParents = (node, max = 10) => {
@@ -111,6 +111,9 @@ var dateFormatterCsv = new Intl.DateTimeFormat("sv-SE", {
 var numberFormatCsv = (value) => String(value).replace(".", ",");
 var getIsClientSide = () => typeof window !== "undefined";
 var isClientSide = getIsClientSide();
+var getPrefersReducedMotion = () => getIsClientSide() && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/** `smooth`, or `instant` when the user asks for reduced motion — a `behavior` passed to `scrollTo` is not affected by CSS `scroll-behavior`. */
+var getSmoothScrollBehavior = () => getPrefersReducedMotion() ? "instant" : "smooth";
 var iterator = 1;
 var genId = () => {
 	return iterator++;
@@ -242,4 +245,4 @@ var getAnchorNode = (anchor) => {
 /** Whether the anchor is still on the page. A detached anchor has nothing to stick to. */
 var isAnchorConnected = (anchor) => getAnchorNode(anchor)?.isConnected ?? true;
 //#endregion
-export { BASE_ZINDEX_ACTIONS_BAR, BASE_ZINDEX_BOTTOM_SHEET, BASE_ZINDEX_DROPDOWN, BASE_ZINDEX_HEADER_BAR, BASE_ZINDEX_LIST_HEADER, BASE_ZINDEX_MODAL, BASE_ZINDEX_NAV_BAR, ListMode, Theme, WrapSelectionType, dateFormatterCsv, debounce, genId, get, getAllScrollParents, getAnchorNode, getDefaultFieldConfigMap, getHasScrollbar, getIsClientSide, getOffsetTop, getPropValue, getScrollParent, isAnchorConnected, isClientSide, isEqualArr, isEqualArrObj, isEqualObj, isId, isIdArray, isIndex, isPage, numberCompactFormatter, numberFormatCsv, numberFormatter, parseBoolean, parseId, parseIdList, parseIndex, parseInteger, parseIntegerList, parseJson, parseSliceIndexes, parseString, parseStringList, percentCompactFormatter, percentFormatter, scrollInParent, set, throttle, toKebabCase, unwrapSlots, wBaseZIndex };
+export { BASE_ZINDEX_ACTIONS_BAR, BASE_ZINDEX_BOTTOM_SHEET, BASE_ZINDEX_DROPDOWN, BASE_ZINDEX_HEADER_BAR, BASE_ZINDEX_LIST_HEADER, BASE_ZINDEX_MODAL, BASE_ZINDEX_NAV_BAR, ListMode, Theme, WrapSelectionType, dateFormatterCsv, debounce, genId, get, getAllScrollParents, getAnchorNode, getDefaultFieldConfigMap, getHasScrollbar, getIsClientSide, getOffsetTop, getPrefersReducedMotion, getPropValue, getScrollParent, getSmoothScrollBehavior, isAnchorConnected, isClientSide, isEqualArr, isEqualArrObj, isEqualObj, isId, isIdArray, isIndex, isPage, numberCompactFormatter, numberFormatCsv, numberFormatter, parseBoolean, parseId, parseIdList, parseIndex, parseInteger, parseIntegerList, parseJson, parseSliceIndexes, parseString, parseStringList, percentCompactFormatter, percentFormatter, scrollInParent, set, throttle, toKebabCase, unwrapSlots, wBaseZIndex };

package/docs/components/select.md

@@ -1083,6 +1083,60 @@ export const varietyModelApi = createRestModelApi({
 })
 ```
 
+## In list cells
+
+A select per row costs most of a list's first render: each one sets up its search, cursor, dropdown and input, and a query of its own when the options come from `useQueryFnOptions`. With `deferred`, a `seamless` select renders only its field and the selected options until it is pressed or focused — then it mounts the full select and opens it. Options from a query are not loaded before that, so give the selected ones in `previewData`, from data the row already has. The async selects load their chips on their own when `previewData` is not given, as they do when mounted.
+
+```vue
+<template>
+  <div class="grid max-w-md grid-cols-[1fr_10rem] items-center gap-x-4">
+    <template
+      v-for="plant in plants"
+      :key="plant.id"
+    >
+      <div>{{ plant.name }}</div>
+
+      <WSelectSingle
+        v-model="plant.soil"
+        :options="soils"
+        :value-getter="item => item.code"
+        :search-fn="(item, search) => item.name.toLowerCase().includes(search.toLowerCase())"
+        placeholder="Soil"
+        seamless
+        deferred
+        no-margin
+      >
+        <template #option="{option, search}">
+          <div class="w-option flex items-center">
+            {{ option?.name ?? search }}
+          </div>
+        </template>
+      </WSelectSingle>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref} from 'vue'
+
+import WSelectSingle from 'eco-vue-js/dist/components/Select/WSelectSingle.vue'
+
+const soils = [
+  {id: 1, code: 'loam', name: 'Loam'},
+  {id: 2, code: 'sand', name: 'Sandy'},
+  {id: 3, code: 'clay', name: 'Clay'},
+  {id: 4, code: 'peat', name: 'Peat'},
+]
+
+const plants = ref([
+  {id: 1, name: 'Monstera', soil: 'peat' as string | null},
+  {id: 2, name: 'Aloe', soil: 'sand' as string | null},
+  {id: 3, name: 'Fern', soil: null as string | null},
+  {id: 4, name: 'Basil', soil: 'loam' as string | null},
+])
+</script>
+```
+
 ## Other forms
 
 - **`WSelectStringified`** is a `WSelect` whose model is one string — the values joined by `divider`, such as `"high,critical"` for a query param, or a JSON array with `divider="json"`.
@@ -1104,6 +1158,7 @@ import WSelectSingle from 'eco-vue-js/dist/components/Select/WSelectSingle.vue'
 | `allowClear` | `AllowClear` | — | Adds a button that clears the value, emitting `clearValue`. |
 | `clearValue` | `ClearValue` | — | Value emitted when cleared. Defaults to `null`; set it explicitly to emit `undefined` or `''`. |
 | `createdData` | `Data` | — | Option to add to the loaded ones — for a selected value the query does not return, such as one created elsewhere. |
+| `previewData` | `Data` | — | Selected option, shown in the field until the options load — and, with `deferred`, before the select mounts. |
 | `useQueryFnOptions` | `UseQueryDefault<Data[], unknown> \| UseQueryDefault<Data[], QueryParamsOptions>` | — | Query that loads the options. Takes `queryParamsOptions` when the query has parameters. Use either this or `options`. |
 | `queryParamsOptions` | `QueryParamsOptions` | — | Parameters for `useQueryFnOptions`. |
 | `options` | `Data[]` | — | Static list of options, instead of loading them with `useQueryFnOptions`. |
@@ -1119,6 +1174,7 @@ import WSelectSingle from 'eco-vue-js/dist/components/Select/WSelectSingle.vue'
 | `searchModel` | `boolean` | — | Commits the typed text when the menu closes — selects the option matching it exactly, or creates one with `createOption`. In a single select, the selected value is also put into the search text on focus, so it can be edited. For string values. |
 | `lazy` | `boolean` | — | Waits until the menu is first opened before loading the options. |
 | `placeholderEmpty` | `string` | — | Placeholder while nothing is selected and the field is not focused. Defaults to `placeholder`. |
+| `deferred` | `boolean` | — | Renders only the selected options until the field is first pressed or focused, then mounts the full select and opens it — for selects repeated in list cells. The options are not loaded before that, so pass `previewData` when they come from a query. With `seamless`, and not with `useQueryFnDefault` or `useFirstDefault`. |
 | `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. |
 | `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
 | `horizontalAlign` | `HorizontalAlign` | — | Horizontal placement relative to the parent. When it does not fit the viewport, the next placement in order is tried. |
@@ -1241,6 +1297,8 @@ import WSelect from 'eco-vue-js/dist/components/Select/WSelect.vue'
 | `lazy` | `boolean` | — | Waits until the menu is first opened before loading the options. |
 | `placeholderEmpty` | `string` | — | Placeholder while nothing is selected and the field is not focused. Defaults to `placeholder`. |
 | `cursorSelected` | `boolean` | — | Puts the cursor on the first selected option when the menu opens, so Enter toggles it — by default the menu only scrolls to it. Always set in the single selects. |
+| `previewData` | `Data[]` | — | Selected options, shown in the chips until the options load — and, with `deferred`, before the select mounts. |
+| `deferred` | `boolean` | — | Renders only the selected options until the field is first pressed or focused, then mounts the full select and opens it — for selects repeated in list cells. The options are not loaded before that, so pass `previewData` when they come from a query. With `seamless`, and not with `useQueryFnDefault` or `useFirstDefault`. |
 | `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. |
 | `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
 | `useQueryFnOptions` | `UseQueryDefault<Data[], unknown> \| UseQueryDefault<Data[], QueryParamsOptions>` | — | Query that loads the options. Takes `queryParamsOptions` when the query has parameters. Use either this or `options`. |
@@ -1360,7 +1418,7 @@ import WSelectAsyncSingle from 'eco-vue-js/dist/components/Select/WSelectAsyncSi
 | `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
 | `useQueryFnOptions` | `UseQueryDefault<PaginatedResponse<Data>, QueryParams>` | **required** | Paginated query that loads the options, page by page as the menu scrolls. The search text is sent in `searchField`. |
 | `queryParamsOptions` | `QueryParams` | **required** | Parameters for `useQueryFnOptions`. |
-| `valueGetter` | `(value: Data) => Model` | **required** | Gets the value stored in the model from an option. |
+| `valueGetter` | `((value: Data) => Model)` | `(data as unknown as {     id: Model; }).id` | Gets the value stored in the model from an option. Defaults to the option's `id`. |
 | `useQueryFnDefault` | `UseQueryDefault<Data, undefined>` | — | Query that loads a default option. When it resolves while nothing is selected, the option is selected and `init-model` is emitted. |
 | `emptyStub` | `string` | — | Shown in the menu instead of "Nothing to show" when there are no options and no search. |
 | `hidePrefix` | `boolean` | — | Hides the selected chips while the menu is open, leaving room to type. |
@@ -1369,11 +1427,12 @@ import WSelectAsyncSingle from 'eco-vue-js/dist/components/Select/WSelectAsyncSi
 | `searchModel` | `boolean` | — | Commits the typed text when the menu closes — selects the option matching it exactly, or creates one with `createOption`. In a single select, the selected value is also put into the search text on focus, so it can be edited. For string values. |
 | `lazy` | `boolean` | — | Waits until the menu is first opened before loading the options. |
 | `placeholderEmpty` | `string` | — | Placeholder while nothing is selected and the field is not focused. Defaults to `placeholder`. |
+| `deferred` | `boolean` | — | Renders only the selected options until the field is first pressed or focused, then mounts the full select and opens it — for selects repeated in list cells. The options are not loaded before that, so pass `previewData` when they come from a query. With `seamless`, and not with `useQueryFnDefault` or `useFirstDefault`. |
 | `useQueryFnPrefix` | `UseQueryDefault<PaginatedResponse<Data>, QueryParams>` | — | Paginated query that loads the selected options for the chips. Defaults to `useQueryFnOptions`. |
 | `searchField` | `keyof QueryParams` | — | Query parameter that receives the search text. Defaults to `search`. |
-| `valueQueryKey` | `string` | — | Query parameter that receives the selected values, comma-separated, when loading the chips. |
+| `valueQueryKey` | `string` | `"id__in"` | Query parameter that receives the selected values, comma-separated, when loading the chips. |
 | `prefixText` | `string` | — | Word after the count shown instead of chips when more than `prefixMax` values are selected. Defaults to "items". |
-| `prefixMax` | `number` | — | Most selected values shown as chips; above it, a count with a clear-all button is shown instead. |
+| `prefixMax` | `number` | `8` | Most selected values shown as chips; above it, a count with a clear-all button is shown instead. |
 | `reverse` | `boolean` | — | Shows the check mark on options that are not selected instead of those that are — for a select that picks what to exclude. |
 | `horizontalAlign` | `HorizontalAlign` | — | Horizontal placement relative to the parent. When it does not fit the viewport, the next placement in order is tried. |
 | `dropdownClass` | `string` | — | Classes for the menu's content box. Defaults to `w-max`. |
@@ -1482,13 +1541,13 @@ import WSelectAsync from 'eco-vue-js/dist/components/Select/WSelectAsync.vue'
 | `useQueryFnPrefix` | `UseQueryDefault<PaginatedResponse<Data>, QueryParams>` | — | Paginated query that loads the selected options for the chips. Defaults to `useQueryFnOptions`. |
 | `queryParamsOptions` | `QueryParams` | **required** | Parameters for `useQueryFnOptions`. |
 | `searchField` | `keyof QueryParams` | — | Query parameter that receives the search text. Defaults to `search`. |
-| `previewData` | `Data[]` | — | Selected options, used for the chips instead of loading them. |
+| `valueGetter` | `((value: Data) => Model)` | `(data as unknown as {     id: Model; }).id` | Gets the value stored in the model from an option. Defaults to the option's `id`. |
+| `previewData` | `Data[]` | — | Selected options, used for the chips instead of loading them — also before the select mounts with `deferred`. |
 | `valueQueryKey` | `string` | `"id__in"` | Query parameter that receives the selected values, comma-separated, when loading the chips. |
 | `prefixText` | `string` | — | Word after the count shown instead of chips when more than `prefixMax` values are selected. Defaults to "items". |
 | `prefixMax` | `number` | `8` | Most selected values shown as chips; above it, a count with a clear-all button is shown instead. |
 | `reverse` | `boolean` | — | Shows the check mark on options that are not selected instead of those that are — for a select that picks what to exclude. |
 | `modelValue` | `Model[] \| undefined` | **required** | Selected values. The component does not change it — update it from `select` and `unselect`. |
-| `valueGetter` | `(value: Data) => Model` | **required** | Gets the value stored in the model from an option. |
 | `useQueryFnDefault` | `UseQueryDefault<Data, undefined>` | — | Query that loads a default option. When it resolves while nothing is selected, the option is selected and `init-model` is emitted. |
 | `emptyStub` | `string` | `"No match"` | Shown in the menu instead of "Nothing to show" when there are no options and no search. |
 | `disableClear` | `boolean` | — | Hides the remove button on the selected chips. |
@@ -1500,6 +1559,7 @@ import WSelectAsync from 'eco-vue-js/dist/components/Select/WSelectAsync.vue'
 | `lazy` | `boolean` | — | Waits until the menu is first opened before loading the options. |
 | `placeholderEmpty` | `string` | — | Placeholder while nothing is selected and the field is not focused. Defaults to `placeholder`. |
 | `cursorSelected` | `boolean` | — | Puts the cursor on the first selected option when the menu opens, so Enter toggles it — by default the menu only scrolls to it. Always set in the single selects. |
+| `deferred` | `boolean` | — | Renders only the selected options until the field is first pressed or focused, then mounts the full select and opens it — for selects repeated in list cells. The options are not loaded before that, so pass `previewData` when they come from a query. With `seamless`, and not with `useQueryFnDefault` or `useFirstDefault`. |
 | `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. |
 | `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
 | `horizontalAlign` | `HorizontalAlign` | — | Horizontal placement relative to the parent. When it does not fit the viewport, the next placement in order is tried. |
@@ -1627,6 +1687,8 @@ import WSelectStringified from 'eco-vue-js/dist/components/Select/WSelectStringi
 | `lazy` | `boolean` | — | Waits until the menu is first opened before loading the options. |
 | `placeholderEmpty` | `string` | — | Placeholder while nothing is selected and the field is not focused. Defaults to `placeholder`. |
 | `cursorSelected` | `boolean` | — | Puts the cursor on the first selected option when the menu opens, so Enter toggles it — by default the menu only scrolls to it. Always set in the single selects. |
+| `previewData` | `Data[]` | — | Selected options, shown in the chips until the options load — and, with `deferred`, before the select mounts. |
+| `deferred` | `boolean` | — | Renders only the selected options until the field is first pressed or focused, then mounts the full select and opens it — for selects repeated in list cells. The options are not loaded before that, so pass `previewData` when they come from a query. With `seamless`, and not with `useQueryFnDefault` or `useFirstDefault`. |
 | `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. |
 | `optionComponentProps` | `(OptionComponent extends Component<infer Props> ? Partial<Omit<Props, keyof SelectOptionProps<Option>>> : never)` | — | Extra props passed to every `optionComponent`. |
 | `horizontalAlign` | `HorizontalAlign` | — | Horizontal placement relative to the parent. When it does not fit the viewport, the next placement in order is tried. |

package/docs/llms.txt

@@ -1,6 +1,6 @@
 # eco-vue-js
 
-> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.19, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
+> Vue 3 UI kit with Tailwind v4 — components, utilities, icons and recipes. These are the docs of version 0.26.21, the one installed next to them. Start with Getting started and Conventions; each component page lists its props, events and slots with examples.
 
 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/
 

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/rsmple/eco-vue-js.git"
   },
-  "version": "0.26.19",
+  "version": "0.26.21",
   "homepage": "https://rsmple.github.io/eco-vue-js/",
   "dependencies": {
     "@stylistic/eslint-plugin": "5.10.0",

package/tailwind-base/base.css

@@ -6,6 +6,7 @@
 @import "./css/internal-variants.css";
 @import "./css/internal-variables.css";
 @import "./css/textarea.css";
+@import "./css/reduced-motion.css";
 
 @source "../dist/components";
 @source "../dist/utils";

package/tailwind-base/css/animations.css

@@ -4,6 +4,7 @@
   --animate-move-horizontal: move-horizontal var(--tiker-duration, 0.8s) linear infinite;
   --animate-shake: shake .6s linear infinite;
   --animate-border-rotate: border-rotate linear infinite 10s;
+  --animate-border-march: border-march 0.5s linear infinite;
   --animate-dojo-logo-dashoffset: dojo-logo-dashoffset 1.6s linear 1;
   --animate-spinner-dash: spinner-dash 1.6s linear infinite;
   --animate-ping-fast: ping-big .5s cubic-bezier(0, 0, 0.2, 1);
@@ -63,6 +64,15 @@
     }
   }
 
+  @keyframes border-march {
+    from {
+      stroke-dashoffset: 0px;
+    }
+    to {
+      stroke-dashoffset: -12px;
+    }
+  }
+
   @keyframes dojo-logo-dashoffset {
     from {
       stroke-dashoffset: 0;

package/tailwind-base/css/reduced-motion.css

@@ -0,0 +1,15 @@
+/* Turns off animations, transitions and smooth scrolling when the user asks the OS for reduced motion. Transitions still run for a moment so `transitionend` and Vue's `after-enter`/`after-leave` fire. */
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-delay: 0s !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-delay: 0s !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}