@welldot/vue 0.1.1 → 0.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 ## Overview
 
-Vue 3 + PrimeVue base components, theme and composables for `.well` water well editors, with a Nuxt module. Part of the [welldot](https://github.com/rafaeelneto/welldot) open-source ecosystem.
+Vue 3 + PrimeVue base components, theme and composables for `.well` water well editors, with a Nuxt module. Part of the [welldot](https://github.com/welldothq/welldot) open-source ecosystem.
 
 Labeled fields, chips, tag selects, info popovers, number and unit inputs, an FGDC texture picker, a spreadsheet-style data grid and a map-based location picker, all sharing one PrimeVue theme and Tailwind tokens. No i18n library and no store: text props accept a plain string or a `LanguageText` (`{ en, pt, … }`), and app-wide settings come from one `createWelldot` plugin.
 
@@ -16,6 +16,7 @@ This README covers installation, Vue and Nuxt setup, the Tailwind tokens, `creat
   - [Nuxt](#nuxt)
 - [Tailwind setup](#tailwind-setup)
   - [Overriding the tokens](#overriding-the-tokens)
+  - [Custom palette](#custom-palette)
 - [Configuration](#configuration)
   - [Layering](#layering)
 - [Text and i18n](#text-and-i18n)
@@ -76,6 +77,8 @@ app.use(createWelldot({ locale: 'pt' }));
 app.mount('#app');
 ```
 
+`WelldotPreset` reads its colors from CSS variables, so the app must also load `@welldot/vue/tailwind.css` (see [Tailwind setup](#tailwind-setup)) or, without Tailwind, `@welldot/vue/tokens.css`. Without one of them, PrimeVue components render with no colors.
+
 ```vue
 <script setup lang="ts">
 import { WellLabeledField, WellUnitInput } from '@welldot/vue';
@@ -143,18 +146,26 @@ The components are styled with Tailwind CSS 4 utilities and the Welldot tokens.
 @import '@welldot/vue/tailwind.css';
 ```
 
-`@welldot/vue/tailwind.css` brings the `@theme` tokens, the `dark` variant (`.dark-mode`), the base layer, the data grid's styles and the components' own styles, and adds the package's built files as a Tailwind `@source`. It must be imported from the app's CSS (not from JS) so the tokens join the app's Tailwind compilation. The tokens read PrimeVue's `--w-*` variables, so use `WelldotPreset` (prefix `w`) or a preset with the same prefix.
+`@welldot/vue/tailwind.css` brings the color tokens, the `@theme` tokens, the `dark` variant (`.dark-mode`), the base layer, the data grid's styles and the components' own styles, and adds the package's built files as a Tailwind `@source`. It must be imported from the app's CSS (not from JS) so the tokens join the app's Tailwind compilation.
+
+The colors are plain CSS variables (`--w-*`) declared in `@welldot/vue/tokens.css`, which both `WelldotPreset` and the Tailwind theme read. `tailwind.css` is built from two files you can also import on their own, for example in an app that doesn't use PrimeVue:
+
+```css
+@import 'tailwindcss';
+@import '@welldot/vue/tokens.css'; /* --w-* color variables, light and dark */
+@import '@welldot/vue/theme.css'; /* dark variant, @theme tokens, base layer */
+```
 
 ### Overriding the tokens
 
 Everything in `tailwind.css` can be overridden from the app's own stylesheet, **after** the import:
 
-| Token                                                                     | Where it comes from                      | Override with                                                                                                                                     |
-| ------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Colors (`--color-{surface,content,primary,error,warning,success,info}-*`) | PrimeVue's `--w-*` variables             | The preset — `defineWelldotTheme` (see [Overriding the theme](#overriding-the-theme)), so PrimeVue components and Tailwind utilities stay in sync |
-| Fonts (`--font-display`, `--font-serif`, `--font-mono`)                   | `@theme static`                          | The app's `@theme` block                                                                                                                          |
-| Radii (`--radius-{sm,md,lg,xl,2xl,pill}`)                                 | `@theme static`                          | The app's `@theme` block                                                                                                                          |
-| Focus/error rings (`--color-focus-ring`, `--color-error-ring`)            | `@layer base` (`:root` and `.dark-mode`) | The app's `@layer base`                                                                                                                           |
+| Token                                                                     | Where it comes from                      | Override with                                                                                                                       |
+| ------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Colors (`--color-{surface,content,primary,error,warning,success,info}-*`) | `--w-*` variables in `tokens.css`        | Redeclare the `--w-*` variables (see [Custom palette](#custom-palette)), so PrimeVue components and Tailwind utilities stay in sync |
+| Fonts (`--font-display`, `--font-serif`, `--font-mono`)                   | `@theme static`                          | The app's `@theme` block                                                                                                            |
+| Radii (`--radius-{sm,md,lg,xl,2xl,pill}`)                                 | `@theme static`                          | The app's `@theme` block                                                                                                            |
+| Focus/error rings (`--color-focus-ring`, `--color-error-ring`)            | `@layer base` (`:root` and `.dark-mode`) | The app's `@layer base`                                                                                                             |
 
 ```css
 /* app main.css */
@@ -177,7 +188,37 @@ Everything in `tailwind.css` can be overridden from the app's own stylesheet, **
 }
 ```
 
-Avoid overriding a color token in `@theme` directly: Tailwind utilities would change while PrimeVue components keep the preset's color. Fonts and radii are declared `static` so they're always emitted, even when only component styles read them through `var()`. The fonts themselves aren't loaded by the package; load them in the app (e.g. `@nuxt/fonts`).
+Avoid overriding a color token in `@theme` directly: Tailwind utilities would change while PrimeVue components keep the old color. Change the `--w-*` variable instead. Fonts and radii are declared `static` so they're always emitted, even when only component styles read them through `var()`. The fonts themselves aren't loaded by the package; load them in the app (e.g. `@nuxt/fonts`).
+
+### Custom palette
+
+The palette lives in plain CSS variables, so any app can rebrand `@welldot/vue` with a few lines of CSS loaded after the package's stylesheet. No JavaScript is involved, and one change reaches both the PrimeVue components and the Tailwind utilities (`bg-primary-500`, `text-content-0`, …).
+
+```css
+/* app main.css */
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+@import '@welldot/vue/tailwind.css'; /* or '@welldot/vue/tokens.css' without PrimeVue */
+
+:root {
+  --w-primary-500: #0a7d5a;
+  --w-primary-600: #086a4c;
+  /* … the other steps you use */
+}
+
+.dark-mode {
+  --w-surface-0: #0b1410;
+  --w-content-0: #f4faf7;
+  /* … */
+}
+```
+
+- **Names:** `--w-{surface,content}-{0,50,100,…,900,950}` and `--w-{primary,success,info,warning,error}-{50,100,…,900,950}`. See [`src/theme/tokens.css`](src/theme/tokens.css) for the defaults.
+- **Dark mode:** only surface and content change between light and dark (they mirror each other: `surface-0` is the page, `content-0` the main text). The other palettes need just the `:root` value.
+- **Surface and content come in pairs:** whenever you redeclare a `--w-surface-*` or `--w-content-*` step in `:root`, redeclare it in `.dark-mode` too, in a rule placed after your `:root` rule. Both selectors match `<html>` with the same specificity, so a lone `:root` override would also win in dark mode (e.g. a light page background under white dark-mode text).
+- **Order:** your rules have the same specificity as the package's, so they must load after it.
+- **No layers:** `tokens.css` is unlayered, and unlayered CSS beats any `@layer`, so write the `--w-*` overrides outside `@layer` (not in `@layer base` like the rings above), or they are silently ignored.
+- Use [`defineWelldotTheme`](#overriding-the-theme) for component-level tweaks (padding, radius, a component's own colors), not for the palette.
 
 ---
 
@@ -498,14 +539,14 @@ DD/DMS toggle, latitude/longitude inputs, optional elevation and the map. `v-mod
 
 `@welldot/vue/theme` exports:
 
-- `WelldotPreset`: `{ preset, options }` for PrimeVue's `theme` option (prefix `w`, dark mode on `.dark-mode`, CSS layer `primevue`);
+- `WelldotPreset`: `{ preset, options }` for PrimeVue's `theme` option (prefix `p`, dark mode on `.dark-mode`, CSS layer `primevue`). Its palettes point at the `--w-*` variables of `tokens.css`;
 - `welldotPt`: the global pass-through (filled inputs, full-width fields, …).
 
 ```ts
 app.use(PrimeVue, { theme: WelldotPreset, pt: welldotPt });
 ```
 
-Toggle dark mode with the `dark-mode` class on `<html>`.
+The preset holds no color values: load `@welldot/vue/tailwind.css` or `@welldot/vue/tokens.css` alongside it, or PrimeVue components render with no colors. Toggle dark mode with the `dark-mode` class on `<html>`.
 
 ### Overriding the theme
 
@@ -514,15 +555,15 @@ Toggle dark mode with the `dark-mode` class on `<html>`.
 - Plain objects merge key by key, so you only write what changes.
 - Any other value you set wins: a PT section given as a class string or a function **replaces** the default's (it is not combined with it).
 - Arrays are concatenated.
-- Keep `options.prefix` at `w`: the Tailwind tokens read PrimeVue's `--w-*` variables.
+- Change colors in CSS ([Custom palette](#custom-palette)), not through the preset: a palette set here would reach PrimeVue but not the Tailwind utilities.
+- Keep `options.darkModeSelector` at `.dark-mode`: the dark values in `tokens.css` switch on that class.
 
 ```ts
 import { defineWelldotPt, defineWelldotTheme } from '@welldot/vue/theme';
 
 app.use(PrimeVue, {
   theme: defineWelldotTheme({
-    preset: { semantic: { primary: { 500: '#0f766e' } } },
-    options: { darkModeSelector: '.night' },
+    preset: { components: { dialog: { borderRadius: '0.5rem' } } },
   }),
   pt: defineWelldotPt({ tabpanels: { root: 'p-0' } }),
 });

package/dist/grid/cells/GridUnitEditor.d.ts

@@ -4,6 +4,8 @@ type __VLS_Props = {
     save: (value: unknown, preventFocus?: boolean) => void;
     close: (focusNext?: boolean) => void;
     unitType: DisplayUnitType;
+    /** `val` is the key typed to open the editor, already in display units. */
+    entered?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/grid/cells/GridUnitEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridUnitEditor.d.ts","sourceRoot":"","sources":["../../../src/grid/cells/GridUnitEditor.vue"],"names":[],"mappings":"AA8FA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;AAExC,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAAC;AA8GF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"GridUnitEditor.d.ts","sourceRoot":"","sources":["../../../src/grid/cells/GridUnitEditor.vue"],"names":[],"mappings":"AAmGA,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,gCAAgC,CAAC;AAExC,KAAK,WAAW,GAAG;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,eAAe,CAAC;IAC1B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAiHF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/grid/cells/GridUnitEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridUnitEditor.js","names":[],"sources":["../../../src/grid/cells/GridUnitEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue';\nimport WellInputNumber from '../../components/WellInputNumber.vue';\nimport {\n  isDisplayedValue,\n  useWellUnits,\n  type DisplayUnitType,\n} from '../../composables/useWellUnits';\n\nconst props = defineProps<{\n  val?: unknown;\n  save: (value: unknown, preventFocus?: boolean) => void;\n  close: (focusNext?: boolean) => void;\n  unitType: DisplayUnitType;\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\nconst { toDisplay, toCanonical } = useWellUnits(() => props.unitType);\n\n/** Matches the `max-fraction-digits` of the input below. */\nconst MAX_FRACTION_DIGITS = 4;\n\nconst numRef = ref<{ $el: HTMLElement } | null>(null);\n\nconst raw =\n  props.val !== undefined && props.val !== null && props.val !== ''\n    ? Number(props.val)\n    : null;\n\n/** Display value the editor opened with (null for an empty cell). */\nconst initialDisplay = raw != null && !isNaN(raw) ? toDisplay(raw) : null;\nconst localValue = ref<number | null>(initialDisplay);\n\nonMounted(() =>\n  nextTick(() => {\n    const el = numRef.value?.$el;\n    (el?.querySelector('input') as HTMLInputElement | null)?.focus();\n  }),\n);\n\nlet lastKeyWasEnter = false;\n\nfunction onKeydownCapture(e: KeyboardEvent) {\n  lastKeyWasEnter = e.key === 'Enter';\n}\n\nfunction commit() {\n  if (localValue.value === null) return;\n  // `InputNumber` emits its rounded text on blur/Enter: an untouched edit\n  // closes without saving, so the exact canonical value is kept.\n  if (isDisplayedValue(localValue.value, initialDisplay, MAX_FRACTION_DIGITS)) {\n    props.close(lastKeyWasEnter);\n    return;\n  }\n  props.save(toCanonical(localValue.value), !lastKeyWasEnter);\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    e.stopPropagation();\n    commit();\n  } else if (e.key === 'Escape') {\n    e.stopPropagation();\n    props.close();\n  }\n}\n\nfunction update(value: number | null) {\n  localValue.value = value;\n  commit();\n}\n</script>\n\n<template>\n  <div class=\"contents\" @keydown.capture=\"onKeydownCapture\">\n    <WellInputNumber\n      ref=\"numRef\"\n      :model-value=\"localValue\"\n      :max-fraction-digits=\"MAX_FRACTION_DIGITS\"\n      :pt=\"{\n        root: 'well-cell-input-number',\n        pcInput: { root: 'well-cell-input well-cell-input-number text-right' },\n      }\"\n      @update:model-value=\"update\"\n      @keydown=\"onKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"GridUnitEditor.js","names":[],"sources":["../../../src/grid/cells/GridUnitEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue';\nimport WellInputNumber from '../../components/WellInputNumber.vue';\nimport {\n  isDisplayedValue,\n  useWellUnits,\n  type DisplayUnitType,\n} from '../../composables/useWellUnits';\n\nconst props = defineProps<{\n  val?: unknown;\n  save: (value: unknown, preventFocus?: boolean) => void;\n  close: (focusNext?: boolean) => void;\n  unitType: DisplayUnitType;\n  /** `val` is the key typed to open the editor, already in display units. */\n  entered?: boolean;\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\nconst { toDisplay, toCanonical } = useWellUnits(() => props.unitType);\n\n/** Matches the `max-fraction-digits` of the input below. */\nconst MAX_FRACTION_DIGITS = 4;\n\nconst numRef = ref<{ $el: HTMLElement } | null>(null);\n\nconst raw =\n  props.val !== undefined && props.val !== null && props.val !== ''\n    ? Number(props.val)\n    : null;\n\nconst opened = raw != null && !isNaN(raw) ? raw : null;\n\n/** Display value the editor opened with (null for an empty cell). */\nconst initialDisplay =\n  opened != null && !props.entered ? toDisplay(opened) : null;\nconst localValue = ref<number | null>(props.entered ? opened : initialDisplay);\n\nonMounted(() =>\n  nextTick(() => {\n    const el = numRef.value?.$el;\n    (el?.querySelector('input') as HTMLInputElement | null)?.focus();\n  }),\n);\n\nlet lastKeyWasEnter = false;\n\nfunction onKeydownCapture(e: KeyboardEvent) {\n  lastKeyWasEnter = e.key === 'Enter';\n}\n\nfunction commit() {\n  if (localValue.value === null) return;\n  // `InputNumber` emits its rounded text on blur/Enter: an untouched edit\n  // closes without saving, so the exact canonical value is kept.\n  if (isDisplayedValue(localValue.value, initialDisplay, MAX_FRACTION_DIGITS)) {\n    props.close(lastKeyWasEnter);\n    return;\n  }\n  props.save(toCanonical(localValue.value), !lastKeyWasEnter);\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    e.stopPropagation();\n    commit();\n  } else if (e.key === 'Escape') {\n    e.stopPropagation();\n    props.close();\n  }\n}\n\nfunction update(value: number | null) {\n  localValue.value = value;\n  commit();\n}\n</script>\n\n<template>\n  <div class=\"contents\" @keydown.capture=\"onKeydownCapture\">\n    <WellInputNumber\n      ref=\"numRef\"\n      :model-value=\"localValue\"\n      :max-fraction-digits=\"MAX_FRACTION_DIGITS\"\n      :pt=\"{\n        root: 'well-cell-input-number',\n        pcInput: { root: 'well-cell-input well-cell-input-number text-right' },\n      }\"\n      @update:model-value=\"update\"\n      @keydown=\"onKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/grid/cells/GridUnitEditor.vue_vue_type_script_setup_true_lang.js

@@ -9,46 +9,47 @@ var u = 4, d = /* @__PURE__ */ a({
 		val: {},
 		save: { type: Function },
 		close: { type: Function },
-		unitType: {}
+		unitType: {},
+		entered: { type: Boolean }
 	},
 	setup(a) {
-		let d = a, { toDisplay: f, toCanonical: p } = t(() => d.unitType), m = l(null), h = d.val !== void 0 && d.val !== null && d.val !== "" ? Number(d.val) : null, g = h != null && !isNaN(h) ? f(h) : null, _ = l(g);
+		let d = a, { toDisplay: f, toCanonical: p } = t(() => d.unitType), m = l(null), h = d.val !== void 0 && d.val !== null && d.val !== "" ? Number(d.val) : null, g = h != null && !isNaN(h) ? h : null, _ = g != null && !d.entered ? f(g) : null, v = l(d.entered ? g : _);
 		s(() => o(() => {
 			((m.value?.$el)?.querySelector("input"))?.focus();
 		}));
-		let v = !1;
-		function y(e) {
-			v = e.key === "Enter";
+		let y = !1;
+		function b(e) {
+			y = e.key === "Enter";
 		}
-		function b() {
-			if (_.value !== null) {
-				if (e(_.value, g, u)) {
-					d.close(v);
+		function x() {
+			if (v.value !== null) {
+				if (e(v.value, _, u)) {
+					d.close(y);
 					return;
 				}
-				d.save(p(_.value), !v);
+				d.save(p(v.value), !y);
 			}
 		}
-		function x(e) {
-			e.key === "Enter" ? (e.stopPropagation(), b()) : e.key === "Escape" && (e.stopPropagation(), d.close());
-		}
 		function S(e) {
-			_.value = e, b();
+			e.key === "Enter" ? (e.stopPropagation(), x()) : e.key === "Escape" && (e.stopPropagation(), d.close());
+		}
+		function C(e) {
+			v.value = e, x();
 		}
 		return (e, t) => (c(), r("div", {
 			class: "contents",
-			onKeydownCapture: y
+			onKeydownCapture: b
 		}, [i(n, {
 			ref_key: "numRef",
 			ref: m,
-			"model-value": _.value,
+			"model-value": v.value,
 			"max-fraction-digits": u,
 			pt: {
 				root: "well-cell-input-number",
 				pcInput: { root: "well-cell-input well-cell-input-number text-right" }
 			},
-			"onUpdate:modelValue": S,
-			onKeydown: x
+			"onUpdate:modelValue": C,
+			onKeydown: S
 		}, null, 8, ["model-value"])], 32));
 	}
 });

package/dist/grid/cells/GridUnitEditor.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridUnitEditor.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/grid/cells/GridUnitEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue';\nimport WellInputNumber from '../../components/WellInputNumber.vue';\nimport {\n  isDisplayedValue,\n  useWellUnits,\n  type DisplayUnitType,\n} from '../../composables/useWellUnits';\n\nconst props = defineProps<{\n  val?: unknown;\n  save: (value: unknown, preventFocus?: boolean) => void;\n  close: (focusNext?: boolean) => void;\n  unitType: DisplayUnitType;\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\nconst { toDisplay, toCanonical } = useWellUnits(() => props.unitType);\n\n/** Matches the `max-fraction-digits` of the input below. */\nconst MAX_FRACTION_DIGITS = 4;\n\nconst numRef = ref<{ $el: HTMLElement } | null>(null);\n\nconst raw =\n  props.val !== undefined && props.val !== null && props.val !== ''\n    ? Number(props.val)\n    : null;\n\n/** Display value the editor opened with (null for an empty cell). */\nconst initialDisplay = raw != null && !isNaN(raw) ? toDisplay(raw) : null;\nconst localValue = ref<number | null>(initialDisplay);\n\nonMounted(() =>\n  nextTick(() => {\n    const el = numRef.value?.$el;\n    (el?.querySelector('input') as HTMLInputElement | null)?.focus();\n  }),\n);\n\nlet lastKeyWasEnter = false;\n\nfunction onKeydownCapture(e: KeyboardEvent) {\n  lastKeyWasEnter = e.key === 'Enter';\n}\n\nfunction commit() {\n  if (localValue.value === null) return;\n  // `InputNumber` emits its rounded text on blur/Enter: an untouched edit\n  // closes without saving, so the exact canonical value is kept.\n  if (isDisplayedValue(localValue.value, initialDisplay, MAX_FRACTION_DIGITS)) {\n    props.close(lastKeyWasEnter);\n    return;\n  }\n  props.save(toCanonical(localValue.value), !lastKeyWasEnter);\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    e.stopPropagation();\n    commit();\n  } else if (e.key === 'Escape') {\n    e.stopPropagation();\n    props.close();\n  }\n}\n\nfunction update(value: number | null) {\n  localValue.value = value;\n  commit();\n}\n</script>\n\n<template>\n  <div class=\"contents\" @keydown.capture=\"onKeydownCapture\">\n    <WellInputNumber\n      ref=\"numRef\"\n      :model-value=\"localValue\"\n      :max-fraction-digits=\"MAX_FRACTION_DIGITS\"\n      :pt=\"{\n        root: 'well-cell-input-number',\n        pcInput: { root: 'well-cell-input well-cell-input-number text-right' },\n      }\"\n      @update:model-value=\"update\"\n      @keydown=\"onKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;AAqBA,IAAM,IAAsB;;;;;;;;;;EAZ5B,IAAM,IAAQ,GASR,EAAE,cAAW,mBAAgB,QAAmB,EAAM,SAAS,EAK/D,IAAS,EAAiC,KAAK,EAE/C,IACJ,EAAM,QAAQ,KAAA,KAAa,EAAM,QAAQ,QAAQ,EAAM,QAAQ,KAC3D,OAAO,EAAM,IAAG,GAChB,MAGA,IAAiB,KAAO,QAAQ,CAAC,MAAM,EAAI,GAAG,EAAU,EAAI,GAAG,MAC/D,IAAa,EAAmB,EAAe;AAErD,UACE,QAAe;AAEb,KADW,EAAO,OAAO,MACpB,cAAc,QAAQ,GAA8B,OAAO;IAChE,CACH;EAED,IAAI,IAAkB;EAEtB,SAAS,EAAiB,GAAkB;AAC1C,OAAkB,EAAE,QAAQ;;EAG9B,SAAS,IAAS;AACZ,SAAW,UAAU,MAGzB;QAAI,EAAiB,EAAW,OAAO,GAAgB,EAAoB,EAAE;AAC3E,OAAM,MAAM,EAAgB;AAC5B;;AAEF,MAAM,KAAK,EAAY,EAAW,MAAM,EAAE,CAAC,EAAgB;;;EAG7D,SAAS,EAAU,GAAkB;AACnC,GAAI,EAAE,QAAQ,WACZ,EAAE,iBAAiB,EACnB,GAAQ,IACC,EAAE,QAAQ,aACnB,EAAE,iBAAiB,EACnB,EAAM,OAAO;;EAIjB,SAAS,EAAO,GAAsB;AAEpC,GADA,EAAW,QAAQ,GACnB,GAAQ;;yBAKR,EAYM,OAAA;GAZD,OAAM;GAA6B;MACtC,EAUE,GAAA;YATI;GAAJ,KAAI;GACH,eAAa,EAAA;GACb,uBAAqB;GACrB,IAAI;;;IAGJ;GACA,uBAAoB;GACX"}
+{"version":3,"file":"GridUnitEditor.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/grid/cells/GridUnitEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue';\nimport WellInputNumber from '../../components/WellInputNumber.vue';\nimport {\n  isDisplayedValue,\n  useWellUnits,\n  type DisplayUnitType,\n} from '../../composables/useWellUnits';\n\nconst props = defineProps<{\n  val?: unknown;\n  save: (value: unknown, preventFocus?: boolean) => void;\n  close: (focusNext?: boolean) => void;\n  unitType: DisplayUnitType;\n  /** `val` is the key typed to open the editor, already in display units. */\n  entered?: boolean;\n}>();\n\ndefineOptions({ inheritAttrs: false });\n\nconst { toDisplay, toCanonical } = useWellUnits(() => props.unitType);\n\n/** Matches the `max-fraction-digits` of the input below. */\nconst MAX_FRACTION_DIGITS = 4;\n\nconst numRef = ref<{ $el: HTMLElement } | null>(null);\n\nconst raw =\n  props.val !== undefined && props.val !== null && props.val !== ''\n    ? Number(props.val)\n    : null;\n\nconst opened = raw != null && !isNaN(raw) ? raw : null;\n\n/** Display value the editor opened with (null for an empty cell). */\nconst initialDisplay =\n  opened != null && !props.entered ? toDisplay(opened) : null;\nconst localValue = ref<number | null>(props.entered ? opened : initialDisplay);\n\nonMounted(() =>\n  nextTick(() => {\n    const el = numRef.value?.$el;\n    (el?.querySelector('input') as HTMLInputElement | null)?.focus();\n  }),\n);\n\nlet lastKeyWasEnter = false;\n\nfunction onKeydownCapture(e: KeyboardEvent) {\n  lastKeyWasEnter = e.key === 'Enter';\n}\n\nfunction commit() {\n  if (localValue.value === null) return;\n  // `InputNumber` emits its rounded text on blur/Enter: an untouched edit\n  // closes without saving, so the exact canonical value is kept.\n  if (isDisplayedValue(localValue.value, initialDisplay, MAX_FRACTION_DIGITS)) {\n    props.close(lastKeyWasEnter);\n    return;\n  }\n  props.save(toCanonical(localValue.value), !lastKeyWasEnter);\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Enter') {\n    e.stopPropagation();\n    commit();\n  } else if (e.key === 'Escape') {\n    e.stopPropagation();\n    props.close();\n  }\n}\n\nfunction update(value: number | null) {\n  localValue.value = value;\n  commit();\n}\n</script>\n\n<template>\n  <div class=\"contents\" @keydown.capture=\"onKeydownCapture\">\n    <WellInputNumber\n      ref=\"numRef\"\n      :model-value=\"localValue\"\n      :max-fraction-digits=\"MAX_FRACTION_DIGITS\"\n      :pt=\"{\n        root: 'well-cell-input-number',\n        pcInput: { root: 'well-cell-input well-cell-input-number text-right' },\n      }\"\n      @update:model-value=\"update\"\n      @keydown=\"onKeydown\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;AAuBA,IAAM,IAAsB;;;;;;;;;;;EAd5B,IAAM,IAAQ,GAWR,EAAE,cAAW,mBAAgB,QAAmB,EAAM,SAAS,EAK/D,IAAS,EAAiC,KAAK,EAE/C,IACJ,EAAM,QAAQ,KAAA,KAAa,EAAM,QAAQ,QAAQ,EAAM,QAAQ,KAC3D,OAAO,EAAM,IAAG,GAChB,MAEA,IAAS,KAAO,QAAQ,CAAC,MAAM,EAAI,GAAG,IAAM,MAG5C,IACJ,KAAU,QAAQ,CAAC,EAAM,UAAU,EAAU,EAAO,GAAG,MACnD,IAAa,EAAmB,EAAM,UAAU,IAAS,EAAe;AAE9E,UACE,QAAe;AAEb,KADW,EAAO,OAAO,MACpB,cAAc,QAAQ,GAA8B,OAAO;IAChE,CACH;EAED,IAAI,IAAkB;EAEtB,SAAS,EAAiB,GAAkB;AAC1C,OAAkB,EAAE,QAAQ;;EAG9B,SAAS,IAAS;AACZ,SAAW,UAAU,MAGzB;QAAI,EAAiB,EAAW,OAAO,GAAgB,EAAoB,EAAE;AAC3E,OAAM,MAAM,EAAgB;AAC5B;;AAEF,MAAM,KAAK,EAAY,EAAW,MAAM,EAAE,CAAC,EAAgB;;;EAG7D,SAAS,EAAU,GAAkB;AACnC,GAAI,EAAE,QAAQ,WACZ,EAAE,iBAAiB,EACnB,GAAQ,IACC,EAAE,QAAQ,aACnB,EAAE,iBAAiB,EACnB,EAAM,OAAO;;EAIjB,SAAS,EAAO,GAAsB;AAEpC,GADA,EAAW,QAAQ,GACnB,GAAQ;;yBAKR,EAYM,OAAA;GAZD,OAAM;GAA6B;MACtC,EAUE,GAAA;YATI;GAAJ,KAAI;GACH,eAAa,EAAA;GACb,uBAAqB;GACrB,IAAI;;;IAGJ;GACA,uBAAoB;GACX"}

package/dist/grid/useWellGridColumns.d.ts

@@ -3,6 +3,27 @@ import { BasePlugin } from '@revolist/vue3-datagrid';
 import { LanguageTextInput } from '@welldot/core';
 import { MaybeRefOrGetter } from 'vue';
 import { WellDataGridComponents, WellDataGridLabels, WellGridColumn } from './types';
+/** Props RevoGrid hands to every editor (`EditorType`). */
+export interface GridEditorProps {
+    val?: unknown;
+    save: (value: unknown, preventFocus?: boolean) => void;
+    close: (focusNext?: boolean) => void;
+    /** Cell data model; `column.column` is the `ColumnRegular`. */
+    column?: {
+        column?: {
+            editorProps?: Record<string, unknown>;
+        };
+    };
+    /** Row model of the edited cell. */
+    model?: Record<string, unknown>;
+    /** Key of the edited cell on `model`. */
+    prop?: string | number;
+}
+/**
+ * Whether `val` is the key the user typed to open the editor rather than
+ * the cell's stored value (RevoGrid passes `editCell.val || modelValue`).
+ */
+export declare function isEnteredValue(p: GridEditorProps): boolean;
 export interface UseWellGridColumnsOptions {
     columns: MaybeRefOrGetter<WellGridColumn[]>;
     onDelete: (rowIndex: number, model: Record<string, unknown>) => void;

package/dist/grid/useWellGridColumns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useWellGridColumns.d.ts","sourceRoot":"","sources":["../../src/grid/useWellGridColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,aAAa,EACb,OAAO,EACP,qBAAqB,EAEtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,KAAK,CAAC;AA4Bb,OAAO,KAAK,EAEV,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EAEf,MAAM,SAAS,CAAC;AA0GjB,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAClD,gEAAgE;IAChE,MAAM,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;IAC1D,wEAAwE;IACxE,UAAU,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,GAAG,SAAS,CAAC,CAAC;CACnE;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB;;;;;4BAgOpC,MAAM,OAAO,OAAO,KAAG,OAAO;6BA6D7B,WAAW,CAAC,cAAc,CAAC;;8BAxC1B,WAAW,CAAC,qBAAqB,CAAC;;6BAYnC,UAAU;EAiE3C"}
+{"version":3,"file":"useWellGridColumns.d.ts","sourceRoot":"","sources":["../../src/grid/useWellGridColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EAEd,aAAa,EACb,OAAO,EACP,qBAAqB,EAEtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,UAAU,EAGX,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAOL,KAAK,gBAAgB,EACtB,MAAM,KAAK,CAAC;AA4Bb,OAAO,KAAK,EAEV,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EAEf,MAAM,SAAS,CAAC;AAqDjB,2DAA2D;AAC3D,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE;YAAE,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;SAAE,CAAA;KAAE,CAAC;IAChE,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAcD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,eAAe,GAAG,OAAO,CAE1D;AAoCD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAClD,gEAAgE;IAChE,MAAM,CAAC,EAAE,gBAAgB,CAAC,kBAAkB,GAAG,SAAS,CAAC,CAAC;IAC1D,wEAAwE;IACxE,UAAU,CAAC,EAAE,gBAAgB,CAAC,sBAAsB,GAAG,SAAS,CAAC,CAAC;CACnE;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB;;;;;4BAkOpC,MAAM,OAAO,OAAO,KAAG,OAAO;6BA6D7B,WAAW,CAAC,cAAc,CAAC;;8BAxC1B,WAAW,CAAC,qBAAqB,CAAC;;6BAYnC,UAAU;EAiE3C"}

package/dist/grid/useWellGridColumns.js

@@ -4,27 +4,27 @@ import { columnStretchPlugin as r } from "./columnStretchPlugin.js";
 import i from "./cells/GridCheckboxCell.js";
 import a from "./cells/GridColorCell.js";
 import o from "./cells/GridColorPickerEditor.js";
-import ee from "./cells/GridComboEditor.js";
-import te from "./cells/GridDeleteCell.js";
-import s from "./cells/GridDragCell.js";
-import c from "./cells/GridFormattedCell.js";
-import l from "./cells/GridHeaderCell.js";
-import u from "./cells/GridNumberEditor.js";
-import d from "./cells/GridSelectButtonCell.js";
-import f from "./cells/GridSelectCell.js";
-import ne from "./cells/GridSelectEditor.js";
-import p from "./cells/GridTextEditor.js";
-import m from "./cells/GridTextureSelectCell.js";
-import h from "./cells/GridTextureSelectEditor.js";
-import { useUnitSuffix as g } from "./composables/useUnitSuffix.js";
-import _ from "./cells/GridUnitCell.js";
-import v from "./cells/GridUnitEditor.js";
-import { useCellTemplate as re } from "./composables/useCellTemplate.js";
+import s from "./cells/GridComboEditor.js";
+import c from "./cells/GridDeleteCell.js";
+import l from "./cells/GridDragCell.js";
+import ee from "./cells/GridFormattedCell.js";
+import te from "./cells/GridHeaderCell.js";
+import ne from "./cells/GridNumberEditor.js";
+import re from "./cells/GridSelectButtonCell.js";
+import u from "./cells/GridSelectCell.js";
+import d from "./cells/GridSelectEditor.js";
+import f from "./cells/GridTextEditor.js";
+import p from "./cells/GridTextureSelectCell.js";
+import m from "./cells/GridTextureSelectEditor.js";
+import { useUnitSuffix as h } from "./composables/useUnitSuffix.js";
+import g from "./cells/GridUnitCell.js";
+import _ from "./cells/GridUnitEditor.js";
+import { useCellTemplate as v } from "./composables/useCellTemplate.js";
 import y from "./parts/WellGridDeleteButton.js";
 import { computed as b, defineComponent as x, h as S, ref as C, toValue as w } from "vue";
-import { BasePlugin as T, VGridVueEditor as E } from "@revolist/vue3-datagrid";
+import { BasePlugin as ie, VGridVueEditor as T } from "@revolist/vue3-datagrid";
 //#region src/grid/useWellGridColumns.ts
-function ie(e) {
+function E(e) {
 	return e.type === "texture" ? "texture" : e.type === "select" ? "select" : e.type === "select-button" ? "select-button" : e.type === "combo" ? "combo" : e.type === "color" ? "color" : e.type === "checkbox" ? "checkbox" : e.unitType ? "unit" : e.formatter ? "formatted" : e.type === "number" ? "number" : "text";
 }
 var D = [
@@ -37,40 +37,45 @@ var D = [
 	"val",
 	"save",
 	"close",
-	"column"
+	"column",
+	"model",
+	"prop"
 ];
-function k(e, t) {
-	return E(x((n) => () => S(e, {
+function k(e) {
+	return e.prop != null && e.val !== e.model?.[e.prop];
+}
+function A(e, t) {
+	return T(x((n) => () => S(e, {
 		val: n.val,
 		save: n.save,
 		close: n.close,
 		...n.column?.column?.editorProps,
-		...t?.()
+		...t?.(n)
 	}), {
 		inheritAttrs: !1,
 		props: O
 	}));
 }
-var A = x((e) => (e.close(), () => null), {
+var j = x((e) => (e.close(), () => null), {
 	inheritAttrs: !1,
 	props: O
 });
-function j(x) {
-	let { onDelete: S, onChange: O, enableDrag: j = !0, enableDelete: M = !0 } = x, N = b(() => w(x.columns)), P = b(() => w(x.labels) ?? {}), F = b(() => w(x.components) ?? {}), I = t(), L = n(), R = re(), z = Object.fromEntries(D.map((e) => [e, g(e)])), B = {
-		noop: E(A),
-		text: E(p),
-		number: E(u),
-		color: E(o),
-		unit: k(v),
-		select: k(ne),
-		combo: k(ee, () => ({ hint: P.value.comboHint })),
-		texture: k(h, () => ({
-			placeholder: P.value.texturePlaceholder,
-			showPending: P.value.showPendingTextures
+function M(x) {
+	let { onDelete: S, onChange: O, enableDrag: M = !0, enableDelete: N = !0 } = x, P = b(() => w(x.columns)), F = b(() => w(x.labels) ?? {}), I = b(() => w(x.components) ?? {}), L = t(), R = n(), z = v(), B = Object.fromEntries(D.map((e) => [e, h(e)])), V = {
+		noop: T(j),
+		text: T(f),
+		number: T(ne),
+		color: T(o),
+		unit: A(_, (e) => ({ entered: k(e) })),
+		select: A(d),
+		combo: A(s, () => ({ hint: F.value.comboHint })),
+		texture: A(m, () => ({
+			placeholder: F.value.texturePlaceholder,
+			showPending: F.value.showPendingTextures
 		}))
-	}, V = R(l), H = b(() => N.value.find((e) => e.stretch) ?? null), U = b(() => H.value?.prop ?? null), W = b(() => U.value === null), G = b(() => {
+	}, ae = z(te), H = b(() => P.value.find((e) => e.stretch) ?? null), U = b(() => H.value?.prop ?? null), W = b(() => U.value === null), G = b(() => {
 		let e = [];
-		return j && e.push(class extends T {
+		return M && e.push(class extends ie {
 			constructor(e, t) {
 				super(e, t), this.addEventListener("rowdragstart", (e) => {
 					let t = e.detail.model?.name;
@@ -85,27 +90,27 @@ function j(x) {
 			editor: "unit",
 			numeric: !0,
 			editorProps: ({ col: e }) => ({ unitType: e.unitType }),
-			cellTemplate: ({ col: e }) => R(_, { unitType: e.unitType })
+			cellTemplate: ({ col: e }) => z(g, { unitType: e.unitType })
 		},
 		color: {
 			editor: "color",
-			cellTemplate: () => R(a)
+			cellTemplate: () => z(a)
 		},
 		select: {
 			editor: "select",
 			editorProps: ({ options: e }) => ({ options: e }),
-			cellTemplate: ({ options: e }) => R(f, { options: e })
+			cellTemplate: ({ options: e }) => z(u, { options: e })
 		},
 		combo: {
 			editor: "combo",
 			editorProps: ({ options: e }) => ({ options: e }),
-			cellTemplate: ({ options: e }) => R(f, { options: e })
+			cellTemplate: ({ options: e }) => z(u, { options: e })
 		},
-		formatted: { cellTemplate: ({ col: e }) => R(c, { formatter: e.formatter }) },
+		formatted: { cellTemplate: ({ col: e }) => z(ee, { formatter: e.formatter }) },
 		checkbox: {
 			editor: "noop",
 			cellProperties: K,
-			cellTemplate: ({ col: e }) => R(i, {
+			cellTemplate: ({ col: e }) => z(i, {
 				prop: e.prop,
 				onToggle: (e, t, n) => O(e, t, n)
 			})
@@ -113,7 +118,7 @@ function j(x) {
 		"select-button": {
 			editor: "noop",
 			cellProperties: K,
-			cellTemplate: ({ col: e, options: t }) => R(d, {
+			cellTemplate: ({ col: e, options: t }) => z(re, {
 				prop: e.prop,
 				options: t,
 				onChange: (e, t, n) => O(e, t, n)
@@ -121,21 +126,21 @@ function j(x) {
 		},
 		texture: {
 			editor: "texture",
-			cellTemplate: () => R(m)
+			cellTemplate: () => z(p)
 		}
 	};
 	function J(e) {
 		return e.map((e) => ({
 			value: e.value,
-			label: L(e.label) ?? e.value,
+			label: R(e.label) ?? e.value,
 			...e.deprecated && { deprecated: !0 }
 		}));
 	}
-	function Y(e) {
-		let t = q[ie(e)], n = {
+	function oe(e) {
+		let t = q[E(e)], n = {
 			col: e,
 			options: "options" in e ? J(e.options) : void 0
-		}, r = L(e.label) ?? "", i = e.unitType ? z[e.unitType].value : null, a = e.readonly ?? !1, o = L(e.info);
+		}, r = R(e.label) ?? "", i = e.unitType ? B[e.unitType].value : null, a = e.readonly ?? !1, o = R(e.info);
 		return {
 			prop: e.prop,
 			name: i ? `${r} (${i})` : r,
@@ -149,16 +154,16 @@ function j(x) {
 			cellTemplate: t.cellTemplate?.(n),
 			...o && {
 				info: o,
-				infoHighlight: L(e.infoHighlight),
-				infoLabel: L(P.value.columnInfo),
-				columnTemplate: V
+				infoHighlight: R(e.infoHighlight),
+				infoLabel: R(F.value.columnInfo),
+				columnTemplate: ae
 			}
 		};
 	}
-	let ae = b(() => {
+	let se = b(() => {
 		let t = [];
-		if (j) {
-			let n = e("dragHandle", F.value.dragHandle, void 0, I);
+		if (M) {
+			let n = e("dragHandle", I.value.dragHandle, void 0, L);
 			t.push({
 				prop: "_drag",
 				name: "",
@@ -166,77 +171,77 @@ function j(x) {
 				pin: "colPinStart",
 				rowDrag: !0,
 				cellProperties: () => ({ class: "well-grid-drag-cell" }),
-				...n && { cellTemplate: R(s, { part: n }) }
+				...n && { cellTemplate: z(l, { part: n }) }
 			});
 		}
-		return t.push(...N.value.map(Y)), M && t.push({
+		return t.push(...P.value.map(oe)), N && t.push({
 			prop: "_delete",
 			name: "",
 			size: 40,
 			readonly: !0,
 			pin: "colPinEnd",
 			cellProperties: () => ({ class: "well-grid-delete-cell" }),
-			cellTemplate: R(te, {
-				part: e("deleteButton", F.value.deleteButton, y, I),
-				label: L(w(x.deleteLabel)),
+			cellTemplate: z(c, {
+				part: e("deleteButton", I.value.deleteButton, y, L),
+				label: R(w(x.deleteLabel)),
 				requestDelete: S
 			})
 		}), t;
 	});
-	function X(e, t) {
-		return N.value.find((t) => t.prop === e)?.type === "checkbox" && typeof t == "string" ? t === "true" || t === "1" || t.toLowerCase() === "yes" : t;
+	function Y(e, t) {
+		return P.value.find((t) => t.prop === e)?.type === "checkbox" && typeof t == "string" ? t === "true" || t === "1" || t.toLowerCase() === "yes" : t;
 	}
-	let Z = C(null), Q = C(null), $ = !1;
-	function oe(e) {
+	let X = C(null), Z = C(null), Q = !1;
+	function ce(e) {
 		let { rowIndex: t, colIndex: n, column: r } = e.detail;
-		Q.value = r ? {
+		Z.value = r ? {
 			rowIndex: t,
 			colIndex: n,
 			prop: String(r.prop)
-		} : null, $ = !0;
+		} : null, Q = !0;
 	}
-	function se() {
-		$ = !1;
+	function le() {
+		Q = !1;
 	}
-	function ce(e) {
-		if ($) {
-			$ = !1;
+	function $(e) {
+		if (Q) {
+			Q = !1;
 			return;
 		}
-		let t = Q.value;
+		let t = Z.value;
 		if (!t) return;
 		let n = e.target.closest("[data-rgrow][data-rgcol]");
 		if (!n || Number(n.dataset.rgrow) !== t.rowIndex || Number(n.dataset.rgcol) !== t.colIndex) return;
-		let r = N.value.find((e) => e.prop === t.prop);
-		!r || r.readonly || (Z.value?.querySelector("revo-grid"))?.setCellEdit(t.rowIndex, t.prop);
+		let r = P.value.find((e) => e.prop === t.prop);
+		!r || r.readonly || (X.value?.querySelector("revo-grid"))?.setCellEdit(t.rowIndex, t.prop);
 	}
-	function le(e) {
+	function ue(e) {
 		let t = e.detail;
 		if ("rowIndex" in t) {
 			let { rowIndex: e, prop: n, val: r } = t;
-			O(e, String(n), X(String(n), r));
+			O(e, String(n), Y(String(n), r));
 			return;
 		}
 		let n = t.data;
 		if (n) for (let [e, t] of Object.entries(n)) {
 			let n = Number(e);
-			for (let [e, r] of Object.entries(t)) O(n, e, X(e, r));
+			for (let [e, r] of Object.entries(t)) O(n, e, Y(e, r));
 		}
 	}
 	return {
-		gridEditors: B,
-		revoColumns: ae,
+		gridEditors: V,
+		revoColumns: se,
 		gridStretch: W,
 		plugins: G,
-		coerceCellValue: X,
-		handleAfterEdit: le,
-		gridContainerRef: Z,
-		handleAfterFocus: oe,
-		handleGridMousedown: se,
-		handleGridClick: ce
+		coerceCellValue: Y,
+		handleAfterEdit: ue,
+		gridContainerRef: X,
+		handleAfterFocus: ce,
+		handleGridMousedown: le,
+		handleGridClick: $
 	};
 }
 //#endregion
-export { j as useWellGridColumns };
+export { M as useWellGridColumns };
 
 //# sourceMappingURL=useWellGridColumns.js.map