@welldot/vue 0.1.0 → 0.1.1
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/README.md +37 -0
- package/dist/grid/WellDataGrid.d.ts +5 -0
- package/dist/grid/WellDataGrid.d.ts.map +1 -1
- package/dist/grid/WellDataGrid.js +1 -1
- package/dist/grid/WellDataGrid.js.map +1 -1
- package/dist/grid/WellDataGrid.vue_vue_type_script_setup_true_lang.js +41 -38
- package/dist/grid/WellDataGrid.vue_vue_type_script_setup_true_lang.js.map +1 -1
- package/dist/grid/gridHeight.d.ts +11 -0
- package/dist/grid/gridHeight.d.ts.map +1 -0
- package/dist/grid/gridHeight.js +8 -0
- package/dist/grid/gridHeight.js.map +1 -0
- package/dist/style.css +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -1,9 +1,45 @@
|
|
|
1
1
|
# @welldot/vue
|
|
2
2
|
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
3
5
|
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.
|
|
4
6
|
|
|
5
7
|
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.
|
|
6
8
|
|
|
9
|
+
This README covers installation, Vue and Nuxt setup, the Tailwind tokens, `createWelldot` configuration, text and i18n, swappable parts, each component, the data grid and location subpaths, the composables and the theme.
|
|
10
|
+
|
|
11
|
+
## Table of contents
|
|
12
|
+
|
|
13
|
+
- [Install](#install)
|
|
14
|
+
- [Quick start](#quick-start)
|
|
15
|
+
- [Vue](#vue)
|
|
16
|
+
- [Nuxt](#nuxt)
|
|
17
|
+
- [Tailwind setup](#tailwind-setup)
|
|
18
|
+
- [Overriding the tokens](#overriding-the-tokens)
|
|
19
|
+
- [Configuration](#configuration)
|
|
20
|
+
- [Layering](#layering)
|
|
21
|
+
- [Text and i18n](#text-and-i18n)
|
|
22
|
+
- [Swappable parts](#swappable-parts)
|
|
23
|
+
- [Components](#components)
|
|
24
|
+
- [`WellLabeledField`](#welllabeledfield)
|
|
25
|
+
- [`WellChip`](#wellchip)
|
|
26
|
+
- [`WellTagSelect`](#welltagselect)
|
|
27
|
+
- [`WellComboSelect`](#wellcomboselect)
|
|
28
|
+
- [`WellInfoPopover`](#wellinfopopover)
|
|
29
|
+
- [`WellInputNumber`](#wellinputnumber)
|
|
30
|
+
- [`WellUnitInput`](#wellunitinput)
|
|
31
|
+
- [`WellTextureSelect`](#welltextureselect)
|
|
32
|
+
- [`WellTextureThumbnail`](#welltexturethumbnail)
|
|
33
|
+
- [Data grid (`@welldot/vue/grid`)](#data-grid-welldotvuegrid)
|
|
34
|
+
- [Location (`@welldot/vue/location`)](#location-welldotvuelocation)
|
|
35
|
+
- [`WellCoordinateInput`](#wellcoordinateinput)
|
|
36
|
+
- [`WellLocationMap`](#welllocationmap)
|
|
37
|
+
- [`WellLocationPicker`](#welllocationpicker)
|
|
38
|
+
- [Composables](#composables)
|
|
39
|
+
- [Theme](#theme)
|
|
40
|
+
- [Overriding the theme](#overriding-the-theme)
|
|
41
|
+
- [License](#license)
|
|
42
|
+
|
|
7
43
|
---
|
|
8
44
|
|
|
9
45
|
## Install
|
|
@@ -393,6 +429,7 @@ const columns: WellGridColumn[] = [
|
|
|
393
429
|
| `deleteLabel` | `LanguageTextInput` | Accessible label of each delete button |
|
|
394
430
|
| `labels` | `WellDataGridLabels` | `texturePlaceholder`, `showPendingTextures`, `columnInfo`, `comboHint` |
|
|
395
431
|
| `components` | `WellDataGridComponents` | `addButton`, `deleteButton`, `dragHandle` |
|
|
432
|
+
| `maxHeight` | `number` | Height cap in px; taller content scrolls (virtualized) inside the grid |
|
|
396
433
|
|
|
397
434
|
| Event | Payload |
|
|
398
435
|
| --------- | --------------------------------------------- |
|
|
@@ -12,6 +12,11 @@ type __VLS_Props = {
|
|
|
12
12
|
labels?: WellDataGridLabels;
|
|
13
13
|
/** Part overrides: `addButton`, `deleteButton`, `dragHandle`. */
|
|
14
14
|
components?: WellDataGridComponents;
|
|
15
|
+
/**
|
|
16
|
+
* Height cap in px. Taller content scrolls inside the grid, so RevoGrid
|
|
17
|
+
* renders only the visible rows. Without it the grid grows with its rows.
|
|
18
|
+
*/
|
|
19
|
+
maxHeight?: number;
|
|
15
20
|
};
|
|
16
21
|
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
17
22
|
delete: (index: number) => any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WellDataGrid.d.ts","sourceRoot":"","sources":["../../src/grid/WellDataGrid.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"WellDataGrid.d.ts","sourceRoot":"","sources":["../../src/grid/WellDataGrid.vue"],"names":[],"mappings":"AAsMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAMvD,OAAO,KAAK,EACV,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACf,MAAM,SAAS,CAAC;AAKjB,KAAK,WAAW,GAAG;IACjB,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IAChC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,yEAAyE;IACzE,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,iEAAiE;IACjE,UAAU,CAAC,EAAE,sBAAsB,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsMF,QAAA,MAAM,YAAY;;;;;;;;;;kFAGhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
|
|
@@ -2,7 +2,7 @@ import e from "../_virtual/_plugin-vue_export-helper.js";
|
|
|
2
2
|
import t from "./WellDataGrid.vue_vue_type_script_setup_true_lang.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
//#region src/grid/WellDataGrid.vue
|
|
5
|
-
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-
|
|
5
|
+
var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-956e05cd"]]);
|
|
6
6
|
//#endregion
|
|
7
7
|
export { n as default };
|
|
8
8
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WellDataGrid.js","names":[],"sources":["../../src/grid/WellDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Editable spreadsheet for a well feature array (lithology, casing, screens…)\n * built on RevoGrid. Controlled: the grid never mutates `rows`, it emits\n * `add` / `delete` / `change` / `reorder` and the parent updates its store.\n *\n * - Columns are `WellGridColumn`s; their text is `LanguageTextInput`,\n * resolved for the configured locale. Unit columns follow the configured\n * display units.\n * - Parts (`components` prop, then `createWelldot({ components })`, then the\n * built-in default): `addButton` (`WellAddButtonProps`), `deleteButton`\n * (`WellDeleteButtonProps`), `dragHandle` (visual only).\n * - Rendered on the client only (after mount); a skeleton shows until then.\n * - Needs `@welldot/vue/tailwind.css` (which imports `grid.css`) for the\n * RevoGrid theme.\n */\nimport { VGrid } from '@revolist/vue3-datagrid';\nimport type { LanguageTextInput } from '@welldot/core';\nimport { computed, onMounted, ref } from 'vue';\nimport { useWellText } from '../composables/useWellText';\nimport { resolvePart, useWelldotConfig } from '../config';\nimport WellGridAddButton from './parts/WellGridAddButton.vue';\nimport type {\n WellDataGridComponents,\n WellDataGridLabels,\n WellGridColumn,\n} from './types';\nimport { useWellGridColumns } from './useWellGridColumns';\n\n// ─── Props / Emits ────────────────────────────────────────────────────────────\n\nconst props = defineProps<{\n /** Reactive array from the store (via deep-proxy or plain copy). */\n rows: Record<string, unknown>[];\n columns: WellGridColumn[];\n /** Label of the add-row button. Icon-only when omitted. */\n addLabel?: LanguageTextInput;\n /** Label handed to the delete-row button (its aria-label by default). */\n deleteLabel?: LanguageTextInput;\n /** Grid-internal text (texture editor, column info trigger). */\n labels?: WellDataGridLabels;\n /** Part overrides: `addButton`, `deleteButton`, `dragHandle`. */\n components?: WellDataGridComponents;\n}>();\n\nconst emit = defineEmits<{\n /** Parent should push a new row to the store */\n add: [];\n /** Parent should splice row at `index` from the store */\n delete: [index: number];\n /** Parent should assign `value` to `store.array[index][prop]` */\n change: [index: number, prop: string, value: unknown];\n /** Parent should reorder row from `from` to `to` */\n reorder: [from: number, to: number];\n}>();\n\nconst config = useWelldotConfig();\nconst text = useWellText();\n\nconst {\n gridEditors,\n revoColumns,\n gridStretch,\n plugins,\n handleAfterEdit,\n gridContainerRef,\n handleAfterFocus,\n handleGridMousedown,\n handleGridClick,\n} = useWellGridColumns({\n columns: () => props.columns,\n onDelete: rowIndex => emit('delete', rowIndex),\n onChange: (rowIndex, prop, value) => emit('change', rowIndex, prop, value),\n deleteLabel: () => props.deleteLabel,\n labels: () => props.labels,\n components: () => props.components,\n});\n\nconst addButton = computed(() =>\n resolvePart(\n 'addButton',\n props.components?.addButton,\n WellGridAddButton,\n config,\n ),\n);\n\n// ─── Client-only rendering ────────────────────────────────────────────────────\n// RevoGrid is a web component; render it only once mounted in the browser.\n\nconst mounted = ref(false);\nonMounted(() => {\n mounted.value = true;\n});\n\n// ─── Source ───────────────────────────────────────────────────────────────────\n// Spread to a plain array so RevoGrid's internal diffing does not fight the\n// Immer/deep-proxy wrapper on the store.\n\nconst gridSource = computed(() => props.rows.map(r => ({ ...r })));\n\n// ─── Height — auto-size based on row count
|
|
1
|
+
{"version":3,"file":"WellDataGrid.js","names":[],"sources":["../../src/grid/WellDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Editable spreadsheet for a well feature array (lithology, casing, screens…)\n * built on RevoGrid. Controlled: the grid never mutates `rows`, it emits\n * `add` / `delete` / `change` / `reorder` and the parent updates its store.\n *\n * - Columns are `WellGridColumn`s; their text is `LanguageTextInput`,\n * resolved for the configured locale. Unit columns follow the configured\n * display units.\n * - Parts (`components` prop, then `createWelldot({ components })`, then the\n * built-in default): `addButton` (`WellAddButtonProps`), `deleteButton`\n * (`WellDeleteButtonProps`), `dragHandle` (visual only).\n * - Rendered on the client only (after mount); a skeleton shows until then.\n * - Needs `@welldot/vue/tailwind.css` (which imports `grid.css`) for the\n * RevoGrid theme.\n */\nimport { VGrid } from '@revolist/vue3-datagrid';\nimport type { LanguageTextInput } from '@welldot/core';\nimport { computed, onMounted, ref } from 'vue';\nimport { useWellText } from '../composables/useWellText';\nimport { resolvePart, useWelldotConfig } from '../config';\nimport { GRID_HEADER_H, GRID_ROW_H, gridHeight } from './gridHeight';\nimport WellGridAddButton from './parts/WellGridAddButton.vue';\nimport type {\n WellDataGridComponents,\n WellDataGridLabels,\n WellGridColumn,\n} from './types';\nimport { useWellGridColumns } from './useWellGridColumns';\n\n// ─── Props / Emits ────────────────────────────────────────────────────────────\n\nconst props = defineProps<{\n /** Reactive array from the store (via deep-proxy or plain copy). */\n rows: Record<string, unknown>[];\n columns: WellGridColumn[];\n /** Label of the add-row button. Icon-only when omitted. */\n addLabel?: LanguageTextInput;\n /** Label handed to the delete-row button (its aria-label by default). */\n deleteLabel?: LanguageTextInput;\n /** Grid-internal text (texture editor, column info trigger). */\n labels?: WellDataGridLabels;\n /** Part overrides: `addButton`, `deleteButton`, `dragHandle`. */\n components?: WellDataGridComponents;\n /**\n * Height cap in px. Taller content scrolls inside the grid, so RevoGrid\n * renders only the visible rows. Without it the grid grows with its rows.\n */\n maxHeight?: number;\n}>();\n\nconst emit = defineEmits<{\n /** Parent should push a new row to the store */\n add: [];\n /** Parent should splice row at `index` from the store */\n delete: [index: number];\n /** Parent should assign `value` to `store.array[index][prop]` */\n change: [index: number, prop: string, value: unknown];\n /** Parent should reorder row from `from` to `to` */\n reorder: [from: number, to: number];\n}>();\n\nconst config = useWelldotConfig();\nconst text = useWellText();\n\nconst {\n gridEditors,\n revoColumns,\n gridStretch,\n plugins,\n handleAfterEdit,\n gridContainerRef,\n handleAfterFocus,\n handleGridMousedown,\n handleGridClick,\n} = useWellGridColumns({\n columns: () => props.columns,\n onDelete: rowIndex => emit('delete', rowIndex),\n onChange: (rowIndex, prop, value) => emit('change', rowIndex, prop, value),\n deleteLabel: () => props.deleteLabel,\n labels: () => props.labels,\n components: () => props.components,\n});\n\nconst addButton = computed(() =>\n resolvePart(\n 'addButton',\n props.components?.addButton,\n WellGridAddButton,\n config,\n ),\n);\n\n// ─── Client-only rendering ────────────────────────────────────────────────────\n// RevoGrid is a web component; render it only once mounted in the browser.\n\nconst mounted = ref(false);\nonMounted(() => {\n mounted.value = true;\n});\n\n// ─── Source ───────────────────────────────────────────────────────────────────\n// Spread to a plain array so RevoGrid's internal diffing does not fight the\n// Immer/deep-proxy wrapper on the store.\n\nconst gridSource = computed(() => props.rows.map(r => ({ ...r })));\n\n// ─── Height — auto-size based on row count, up to `maxHeight` ─────────────────\n\nconst HEADER_H = GRID_HEADER_H;\nconst ROW_H = GRID_ROW_H;\n\nconst height = computed(\n () => `${gridHeight(props.rows.length, props.maxHeight)}px`,\n);\n\n// ─── Event handlers ───────────────────────────────────────────────────────────\n\nfunction handleRowOrderChanged(\n event: CustomEvent<{ from: number; to: number }>,\n) {\n emit('reorder', event.detail.from, event.detail.to);\n}\n</script>\n\n<template>\n <div class=\"well-data-grid-wrapper flex flex-col\">\n <div\n v-show=\"rows.length > 0\"\n ref=\"gridContainerRef\"\n class=\"well-grid-container\"\n @mousedown.capture=\"handleGridMousedown\"\n @click=\"handleGridClick\"\n >\n <VGrid\n v-if=\"mounted\"\n class=\"well-data-grid\"\n :style=\"{ height }\"\n :row-size=\"ROW_H\"\n :stretch=\"gridStretch\"\n :source=\"gridSource\"\n :columns=\"revoColumns\"\n :editors=\"gridEditors\"\n :plugins=\"plugins\"\n :range=\"true\"\n can-drag\n theme=\"compact\"\n @afteredit=\"handleAfterEdit\"\n @afterfocus=\"handleAfterFocus\"\n @roworderchanged=\"handleRowOrderChanged\"\n />\n <div\n v-else\n class=\"well-grid-skeleton animate-pulse rounded bg-surface-100 w-full h-full\"\n />\n </div>\n\n <component\n :is=\"addButton\"\n :label=\"text(props.addLabel)\"\n @click=\"emit('add')\"\n />\n </div>\n</template>\n\n<style scoped>\n.well-data-grid-wrapper {\n --accent-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);\n --color-primary-soft: color-mix(\n in srgb,\n var(--color-primary-500) 25%,\n transparent\n );\n}\n\n.well-data-grid :deep(.header-rgRow) {\n height: v-bind('`${HEADER_H}px`');\n}\n</style>\n"],"mappings":""}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { resolvePart as e, useWelldotConfig as t } from "../config.js";
|
|
2
2
|
import { useWellText as n } from "../composables/useWellText.js";
|
|
3
3
|
import { useWellGridColumns as r } from "./useWellGridColumns.js";
|
|
4
|
-
import i from "./
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
4
|
+
import { gridHeight as i } from "./gridHeight.js";
|
|
5
|
+
import a from "./parts/WellGridAddButton.js";
|
|
6
|
+
import { computed as o, createBlock as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeStyle as d, onMounted as f, openBlock as p, ref as m, resolveDynamicComponent as h, unref as g, useCssVars as _, vShow as v, withDirectives as y } from "vue";
|
|
7
|
+
import { VGrid as b } from "@revolist/vue3-datagrid";
|
|
7
8
|
//#region src/grid/WellDataGrid.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
-
var
|
|
9
|
+
var x = { class: "well-data-grid-wrapper flex flex-col" }, S = {
|
|
9
10
|
key: 1,
|
|
10
11
|
class: "well-grid-skeleton animate-pulse rounded bg-surface-100 w-full h-full"
|
|
11
|
-
},
|
|
12
|
+
}, C = /* @__PURE__ */ u({
|
|
12
13
|
__name: "WellDataGrid",
|
|
13
14
|
props: {
|
|
14
15
|
rows: {},
|
|
@@ -16,7 +17,8 @@ var b = { class: "well-data-grid-wrapper flex flex-col" }, x = {
|
|
|
16
17
|
addLabel: {},
|
|
17
18
|
deleteLabel: {},
|
|
18
19
|
labels: {},
|
|
19
|
-
components: {}
|
|
20
|
+
components: {},
|
|
21
|
+
maxHeight: {}
|
|
20
22
|
},
|
|
21
23
|
emits: [
|
|
22
24
|
"add",
|
|
@@ -24,47 +26,48 @@ var b = { class: "well-data-grid-wrapper flex flex-col" }, x = {
|
|
|
24
26
|
"change",
|
|
25
27
|
"reorder"
|
|
26
28
|
],
|
|
27
|
-
setup(
|
|
28
|
-
|
|
29
|
-
let
|
|
30
|
-
columns: () =>
|
|
31
|
-
onDelete: (e) =>
|
|
32
|
-
onChange: (e, t, n) =>
|
|
33
|
-
deleteLabel: () =>
|
|
34
|
-
labels: () =>
|
|
35
|
-
components: () =>
|
|
36
|
-
}),
|
|
37
|
-
|
|
38
|
-
|
|
29
|
+
setup(u, { emit: C }) {
|
|
30
|
+
_((e) => ({ v3e240dfe: `${g(B)}px` }));
|
|
31
|
+
let w = u, T = C, E = t(), D = n(), { gridEditors: O, revoColumns: k, gridStretch: A, plugins: j, handleAfterEdit: M, gridContainerRef: N, handleAfterFocus: P, handleGridMousedown: F, handleGridClick: I } = r({
|
|
32
|
+
columns: () => w.columns,
|
|
33
|
+
onDelete: (e) => T("delete", e),
|
|
34
|
+
onChange: (e, t, n) => T("change", e, t, n),
|
|
35
|
+
deleteLabel: () => w.deleteLabel,
|
|
36
|
+
labels: () => w.labels,
|
|
37
|
+
components: () => w.components
|
|
38
|
+
}), L = o(() => e("addButton", w.components?.addButton, a, E)), R = m(!1);
|
|
39
|
+
f(() => {
|
|
40
|
+
R.value = !0;
|
|
39
41
|
});
|
|
40
|
-
let
|
|
42
|
+
let z = o(() => w.rows.map((e) => ({ ...e }))), B = 38, V = o(() => `${i(w.rows.length, w.maxHeight)}px`);
|
|
41
43
|
function H(e) {
|
|
42
|
-
|
|
44
|
+
T("reorder", e.detail.from, e.detail.to);
|
|
43
45
|
}
|
|
44
|
-
return (e, t) => (
|
|
46
|
+
return (e, t) => (p(), c("div", x, [y(l("div", {
|
|
45
47
|
ref_key: "gridContainerRef",
|
|
46
|
-
ref:
|
|
48
|
+
ref: N,
|
|
47
49
|
class: "well-grid-container",
|
|
48
|
-
onMousedownCapture: t[0] || (t[0] = (...e) =>
|
|
49
|
-
onClick: t[1] || (t[1] = (...e) =>
|
|
50
|
-
}, [
|
|
50
|
+
onMousedownCapture: t[0] || (t[0] = (...e) => g(F) && g(F)(...e)),
|
|
51
|
+
onClick: t[1] || (t[1] = (...e) => g(I) && g(I)(...e))
|
|
52
|
+
}, [R.value ? (p(), s(g(b), {
|
|
51
53
|
key: 0,
|
|
52
54
|
class: "well-data-grid",
|
|
53
|
-
style:
|
|
54
|
-
"row-size":
|
|
55
|
-
stretch:
|
|
56
|
-
source:
|
|
57
|
-
columns:
|
|
58
|
-
editors:
|
|
59
|
-
plugins:
|
|
55
|
+
style: d({ height: V.value }),
|
|
56
|
+
"row-size": g(30),
|
|
57
|
+
stretch: g(A),
|
|
58
|
+
source: z.value,
|
|
59
|
+
columns: g(k),
|
|
60
|
+
editors: g(O),
|
|
61
|
+
plugins: g(j),
|
|
60
62
|
range: !0,
|
|
61
63
|
"can-drag": "",
|
|
62
64
|
theme: "compact",
|
|
63
|
-
onAfteredit:
|
|
64
|
-
onAfterfocus:
|
|
65
|
+
onAfteredit: g(M),
|
|
66
|
+
onAfterfocus: g(P),
|
|
65
67
|
onRoworderchanged: H
|
|
66
68
|
}, null, 8, [
|
|
67
69
|
"style",
|
|
70
|
+
"row-size",
|
|
68
71
|
"stretch",
|
|
69
72
|
"source",
|
|
70
73
|
"columns",
|
|
@@ -72,13 +75,13 @@ var b = { class: "well-data-grid-wrapper flex flex-col" }, x = {
|
|
|
72
75
|
"plugins",
|
|
73
76
|
"onAfteredit",
|
|
74
77
|
"onAfterfocus"
|
|
75
|
-
])) : (
|
|
76
|
-
label:
|
|
77
|
-
onClick: t[2] || (t[2] = (e) =>
|
|
78
|
+
])) : (p(), c("div", S))], 544), [[v, u.rows.length > 0]]), (p(), s(h(L.value), {
|
|
79
|
+
label: g(D)(w.addLabel),
|
|
80
|
+
onClick: t[2] || (t[2] = (e) => T("add"))
|
|
78
81
|
}, null, 8, ["label"]))]));
|
|
79
82
|
}
|
|
80
83
|
});
|
|
81
84
|
//#endregion
|
|
82
|
-
export {
|
|
85
|
+
export { C as default };
|
|
83
86
|
|
|
84
87
|
//# sourceMappingURL=WellDataGrid.vue_vue_type_script_setup_true_lang.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WellDataGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/grid/WellDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Editable spreadsheet for a well feature array (lithology, casing, screens…)\n * built on RevoGrid. Controlled: the grid never mutates `rows`, it emits\n * `add` / `delete` / `change` / `reorder` and the parent updates its store.\n *\n * - Columns are `WellGridColumn`s; their text is `LanguageTextInput`,\n * resolved for the configured locale. Unit columns follow the configured\n * display units.\n * - Parts (`components` prop, then `createWelldot({ components })`, then the\n * built-in default): `addButton` (`WellAddButtonProps`), `deleteButton`\n * (`WellDeleteButtonProps`), `dragHandle` (visual only).\n * - Rendered on the client only (after mount); a skeleton shows until then.\n * - Needs `@welldot/vue/tailwind.css` (which imports `grid.css`) for the\n * RevoGrid theme.\n */\nimport { VGrid } from '@revolist/vue3-datagrid';\nimport type { LanguageTextInput } from '@welldot/core';\nimport { computed, onMounted, ref } from 'vue';\nimport { useWellText } from '../composables/useWellText';\nimport { resolvePart, useWelldotConfig } from '../config';\nimport WellGridAddButton from './parts/WellGridAddButton.vue';\nimport type {\n WellDataGridComponents,\n WellDataGridLabels,\n WellGridColumn,\n} from './types';\nimport { useWellGridColumns } from './useWellGridColumns';\n\n// ─── Props / Emits ────────────────────────────────────────────────────────────\n\nconst props = defineProps<{\n /** Reactive array from the store (via deep-proxy or plain copy). */\n rows: Record<string, unknown>[];\n columns: WellGridColumn[];\n /** Label of the add-row button. Icon-only when omitted. */\n addLabel?: LanguageTextInput;\n /** Label handed to the delete-row button (its aria-label by default). */\n deleteLabel?: LanguageTextInput;\n /** Grid-internal text (texture editor, column info trigger). */\n labels?: WellDataGridLabels;\n /** Part overrides: `addButton`, `deleteButton`, `dragHandle`. */\n components?: WellDataGridComponents;\n}>();\n\nconst emit = defineEmits<{\n /** Parent should push a new row to the store */\n add: [];\n /** Parent should splice row at `index` from the store */\n delete: [index: number];\n /** Parent should assign `value` to `store.array[index][prop]` */\n change: [index: number, prop: string, value: unknown];\n /** Parent should reorder row from `from` to `to` */\n reorder: [from: number, to: number];\n}>();\n\nconst config = useWelldotConfig();\nconst text = useWellText();\n\nconst {\n gridEditors,\n revoColumns,\n gridStretch,\n plugins,\n handleAfterEdit,\n gridContainerRef,\n handleAfterFocus,\n handleGridMousedown,\n handleGridClick,\n} = useWellGridColumns({\n columns: () => props.columns,\n onDelete: rowIndex => emit('delete', rowIndex),\n onChange: (rowIndex, prop, value) => emit('change', rowIndex, prop, value),\n deleteLabel: () => props.deleteLabel,\n labels: () => props.labels,\n components: () => props.components,\n});\n\nconst addButton = computed(() =>\n resolvePart(\n 'addButton',\n props.components?.addButton,\n WellGridAddButton,\n config,\n ),\n);\n\n// ─── Client-only rendering ────────────────────────────────────────────────────\n// RevoGrid is a web component; render it only once mounted in the browser.\n\nconst mounted = ref(false);\nonMounted(() => {\n mounted.value = true;\n});\n\n// ─── Source ───────────────────────────────────────────────────────────────────\n// Spread to a plain array so RevoGrid's internal diffing does not fight the\n// Immer/deep-proxy wrapper on the store.\n\nconst gridSource = computed(() => props.rows.map(r => ({ ...r })));\n\n// ─── Height — auto-size based on row count
|
|
1
|
+
{"version":3,"file":"WellDataGrid.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../src/grid/WellDataGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Editable spreadsheet for a well feature array (lithology, casing, screens…)\n * built on RevoGrid. Controlled: the grid never mutates `rows`, it emits\n * `add` / `delete` / `change` / `reorder` and the parent updates its store.\n *\n * - Columns are `WellGridColumn`s; their text is `LanguageTextInput`,\n * resolved for the configured locale. Unit columns follow the configured\n * display units.\n * - Parts (`components` prop, then `createWelldot({ components })`, then the\n * built-in default): `addButton` (`WellAddButtonProps`), `deleteButton`\n * (`WellDeleteButtonProps`), `dragHandle` (visual only).\n * - Rendered on the client only (after mount); a skeleton shows until then.\n * - Needs `@welldot/vue/tailwind.css` (which imports `grid.css`) for the\n * RevoGrid theme.\n */\nimport { VGrid } from '@revolist/vue3-datagrid';\nimport type { LanguageTextInput } from '@welldot/core';\nimport { computed, onMounted, ref } from 'vue';\nimport { useWellText } from '../composables/useWellText';\nimport { resolvePart, useWelldotConfig } from '../config';\nimport { GRID_HEADER_H, GRID_ROW_H, gridHeight } from './gridHeight';\nimport WellGridAddButton from './parts/WellGridAddButton.vue';\nimport type {\n WellDataGridComponents,\n WellDataGridLabels,\n WellGridColumn,\n} from './types';\nimport { useWellGridColumns } from './useWellGridColumns';\n\n// ─── Props / Emits ────────────────────────────────────────────────────────────\n\nconst props = defineProps<{\n /** Reactive array from the store (via deep-proxy or plain copy). */\n rows: Record<string, unknown>[];\n columns: WellGridColumn[];\n /** Label of the add-row button. Icon-only when omitted. */\n addLabel?: LanguageTextInput;\n /** Label handed to the delete-row button (its aria-label by default). */\n deleteLabel?: LanguageTextInput;\n /** Grid-internal text (texture editor, column info trigger). */\n labels?: WellDataGridLabels;\n /** Part overrides: `addButton`, `deleteButton`, `dragHandle`. */\n components?: WellDataGridComponents;\n /**\n * Height cap in px. Taller content scrolls inside the grid, so RevoGrid\n * renders only the visible rows. Without it the grid grows with its rows.\n */\n maxHeight?: number;\n}>();\n\nconst emit = defineEmits<{\n /** Parent should push a new row to the store */\n add: [];\n /** Parent should splice row at `index` from the store */\n delete: [index: number];\n /** Parent should assign `value` to `store.array[index][prop]` */\n change: [index: number, prop: string, value: unknown];\n /** Parent should reorder row from `from` to `to` */\n reorder: [from: number, to: number];\n}>();\n\nconst config = useWelldotConfig();\nconst text = useWellText();\n\nconst {\n gridEditors,\n revoColumns,\n gridStretch,\n plugins,\n handleAfterEdit,\n gridContainerRef,\n handleAfterFocus,\n handleGridMousedown,\n handleGridClick,\n} = useWellGridColumns({\n columns: () => props.columns,\n onDelete: rowIndex => emit('delete', rowIndex),\n onChange: (rowIndex, prop, value) => emit('change', rowIndex, prop, value),\n deleteLabel: () => props.deleteLabel,\n labels: () => props.labels,\n components: () => props.components,\n});\n\nconst addButton = computed(() =>\n resolvePart(\n 'addButton',\n props.components?.addButton,\n WellGridAddButton,\n config,\n ),\n);\n\n// ─── Client-only rendering ────────────────────────────────────────────────────\n// RevoGrid is a web component; render it only once mounted in the browser.\n\nconst mounted = ref(false);\nonMounted(() => {\n mounted.value = true;\n});\n\n// ─── Source ───────────────────────────────────────────────────────────────────\n// Spread to a plain array so RevoGrid's internal diffing does not fight the\n// Immer/deep-proxy wrapper on the store.\n\nconst gridSource = computed(() => props.rows.map(r => ({ ...r })));\n\n// ─── Height — auto-size based on row count, up to `maxHeight` ─────────────────\n\nconst HEADER_H = GRID_HEADER_H;\nconst ROW_H = GRID_ROW_H;\n\nconst height = computed(\n () => `${gridHeight(props.rows.length, props.maxHeight)}px`,\n);\n\n// ─── Event handlers ───────────────────────────────────────────────────────────\n\nfunction handleRowOrderChanged(\n event: CustomEvent<{ from: number; to: number }>,\n) {\n emit('reorder', event.detail.from, event.detail.to);\n}\n</script>\n\n<template>\n <div class=\"well-data-grid-wrapper flex flex-col\">\n <div\n v-show=\"rows.length > 0\"\n ref=\"gridContainerRef\"\n class=\"well-grid-container\"\n @mousedown.capture=\"handleGridMousedown\"\n @click=\"handleGridClick\"\n >\n <VGrid\n v-if=\"mounted\"\n class=\"well-data-grid\"\n :style=\"{ height }\"\n :row-size=\"ROW_H\"\n :stretch=\"gridStretch\"\n :source=\"gridSource\"\n :columns=\"revoColumns\"\n :editors=\"gridEditors\"\n :plugins=\"plugins\"\n :range=\"true\"\n can-drag\n theme=\"compact\"\n @afteredit=\"handleAfterEdit\"\n @afterfocus=\"handleAfterFocus\"\n @roworderchanged=\"handleRowOrderChanged\"\n />\n <div\n v-else\n class=\"well-grid-skeleton animate-pulse rounded bg-surface-100 w-full h-full\"\n />\n </div>\n\n <component\n :is=\"addButton\"\n :label=\"text(props.addLabel)\"\n @click=\"emit('add')\"\n />\n </div>\n</template>\n\n<style scoped>\n.well-data-grid-wrapper {\n --accent-soft: color-mix(in srgb, var(--color-primary-500) 12%, transparent);\n --color-primary-soft: color-mix(\n in srgb,\n var(--color-primary-500) 25%,\n transparent\n );\n}\n\n.well-data-grid :deep(.header-rgRow) {\n height: v-bind('`${HEADER_H}px`');\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,IAAM,IAAQ,GAmBR,IAAO,GAWP,IAAS,GAAkB,EAC3B,IAAO,GAAa,EAEpB,EACJ,gBACA,gBACA,gBACA,YACA,oBACA,qBACA,qBACA,wBACA,uBACE,EAAmB;GACrB,eAAe,EAAM;GACrB,WAAU,MAAY,EAAK,UAAU,EAAS;GAC9C,WAAW,GAAU,GAAM,MAAU,EAAK,UAAU,GAAU,GAAM,EAAM;GAC1E,mBAAmB,EAAM;GACzB,cAAc,EAAM;GACpB,kBAAkB,EAAM;GACzB,CAAC,EAEI,IAAY,QAChB,EACE,aACA,EAAM,YAAY,WAClB,GACA,EACD,CACF,EAKK,IAAU,EAAI,GAAM;AAC1B,UAAgB;AACd,KAAQ,QAAQ;IAChB;EAMF,IAAM,IAAa,QAAe,EAAM,KAAK,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC,EAI5D,IAAA,IAGA,IAAS,QACP,GAAG,EAAW,EAAM,KAAK,QAAQ,EAAM,UAAU,CAAC,IACzD;EAID,SAAS,EACP,GACA;AACA,KAAK,WAAW,EAAM,OAAO,MAAM,EAAM,OAAO,GAAG;;yBAKnD,EAoCM,OApCN,GAoCM,CAAA,EAnCJ,EA4BM,OAAA;YA1BA;GAAJ,KAAI;GACJ,OAAM;iDACc,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAmB;GACtC,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,GAAA,EAAe;MAGf,EAAA,SAAA,GAAA,EADR,EAgBE,EAAA,EAAA,EAAA;;GAdA,OAAM;GACL,OAAK,EAAA,EAAA,QAAI,EAAA,OAAM,CAAA;GACf,YAAU,EAAA,GAAK;GACf,SAAS,EAAA,EAAW;GACpB,QAAQ,EAAA;GACR,SAAS,EAAA,EAAW;GACpB,SAAS,EAAA,EAAW;GACpB,SAAS,EAAA,EAAO;GAChB,OAAO;GACR,YAAA;GACA,OAAM;GACL,aAAW,EAAA,EAAe;GAC1B,cAAY,EAAA,EAAgB;GAC5B,mBAAiB;;;;;;;;;;;cAEpB,EAGE,OAHF,EAGE,EAAA,EAAA,IAAA,EAAA,CAAA,CAAA,GA1BM,EAAA,KAAK,SAAM,EAAA,CAAA,CAAA,GAAA,GAAA,EA6BrB,EAIE,EAHK,EAAA,MAAS,EAAA;GACb,OAAO,EAAA,EAAI,CAAC,EAAM,SAAQ;GAC1B,SAAK,EAAA,OAAA,EAAA,MAAA,MAAE,EAAI,MAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/** Header row height in px. */
|
|
2
|
+
export declare const GRID_HEADER_H = 38;
|
|
3
|
+
/** Body row height in px (RevoGrid `row-size`). */
|
|
4
|
+
export declare const GRID_ROW_H = 30;
|
|
5
|
+
/**
|
|
6
|
+
* Grid height in px for `rowCount` rows: header + rows (at least one) + 2px
|
|
7
|
+
* of border, capped at `maxHeight` when given. Past the cap RevoGrid scrolls
|
|
8
|
+
* and renders only the visible rows.
|
|
9
|
+
*/
|
|
10
|
+
export declare function gridHeight(rowCount: number, maxHeight?: number): number;
|
|
11
|
+
//# sourceMappingURL=gridHeight.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gridHeight.d.ts","sourceRoot":"","sources":["../../src/grid/gridHeight.ts"],"names":[],"mappings":"AAEA,+BAA+B;AAC/B,eAAO,MAAM,aAAa,KAAK,CAAC;AAChC,mDAAmD;AACnD,eAAO,MAAM,UAAU,KAAK,CAAC;AAE7B;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAGvE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"gridHeight.js","names":[],"sources":["../../src/grid/gridHeight.ts"],"sourcesContent":["// Height of `WellDataGrid`: it grows with its rows, up to an optional cap.\n\n/** Header row height in px. */\nexport const GRID_HEADER_H = 38;\n/** Body row height in px (RevoGrid `row-size`). */\nexport const GRID_ROW_H = 30;\n\n/**\n * Grid height in px for `rowCount` rows: header + rows (at least one) + 2px\n * of border, capped at `maxHeight` when given. Past the cap RevoGrid scrolls\n * and renders only the visible rows.\n */\nexport function gridHeight(rowCount: number, maxHeight?: number): number {\n const height = GRID_HEADER_H + Math.max(1, rowCount) * GRID_ROW_H + 2;\n return maxHeight ? Math.min(height, maxHeight) : height;\n}\n"],"mappings":"AAYA,SAAgB,EAAW,GAAkB,GAA4B;CACvE,IAAM,IAAA,KAAyB,KAAK,IAAI,GAAG,EAAS,GAAA,KAAgB;AACpE,QAAO,IAAY,KAAK,IAAI,GAAQ,EAAU,GAAG"}
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.texture-svg[data-v-63e788ad]{border:1px solid #0000001f;border-radius:3px;flex-shrink:0;display:block}.well-data-grid-wrapper[data-v-
|
|
1
|
+
.texture-svg[data-v-63e788ad]{border:1px solid #0000001f;border-radius:3px;flex-shrink:0;display:block}.well-data-grid-wrapper[data-v-956e05cd]{--accent-soft:color-mix(in srgb, var(--color-primary-500) 12%, transparent);--color-primary-soft:color-mix(in srgb, var(--color-primary-500) 25%, transparent)}.well-data-grid[data-v-956e05cd] .header-rgRow{height:var(--v3e240dfe)}.app-chip[data-v-8d006c88]{border:1px solid var(--color-surface-200);background:var(--color-surface-50);color:var(--color-content-300);font-family:var(--font-display);cursor:pointer;border-radius:999px;align-items:center;gap:5px;padding:4px 12px;font-size:11px;font-weight:500;line-height:1.4;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.app-chip[data-v-8d006c88]:not(:-webkit-any(.app-chip--static,.active)):hover{background:var(--color-surface-100);color:var(--color-content-100);border-color:var(--color-surface-300)}.app-chip[data-v-8d006c88]:not(:is(.app-chip--static,.active)):hover{background:var(--color-surface-100);color:var(--color-content-100);border-color:var(--color-surface-300)}.app-chip.active[data-v-8d006c88]{background:var(--color-primary-50);color:var(--color-primary-600);border-color:var(--color-primary-200)}.app-chip.active[data-v-8d006c88]:not(.app-chip--static):hover{background:var(--color-primary-100);color:var(--color-primary-700);border-color:var(--color-primary-300)}.app-chip--static[data-v-8d006c88]{cursor:default;padding-right:6px}.app-chip-remove[data-v-8d006c88]{color:inherit;opacity:.6;cursor:pointer;background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;margin-left:1px;padding:2px;transition:opacity .12s,background .12s;display:inline-flex}.app-chip-remove[data-v-8d006c88]:hover{opacity:1;background:color-mix(in srgb, currentColor 12%, transparent)}.app-chip[data-v-8d006c88]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary-500) 25%, transparent);outline:none}.app-chip-remove[data-v-8d006c88]:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary-500) 25%, transparent);outline:none}.well-location-map[data-v-356c3199] .well-location-marker{background:0 0;border:none}.well-location-map[data-v-356c3199] .well-location-marker svg{filter:drop-shadow(0 1px 1.5px #00000059);display:block;overflow:visible}.well-location-map[data-v-356c3199] .well-location-marker__pin{fill:var(--p-primary-color,var(--color-primary-500,#2563eb));stroke:#0003;stroke-width:.75px}.well-location-map[data-v-356c3199] .well-location-marker__dot{fill:#fff}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@welldot/vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Vue 3 + PrimeVue base components, theme and composables for .well water well editors",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"keywords": [
|
|
@@ -76,9 +76,9 @@
|
|
|
76
76
|
"primevue": "^4.5.0",
|
|
77
77
|
"vue": "^3.5.0",
|
|
78
78
|
"vue-color": "^3.3.0",
|
|
79
|
-
"@welldot/core": "^0.
|
|
80
|
-
"@welldot/utils": "^0.
|
|
81
|
-
"@welldot/render": "^0.4.
|
|
79
|
+
"@welldot/core": "^0.5.0",
|
|
80
|
+
"@welldot/utils": "^0.5.0",
|
|
81
|
+
"@welldot/render": "^0.4.1"
|
|
82
82
|
},
|
|
83
83
|
"peerDependenciesMeta": {
|
|
84
84
|
"@nuxt/kit": {
|
|
@@ -122,10 +122,10 @@
|
|
|
122
122
|
"vue": "3.5.34",
|
|
123
123
|
"vue-color": "^3.3.3",
|
|
124
124
|
"vue-eslint-parser": "^10.4.0",
|
|
125
|
+
"@welldot/core": "0.5.0",
|
|
125
126
|
"@welldot/lint": "0.0.1",
|
|
126
|
-
"@welldot/
|
|
127
|
-
"@welldot/utils": "0.
|
|
128
|
-
"@welldot/render": "0.4.0"
|
|
127
|
+
"@welldot/render": "0.4.1",
|
|
128
|
+
"@welldot/utils": "0.5.0"
|
|
129
129
|
},
|
|
130
130
|
"scripts": {
|
|
131
131
|
"build": "vite build",
|