eco-vue-js 0.5.22 → 0.5.24

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.
@@ -3,7 +3,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
3
3
  title?: string | undefined;
4
4
  }>, {
5
5
  isValid: import("vue").ComputedRef<boolean>;
6
- validate: (silent?: boolean | undefined) => string | undefined;
6
+ validate: (silent?: boolean | undefined, path?: import("./use/useFormValidateMap").ValidatePath | undefined) => string | undefined;
7
7
  invalidate: (payload: {
8
8
  [x: string]: string | string[];
9
9
  }) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"WFormValidator.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Form/WFormValidator.vue"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyUA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
1
+ {"version":3,"file":"WFormValidator.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Form/WFormValidator.vue"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiWA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
@@ -1,5 +1,8 @@
1
1
  import { defineComponent, inject, useSlots, computed, ref, watch, onBeforeMount, onBeforeUnmount, openBlock, createBlock, resolveDynamicComponent } from 'vue';
2
2
  import { wFormTitleUpdater, wFormErrorMessageUpdater, wFormHasChangesUpdater, wFormValidateUpdater, wFormInvalidateUpdater, wFormInitModelUpdater, wFormUnlistener } from './models/injection.js';
3
+ import { useTabActiveListener } from '../Tabs/use/useTabActiveListener.js';
4
+ import { scrollToValidator } from './models/utils.js';
5
+ import { useIsInsideTab } from '../Tabs/use/useIsInsideTab.js';
3
6
 
4
7
  const _sfc_main = /* @__PURE__ */ defineComponent({
5
8
  __name: "WFormValidator",
@@ -22,8 +25,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
22
25
  const invalidateUpdater = inject(wFormInvalidateUpdater, void 0);
23
26
  const initModelUpdater = inject(wFormInitModelUpdater, void 0);
24
27
  const unlistener = inject(wFormUnlistener, void 0);
28
+ const { isInsideTab } = useIsInsideTab();
25
29
  const slots = useSlots();
26
30
  const component = computed(() => slots.default?.()[0]);
31
+ const componentRef = ref();
27
32
  const modelValue = computed(() => {
28
33
  const props2 = component.value?.props;
29
34
  if (!props2)
@@ -123,11 +128,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
123
128
  newValue.splice(index, 1);
124
129
  validateOnUpdate(newValue);
125
130
  };
126
- const doValidate = (silent) => {
131
+ const doValidate = (silent, path) => {
132
+ if (props.name && path && !path[props.name])
133
+ return;
127
134
  const message = _validate(modelValue.value);
128
135
  if (!silent) {
129
136
  errorMessage.value = message;
130
137
  hasBeenValidated.value = true;
138
+ if (!isInsideTab)
139
+ scrollTo();
131
140
  }
132
141
  return message;
133
142
  };
@@ -144,6 +153,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
144
153
  initModelValue.value = modelValue.value;
145
154
  hasChanges.value = false;
146
155
  };
156
+ const scrollTo = () => {
157
+ if (!errorMessage.value)
158
+ return;
159
+ const element = componentRef.value.$el;
160
+ if (element instanceof HTMLDivElement)
161
+ scrollToValidator(element);
162
+ };
163
+ useTabActiveListener(scrollTo);
147
164
  watch(errorMessage, (value) => {
148
165
  if (value === null)
149
166
  return;
@@ -191,6 +208,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
191
208
  });
192
209
  return (_ctx, _cache) => {
193
210
  return openBlock(), createBlock(resolveDynamicComponent(component.value), {
211
+ ref_key: "componentRef",
212
+ ref: componentRef,
194
213
  "error-message": errorMessage.value,
195
214
  "has-changes": _ctx.noChanges ? void 0 : hasChanges.value,
196
215
  "onUpdate:modelValue": _validateOnUpdate,
@@ -1,3 +1,4 @@
1
1
  export declare const removeKey: <T extends Record<string, unknown>>(entity: T, key: string) => T;
2
2
  export declare const compileMessage: (title: string | undefined, message: string | undefined) => string | undefined;
3
+ export declare const scrollToValidator: (element: HTMLElement) => void;
3
4
  //# sourceMappingURL=utils.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/models/utils.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,SAAS,8CAA+C,CAAC,OAAO,MAAM,KAAG,CAMrF,CAAA;AAKD,eAAO,MAAM,cAAc,UAAW,MAAM,GAAG,SAAS,WAAW,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAShG,CAAA"}
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/models/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,8CAA+C,CAAC,OAAO,MAAM,KAAG,CAMrF,CAAA;AAKD,eAAO,MAAM,cAAc,UAAW,MAAM,GAAG,SAAS,WAAW,MAAM,GAAG,SAAS,KAAG,MAAM,GAAG,SAShG,CAAA;AAED,eAAO,MAAM,iBAAiB,YAAsB,WAAW,KAAG,IAM3D,CAAA"}
@@ -1,3 +1,14 @@
1
+ import 'vue';
2
+ import '../../Button/WButtonAction.vue.js';
3
+ import '../../Button/WButton.vue.js';
4
+ import { throttle } from '../../../utils/utils.js';
5
+ import '../../../utils/supportsPassive.js';
6
+ import '../../Dropdown/utils/DropdownStyle.js';
7
+ import 'vue-router';
8
+ import '../../../utils/Modal.js';
9
+ import '../../Link/WLink.vue.js';
10
+ import '@tanstack/vue-query';
11
+
1
12
  const removeKey = (entity, key) => {
2
13
  const result = { ...entity };
3
14
  delete result[key];
@@ -17,5 +28,12 @@ ${message}`;
17
28
  return `${fieldMessageStart}${title}: ${message}`;
18
29
  }
19
30
  };
31
+ const scrollToValidator = throttle((element) => {
32
+ element.scrollIntoView({
33
+ behavior: "smooth",
34
+ block: "center",
35
+ inline: "nearest"
36
+ });
37
+ }, 300);
20
38
 
21
- export { compileMessage, removeKey };
39
+ export { compileMessage, removeKey, scrollToValidator };
@@ -1,6 +1,9 @@
1
1
  import { type Ref } from 'vue';
2
+ export type ValidatePath = {
3
+ [Key in string]: boolean | ValidatePath;
4
+ };
2
5
  export declare const useFormValidateMap: (name: Ref<string | undefined>, titleGetter: (key: string) => string, emitIsValid: (value: boolean) => void) => {
3
6
  validateMapUnlistener: (key: string) => void;
4
- validate: (silent?: boolean) => string | undefined;
7
+ validate: (silent?: boolean, path?: ValidatePath) => string | undefined;
5
8
  };
6
9
  //# sourceMappingURL=useFormValidateMap.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFormValidateMap.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/use/useFormValidateMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,GAAG,EAAC,MAAM,KAAK,CAAA;AAIjE,eAAO,MAAM,kBAAkB,SAAU,IAAI,MAAM,GAAG,SAAS,CAAC,qBAAqB,MAAM,KAAK,MAAM,uBAAuB,OAAO,KAAK,IAAI;iCAOvG,MAAM;wBAIf,OAAO,KAAG,MAAM,GAAG,SAAS;CAsBxD,CAAA"}
1
+ {"version":3,"file":"useFormValidateMap.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/use/useFormValidateMap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,GAAG,EAAC,MAAM,KAAK,CAAA;AAIjE,MAAM,MAAM,YAAY,GAAG;KACxB,GAAG,IAAI,MAAM,GAAG,OAAO,GAAG,YAAY;CACxC,CAAA;AAED,eAAO,MAAM,kBAAkB,SAAU,IAAI,MAAM,GAAG,SAAS,CAAC,qBAAqB,MAAM,KAAK,MAAM,uBAAuB,OAAO,KAAK,IAAI;iCAOvG,MAAM;wBAIf,OAAO,SAAS,YAAY,KAAG,MAAM,GAAG,SAAS;CAoC7E,CAAA"}
@@ -10,8 +10,16 @@ const useFormValidateMap = (name, titleGetter, emitIsValid) => {
10
10
  const validateMapUnlistener = (key) => {
11
11
  validateMap.value = removeKey(validateMap.value, key);
12
12
  };
13
- const validate = (silent) => {
14
- const messages = Object.keys(validateMap.value).map((key) => compileMessage(titleGetter(key), validateMap.value[key](silent))).filter((item) => item);
13
+ const validate = (silent, path) => {
14
+ const messages = Object.keys(validateMap.value).map((key) => {
15
+ return compileMessage(
16
+ titleGetter(key),
17
+ validateMap.value[key](
18
+ silent,
19
+ path?.[key] instanceof Object ? path[key] : path?.[key] === true ? void 0 : path
20
+ )
21
+ );
22
+ }).filter((item) => item);
15
23
  if (!silent)
16
24
  emitIsValid(messages.length === 0);
17
25
  return messages.length === 0 ? void 0 : messages.join("\n");
@@ -163,7 +163,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
163
163
  class: normalizeClass(["bg-default dark:bg-default-dark w-full", {
164
164
  "pb-[50vh]": unref(isMobile),
165
165
  "rounded-xl max-h-[inherit] shadow-md overflow-x-hidden overflow-y-overlay overscroll-contain dark:border dark:border-solid dark:border-gray-800": !unref(isMobile),
166
- "mt-4": "istop" in contentScope && contentScope.istop === false && (_ctx.errorMessage || _ctx.maxLength)
166
+ "mt-5": "istop" in contentScope && contentScope.istop === false && (_ctx.errorMessage || _ctx.maxLength)
167
167
  }])
168
168
  }, [
169
169
  _ctx.$slots.content?.().length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.$slots.content?.(), (slot, index) => {
@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
25
25
  renderSlot(_ctx.$slots, "default")
26
26
  ]),
27
27
  createElementVNode("div", {
28
- class: normalizeClass(["sticky bottom-0 flex justify-center p-[var(--modal-wrapper-padding,2rem)] gap-[var(--modal-wrapper-padding,2rem)] w-full bg-default dark:bg-default-dark", {
28
+ class: normalizeClass(["sticky bottom-0 z-[1] flex justify-center p-[var(--modal-wrapper-padding,2rem)] gap-[var(--modal-wrapper-padding,2rem)] w-full bg-default dark:bg-default-dark", {
29
29
  "sm-not:flex-col": !_ctx.maximized
30
30
  }])
31
31
  }, [
@@ -1,6 +1,7 @@
1
1
  import { type VNode } from 'vue';
2
2
  declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
3
3
  names?: string[] | Record<number, string> | undefined;
4
+ namesFrom?: string[] | Record<number, string> | undefined;
4
5
  icons?: SVGComponent[] | Record<number, SVGComponent> | undefined;
5
6
  slots?: VNode<import("vue").RendererNode, import("vue").RendererElement, {
6
7
  [key: string]: any;
@@ -11,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
11
12
  updateIndex: (value: number) => void;
12
13
  next: () => void;
13
14
  previous: () => void;
14
- validate: (index: number, silent?: boolean | undefined) => string | undefined;
15
+ validate: (index: number, silent?: boolean | undefined, path?: import("../Form/use/useFormValidateMap").ValidatePath | undefined) => string | undefined;
15
16
  invalidate: (index: number, payload: {
16
17
  [x: string]: string | string[];
17
18
  }) => void;
@@ -21,6 +22,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimePr
21
22
  "update:has-changes": (value: boolean) => void;
22
23
  }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
23
24
  names?: string[] | Record<number, string> | undefined;
25
+ namesFrom?: string[] | Record<number, string> | undefined;
24
26
  icons?: SVGComponent[] | Record<number, SVGComponent> | undefined;
25
27
  slots?: VNode<import("vue").RendererNode, import("vue").RendererElement, {
26
28
  [key: string]: any;
@@ -1 +1 @@
1
- {"version":3,"file":"WTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabs.vue"],"names":[],"mappings":"AA2FA;AAEA,OAAO,EAAkC,KAAK,KAAK,EAAoD,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0ZlH,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
1
+ {"version":3,"file":"WTabs.vue.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/WTabs.vue"],"names":[],"mappings":"AA2FA;AAEA,OAAO,EAAkC,KAAK,KAAK,EAAoD,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqZlH,wBAeG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}
@@ -15,6 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
15
15
  __name: "WTabs",
16
16
  props: {
17
17
  names: {},
18
+ namesFrom: {},
18
19
  icons: {},
19
20
  slots: {},
20
21
  lessTransitions: { type: Boolean },
@@ -37,21 +38,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
37
38
  const hasChangesMap = reactive({});
38
39
  const hasChanges = computed(() => Object.values(hasChangesMap).includes(true));
39
40
  const updateIsValidMap = (index, value) => {
40
- if (value !== void 0)
41
- isValidMap[index] = value;
42
- else
43
- delete isValidMap[index];
41
+ isValidMap[index] = value;
44
42
  nextTick().then(() => {
45
43
  if (value === false && isValidMap[current.value] !== false)
46
44
  switchTab(index);
47
45
  });
48
46
  };
49
- const updateHasChangesMap = (index, value) => {
50
- if (value !== void 0)
51
- hasChangesMap[index] = value;
52
- else
53
- delete hasChangesMap[index];
54
- };
55
47
  const switchTab = throttle((index) => {
56
48
  if (current.value === index)
57
49
  return;
@@ -201,10 +193,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
201
193
  ref_for: true,
202
194
  ref_key: "form",
203
195
  ref: form,
204
- name: index.toString(),
196
+ name: _ctx.namesFrom?.[index] ?? index.toString(),
205
197
  title: _ctx.names?.[index],
206
198
  "onUpdate:isValid": ($event) => updateIsValidMap(index, $event),
207
- "onUpdate:hasChanges": ($event) => updateHasChangesMap(index, $event)
199
+ "onUpdate:hasChanges": ($event) => hasChangesMap[index] = $event
208
200
  }, {
209
201
  default: withCtx(() => [
210
202
  (openBlock(), createBlock(resolveDynamicComponent(slot)))
@@ -0,0 +1,4 @@
1
+ export declare const useIsInsideTab: () => {
2
+ isInsideTab: boolean;
3
+ };
4
+ //# sourceMappingURL=useIsInsideTab.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useIsInsideTab.d.ts","sourceRoot":"","sources":["../../../../src/components/Tabs/use/useIsInsideTab.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc;;CAM1B,CAAA"}
@@ -0,0 +1,11 @@
1
+ import { inject } from 'vue';
2
+ import { wTabItemListener } from '../models/injection.js';
3
+
4
+ const useIsInsideTab = () => {
5
+ const tabItemListenerInjected = inject(wTabItemListener, null);
6
+ return {
7
+ isInsideTab: tabItemListenerInjected !== null
8
+ };
9
+ };
10
+
11
+ export { useIsInsideTab };
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "type": "git",
5
5
  "url": "https://github.com/rsmple/eco-vue-js.git"
6
6
  },
7
- "version": "0.5.22",
7
+ "version": "0.5.24",
8
8
  "scripts": {
9
9
  "dev": "vite",
10
10
  "build": "run-p type-check build-only",