cja-phoenix 1.2.52 → 1.2.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "cja-phoenix",
3
3
  "configKey": "cja-phoenix",
4
- "version": "1.2.52",
4
+ "version": "1.2.54",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/module.mjs CHANGED
@@ -26,7 +26,6 @@ const module$1 = defineNuxtModule({
26
26
  addImportsDir(resolve("./runtime/data"));
27
27
  addComponentsDir({ path: resolve("./runtime/components") });
28
28
  addPlugin(resolve("./runtime/plugins/tippy"));
29
- addPlugin(resolve("./runtime/plugins/v-calendar"));
30
29
  }
31
30
  });
32
31
 
@@ -19,8 +19,8 @@ type __VLS_Slots = {} & {
19
19
  };
20
20
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
21
21
  type: "primary" | "secondary" | "tertiary";
22
- size: "sm" | "md" | "lg";
23
22
  color: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
23
+ size: "sm" | "md" | "lg";
24
24
  textAlign: "center" | "left" | "right";
25
25
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
26
26
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -19,8 +19,8 @@ type __VLS_Slots = {} & {
19
19
  };
20
20
  declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
21
21
  type: "primary" | "secondary" | "tertiary";
22
- size: "sm" | "md" | "lg";
23
22
  color: "blue" | "orange" | "white" | "light-blue" | "gradient-green-blue";
23
+ size: "sm" | "md" | "lg";
24
24
  textAlign: "center" | "left" | "right";
25
25
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
26
26
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -3,8 +3,8 @@ type __VLS_Props = {
3
3
  border?: number;
4
4
  };
5
5
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
6
- size: number;
7
6
  border: number;
7
+ size: number;
8
8
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
9
  declare const _default: typeof __VLS_export;
10
10
  export default _default;
@@ -3,8 +3,8 @@ type __VLS_Props = {
3
3
  border?: number;
4
4
  };
5
5
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
6
- size: number;
7
6
  border: number;
7
+ size: number;
8
8
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
9
9
  declare const _default: typeof __VLS_export;
10
10
  export default _default;
@@ -16,7 +16,7 @@
16
16
 
17
17
  <script setup>
18
18
  import { useHeaderHeight } from "../composables/useHeaderHeight";
19
- import { onMounted, ref, watch } from "vue";
19
+ import { onMounted, onUnmounted, ref, watch } from "vue";
20
20
  const { top, bottom, left, right } = defineProps({
21
21
  top: { type: Number, required: false },
22
22
  bottom: { type: Number, required: false },
@@ -29,23 +29,30 @@ const sticky = ref();
29
29
  let observer;
30
30
  onMounted(() => {
31
31
  watch(
32
- () => top,
32
+ () => [top, headerHeight.value],
33
33
  () => {
34
34
  if (observer) observer.disconnect();
35
35
  observer = new IntersectionObserver(
36
36
  (entries) => {
37
- entries.forEach((entry) => {
38
- sticky.value = sticky.value !== void 0 ? !sticky.value : entry.isIntersecting ? true : false;
39
- });
37
+ const entry = entries[0];
38
+ if (entry) {
39
+ sticky.value = !entry.isIntersecting;
40
+ }
40
41
  },
41
42
  {
42
43
  rootMargin: `0px 0px -${window.innerHeight - (top || headerHeight.value)}px 0px`
43
44
  }
44
45
  );
45
46
  observer.observe(stickyContainer.value);
47
+ },
48
+ {
49
+ immediate: true
46
50
  }
47
51
  );
48
52
  });
53
+ onUnmounted(() => {
54
+ observer?.disconnect();
55
+ });
49
56
  defineExpose({ sticky });
50
57
  </script>
51
58
 
@@ -1,24 +1,25 @@
1
- import { type InputHTMLAttributes } from 'vue';
2
- import type { Lazy, Schema } from 'yup';
3
- import type { DateFormat } from '../../types/Form.js';
1
+ import "@angelblanco/v-calendar/style.css";
2
+ import { type InputHTMLAttributes } from "vue";
3
+ import type { Lazy, Schema } from "yup";
4
+ import type { DateFormat } from "../../types/Form.js";
4
5
  type __VLS_Props = {
5
6
  title?: string;
6
7
  label?: string;
7
8
  tooltip?: string;
8
- placeholder?: InputHTMLAttributes['placeholder'];
9
- layout?: 'vertical' | 'horizontal';
10
- size?: 'sm' | 'md' | 'lg';
9
+ placeholder?: InputHTMLAttributes["placeholder"];
10
+ layout?: "vertical" | "horizontal";
11
+ size?: "sm" | "md" | "lg";
11
12
  validation?: Schema | Lazy<any>;
12
- validationMode?: 'change' | 'blur' | 'none';
13
+ validationMode?: "change" | "blur" | "none";
13
14
  errorDisplay?: boolean;
14
- id?: InputHTMLAttributes['id'];
15
- disabled?: InputHTMLAttributes['disabled'];
15
+ id?: InputHTMLAttributes["id"];
16
+ disabled?: InputHTMLAttributes["disabled"];
16
17
  dateFormat?: DateFormat;
17
18
  minDate?: string;
18
19
  maxDate?: string;
19
20
  };
20
21
  type __VLS_ModelProps = {
21
- modelValue: InputHTMLAttributes['value'];
22
+ modelValue: InputHTMLAttributes["value"];
22
23
  };
23
24
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
24
25
  declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -24,7 +24,7 @@
24
24
  :aria-label="label || title"
25
25
  @focus="datepickerActive = false"
26
26
  @blur="handleBlur($event, validationMode == 'blur')"
27
- >
27
+ />
28
28
 
29
29
  <ClientOnly>
30
30
  <DatePicker
@@ -59,6 +59,7 @@
59
59
  </template>
60
60
 
61
61
  <script setup>
62
+ import "@angelblanco/v-calendar/style.css";
62
63
  import { useField } from "vee-validate";
63
64
  import { computed, ref } from "vue";
64
65
  import { vMaska } from "maska/vue";
@@ -1,24 +1,25 @@
1
- import { type InputHTMLAttributes } from 'vue';
2
- import type { Lazy, Schema } from 'yup';
3
- import type { DateFormat } from '../../types/Form.js';
1
+ import "@angelblanco/v-calendar/style.css";
2
+ import { type InputHTMLAttributes } from "vue";
3
+ import type { Lazy, Schema } from "yup";
4
+ import type { DateFormat } from "../../types/Form.js";
4
5
  type __VLS_Props = {
5
6
  title?: string;
6
7
  label?: string;
7
8
  tooltip?: string;
8
- placeholder?: InputHTMLAttributes['placeholder'];
9
- layout?: 'vertical' | 'horizontal';
10
- size?: 'sm' | 'md' | 'lg';
9
+ placeholder?: InputHTMLAttributes["placeholder"];
10
+ layout?: "vertical" | "horizontal";
11
+ size?: "sm" | "md" | "lg";
11
12
  validation?: Schema | Lazy<any>;
12
- validationMode?: 'change' | 'blur' | 'none';
13
+ validationMode?: "change" | "blur" | "none";
13
14
  errorDisplay?: boolean;
14
- id?: InputHTMLAttributes['id'];
15
- disabled?: InputHTMLAttributes['disabled'];
15
+ id?: InputHTMLAttributes["id"];
16
+ disabled?: InputHTMLAttributes["disabled"];
16
17
  dateFormat?: DateFormat;
17
18
  minDate?: string;
18
19
  maxDate?: string;
19
20
  };
20
21
  type __VLS_ModelProps = {
21
- modelValue: InputHTMLAttributes['value'];
22
+ modelValue: InputHTMLAttributes["value"];
22
23
  };
23
24
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
24
25
  declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -1,27 +1,27 @@
1
- import { type InputHTMLAttributes } from 'vue';
2
- import type { Lazy, Schema } from 'yup';
1
+ import { type InputHTMLAttributes } from "vue";
2
+ import type { Lazy, Schema } from "yup";
3
3
  type __VLS_Props = {
4
4
  title?: string;
5
5
  label?: string;
6
6
  tooltip?: string;
7
7
  description?: string;
8
- placeholder?: InputHTMLAttributes['placeholder'];
9
- layout?: 'vertical' | 'horizontal';
10
- size?: 'sm' | 'md' | 'lg';
8
+ placeholder?: InputHTMLAttributes["placeholder"];
9
+ layout?: "vertical" | "horizontal";
10
+ size?: "sm" | "md" | "lg";
11
11
  validation?: Schema | Lazy<any>;
12
- validationMode?: 'change' | 'blur' | 'none';
12
+ validationMode?: "change" | "blur" | "none";
13
13
  errorDisplay?: boolean;
14
14
  countryCode?: string;
15
- id?: InputHTMLAttributes['id'];
16
- disabled?: InputHTMLAttributes['disabled'];
17
- autocomplete?: InputHTMLAttributes['autocomplete'];
15
+ id?: InputHTMLAttributes["id"];
16
+ disabled?: InputHTMLAttributes["disabled"];
17
+ autocomplete?: InputHTMLAttributes["autocomplete"];
18
18
  };
19
19
  declare const __VLS_defaultModels: {
20
20
  countryCode: string;
21
21
  };
22
22
  type __VLS_ModelProps = {
23
23
  modelValue: any;
24
- 'countryCode'?: typeof __VLS_defaultModels['countryCode'];
24
+ "countryCode"?: typeof __VLS_defaultModels['countryCode'];
25
25
  };
26
26
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
27
27
  declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -23,7 +23,6 @@
23
23
  :resize-on-update="true"
24
24
  />
25
25
  <input
26
- ref="inputEl"
27
26
  v-bind="{ id, disabled, autocomplete, placeholder }"
28
27
  v-model="model"
29
28
  v-maska="maskOptions"
@@ -33,7 +32,7 @@
33
32
  :maxlength="phoneDigits[phoneCountryCode]"
34
33
  :aria-label="label || title"
35
34
  @blur="handleBlur($event, validationMode == 'blur')"
36
- >
35
+ />
37
36
  </div>
38
37
 
39
38
  <FormStructureDescription
@@ -70,7 +69,6 @@ const props = defineProps({
70
69
  disabled: { type: null, required: false },
71
70
  autocomplete: { type: null, required: false }
72
71
  });
73
- const inputEl = ref();
74
72
  const inputWrapper = ref();
75
73
  const model = defineModel({
76
74
  required: true
@@ -1,27 +1,27 @@
1
- import { type InputHTMLAttributes } from 'vue';
2
- import type { Lazy, Schema } from 'yup';
1
+ import { type InputHTMLAttributes } from "vue";
2
+ import type { Lazy, Schema } from "yup";
3
3
  type __VLS_Props = {
4
4
  title?: string;
5
5
  label?: string;
6
6
  tooltip?: string;
7
7
  description?: string;
8
- placeholder?: InputHTMLAttributes['placeholder'];
9
- layout?: 'vertical' | 'horizontal';
10
- size?: 'sm' | 'md' | 'lg';
8
+ placeholder?: InputHTMLAttributes["placeholder"];
9
+ layout?: "vertical" | "horizontal";
10
+ size?: "sm" | "md" | "lg";
11
11
  validation?: Schema | Lazy<any>;
12
- validationMode?: 'change' | 'blur' | 'none';
12
+ validationMode?: "change" | "blur" | "none";
13
13
  errorDisplay?: boolean;
14
14
  countryCode?: string;
15
- id?: InputHTMLAttributes['id'];
16
- disabled?: InputHTMLAttributes['disabled'];
17
- autocomplete?: InputHTMLAttributes['autocomplete'];
15
+ id?: InputHTMLAttributes["id"];
16
+ disabled?: InputHTMLAttributes["disabled"];
17
+ autocomplete?: InputHTMLAttributes["autocomplete"];
18
18
  };
19
19
  declare const __VLS_defaultModels: {
20
20
  countryCode: string;
21
21
  };
22
22
  type __VLS_ModelProps = {
23
23
  modelValue: any;
24
- 'countryCode'?: typeof __VLS_defaultModels['countryCode'];
24
+ "countryCode"?: typeof __VLS_defaultModels['countryCode'];
25
25
  };
26
26
  type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
27
27
  declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -31,8 +31,8 @@
31
31
  v-bind="{ disabled }"
32
32
  >
33
33
  <option
34
- v-for="option in options"
35
- :key="option.value"
34
+ v-for="(option, index) in options"
35
+ :key="`${option.value}-${option.label}-${index}`"
36
36
  :value="option.value"
37
37
  :disabled="option.disabled"
38
38
  >
@@ -53,8 +53,8 @@
53
53
  <div class="list-wrapper">
54
54
  <ul v-if="!props.multiSelect">
55
55
  <li
56
- v-for="option in filteredOptions"
57
- :key="option.value"
56
+ v-for="(option, index) in filteredOptions"
57
+ :key="`${option.value}-${option.label}-${index}`"
58
58
  :class="{ disabled: option.disabled }"
59
59
  @click="!option.disabled && handleClick(option.value)"
60
60
  v-html="option.label"
@@ -114,6 +114,8 @@ const open = ref(false);
114
114
  const search = ref("");
115
115
  const inputEl = ref();
116
116
  const collapseEl = ref();
117
+ const scrollAncestor = ref(null);
118
+ const normalizeSearchValue = (value) => value.trim().toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
117
119
  const { errorMessage, meta, handleBlur, validate } = useField(
118
120
  "input",
119
121
  props.validation,
@@ -122,8 +124,16 @@ const { errorMessage, meta, handleBlur, validate } = useField(
122
124
  syncVModel: true
123
125
  }
124
126
  );
127
+ const normalizedSearch = computed(() => normalizeSearchValue(search.value));
128
+ const normalizedOptions = computed(
129
+ () => props.options?.map((option) => ({
130
+ option,
131
+ normalizedLabel: normalizeSearchValue(option.label),
132
+ normalizedTags: option.searchTags?.map((tag) => normalizeSearchValue(tag)) || []
133
+ })) || []
134
+ );
125
135
  const displayValue = computed(() => {
126
- if (model.value !== void 0 && props.options) {
136
+ if (model.value !== void 0 && props.options?.length) {
127
137
  if (props.multiSelect) {
128
138
  return props.options.filter((o) => model.value?.includes(o.value))?.map((o) => o.altLabel || o.label).join(", ");
129
139
  } else {
@@ -134,23 +144,18 @@ const displayValue = computed(() => {
134
144
  return "";
135
145
  });
136
146
  const filteredOptions = computed(() => {
137
- let procOptions = props.options;
138
- if (procOptions?.length) {
139
- if (search.value) {
140
- procOptions = procOptions.filter(
141
- (opt) => opt.label.toLowerCase().includes(search.value.toLowerCase()) || opt.searchTags?.some(
142
- (t) => t.toLowerCase().includes(search.value.toLowerCase())
143
- )
144
- );
145
- }
146
- if (props.multiSelect) {
147
- procOptions = procOptions.map((o) => ({
148
- label: o.label,
149
- value: o.value
150
- }));
151
- }
147
+ let procOptions = normalizedOptions.value;
148
+ if (normalizedSearch.value) {
149
+ procOptions = procOptions.filter(
150
+ ({ normalizedLabel, normalizedTags }) => normalizedLabel.includes(normalizedSearch.value) || normalizedTags.some((tag) => tag.includes(normalizedSearch.value))
151
+ );
152
152
  }
153
- return procOptions;
153
+ return procOptions.map(
154
+ ({ option }) => props.multiSelect ? {
155
+ label: option.label,
156
+ value: option.value
157
+ } : option
158
+ );
154
159
  });
155
160
  const handleClick = (value) => {
156
161
  if (!props.multiSelect) {
@@ -170,13 +175,19 @@ const handleClick = (value) => {
170
175
  }
171
176
  };
172
177
  const closeSelect = (event) => {
173
- if (!inputEl.value.contains(event.target) && !collapseEl.value.contains(event.target)) {
178
+ if (inputEl.value && collapseEl.value && !inputEl.value.contains(event.target) && !collapseEl.value.contains(event.target)) {
174
179
  if (event.type == "scroll") {
175
180
  collapseEl.value.style.transitionDuration = "0s";
176
181
  }
177
182
  toggleCollapse(event);
178
183
  }
179
184
  };
185
+ const detachListeners = () => {
186
+ window.removeEventListener("click", closeSelect);
187
+ window.removeEventListener("scroll", closeSelect);
188
+ scrollAncestor.value?.removeEventListener("scroll", closeSelect);
189
+ scrollAncestor.value = null;
190
+ };
180
191
  const toggleCollapse = (event) => {
181
192
  if (!props.disabled) {
182
193
  open.value = !open.value;
@@ -184,17 +195,15 @@ const toggleCollapse = (event) => {
184
195
  setTimeout(() => {
185
196
  search.value = "";
186
197
  }, 300);
187
- window.removeEventListener("click", closeSelect);
188
- window.removeEventListener("scroll", closeSelect);
189
- findScrollAncestor(inputEl.value).removeEventListener(
190
- "scroll",
191
- closeSelect
192
- );
198
+ detachListeners();
193
199
  handleBlur(event, props.validationMode == "blur");
194
200
  } else {
195
201
  window.addEventListener("click", closeSelect);
196
- window.addEventListener("scroll", closeSelect);
197
- findScrollAncestor(inputEl.value).addEventListener("scroll", closeSelect);
202
+ window.addEventListener("scroll", closeSelect, { passive: true });
203
+ scrollAncestor.value = findScrollAncestor(inputEl.value) || null;
204
+ scrollAncestor.value?.addEventListener("scroll", closeSelect, {
205
+ passive: true
206
+ });
198
207
  }
199
208
  }
200
209
  };
@@ -207,8 +216,7 @@ const calcPosition = (el) => {
207
216
  el.style.width = `${inputRect.width}px`;
208
217
  };
209
218
  onUnmounted(() => {
210
- window.removeEventListener("click", closeSelect);
211
- window.removeEventListener("scroll", closeSelect);
219
+ detachListeners();
212
220
  });
213
221
  defineExpose({ errorMessage, meta, validate });
214
222
  </script>
@@ -34,8 +34,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
34
34
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
35
35
  "onClick:option"?: ((...args: any[]) => any) | undefined;
36
36
  }>, {
37
- size: "sm" | "md" | "lg";
38
37
  icon: Icon;
38
+ size: "sm" | "md" | "lg";
39
39
  errorDisplay: boolean;
40
40
  validationMode: "change" | "none";
41
41
  layout: "list" | "grid" | "image";
@@ -34,8 +34,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
34
34
  "onUpdate:modelValue"?: ((value: any) => any) | undefined;
35
35
  "onClick:option"?: ((...args: any[]) => any) | undefined;
36
36
  }>, {
37
- size: "sm" | "md" | "lg";
38
37
  icon: Icon;
38
+ size: "sm" | "md" | "lg";
39
39
  errorDisplay: boolean;
40
40
  validationMode: "change" | "none";
41
41
  layout: "list" | "grid" | "image";
@@ -1,22 +1,35 @@
1
1
  import { onMounted, onUnmounted, ref } from "vue";
2
+ const headerHeight = ref(0);
3
+ let resizeObserver = null;
4
+ let subscribers = 0;
5
+ const observeHeader = () => {
6
+ const header = document.querySelector("#page-header");
7
+ if (!header || resizeObserver) {
8
+ return;
9
+ }
10
+ headerHeight.value = header.getBoundingClientRect().height;
11
+ resizeObserver = new ResizeObserver((entries) => {
12
+ const entry = entries[0];
13
+ if (entry) {
14
+ headerHeight.value = entry.contentRect.height;
15
+ }
16
+ });
17
+ resizeObserver.observe(header);
18
+ };
19
+ const disconnectHeaderObserver = () => {
20
+ if (subscribers === 0 && resizeObserver) {
21
+ resizeObserver.disconnect();
22
+ resizeObserver = null;
23
+ }
24
+ };
2
25
  export const useHeaderHeight = () => {
3
- const headerHeight = ref(0);
4
- let resizeObserver = null;
5
26
  onMounted(() => {
6
- const header = document.querySelector("#page-header");
7
- if (header) {
8
- resizeObserver = new ResizeObserver((entries) => {
9
- entries.forEach((e) => {
10
- headerHeight.value = e.contentRect.height;
11
- });
12
- });
13
- resizeObserver.observe(header);
14
- }
27
+ subscribers += 1;
28
+ observeHeader();
15
29
  });
16
30
  onUnmounted(() => {
17
- if (resizeObserver != null) {
18
- resizeObserver.disconnect();
19
- }
31
+ subscribers = Math.max(0, subscribers - 1);
32
+ disconnectHeaderObserver();
20
33
  });
21
34
  return {
22
35
  headerHeight
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cja-phoenix",
3
- "version": "1.2.52",
3
+ "version": "1.2.54",
4
4
  "description": "Phoenix utility",
5
5
  "repository": {
6
6
  "type": "git",
@@ -1,37 +0,0 @@
1
- type __VLS_Props = {
2
- active?: boolean;
3
- scrollThreshold?: number;
4
- scrollLimitEl?: HTMLElement;
5
- fixWidth?: boolean;
6
- size?: {
7
- height?: string;
8
- width?: string;
9
- };
10
- position?: {
11
- left?: string;
12
- top?: string;
13
- right?: string;
14
- bottom?: string;
15
- };
16
- };
17
- declare var __VLS_1: {}, __VLS_3: {};
18
- type __VLS_Slots = {} & {
19
- default?: (props: typeof __VLS_1) => any;
20
- } & {
21
- default?: (props: typeof __VLS_3) => any;
22
- };
23
- declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
24
- positionFixed: import("vue").Ref<boolean, boolean>;
25
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
26
- active: boolean;
27
- scrollThreshold: number;
28
- fixWidth: boolean;
29
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
30
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
31
- declare const _default: typeof __VLS_export;
32
- export default _default;
33
- type __VLS_WithSlots<T, S> = T & {
34
- new (): {
35
- $slots: S;
36
- };
37
- };
@@ -1,95 +0,0 @@
1
- <template>
2
- <div
3
- v-if="active"
4
- ref="fixedContainer"
5
- class="fixed-container"
6
- :style="{ height: fixedContainerHeight }"
7
- >
8
- <div
9
- ref="fixedWrapper"
10
- class="fixed-wrapper"
11
- :class="{ 'position-fixed': positionFixed }"
12
- :style="{
13
- ...size,
14
- ...position,
15
- transform: limitOffset,
16
- maxWidth: fixedWrapperWidth
17
- }"
18
- >
19
- <slot />
20
- </div>
21
- </div>
22
- <slot v-else />
23
- </template>
24
-
25
- <script setup>
26
- import { onMounted, onUnmounted, ref, watch } from "vue";
27
- const props = defineProps({
28
- active: { type: Boolean, required: false, default: true },
29
- scrollThreshold: { type: Number, required: false, default: 0 },
30
- scrollLimitEl: { type: null, required: false },
31
- fixWidth: { type: Boolean, required: false, default: true },
32
- size: { type: Object, required: false },
33
- position: { type: Object, required: false }
34
- });
35
- const positionFixed = ref(false);
36
- const fixedContainer = ref();
37
- const fixedContainerHeight = ref("");
38
- const fixedWrapper = ref();
39
- const fixedWrapperWidth = ref("");
40
- const limitOffset = ref();
41
- const setScrollLimit = () => {
42
- if (props.scrollLimitEl) {
43
- const scrollLimitValue = props.scrollLimitEl.offsetTop + props.scrollLimitEl.clientHeight - fixedWrapper.value.clientHeight + props.scrollThreshold;
44
- if (window.scrollY >= scrollLimitValue) {
45
- limitOffset.value = `translateY(${scrollLimitValue - window.scrollY}px)`;
46
- } else {
47
- limitOffset.value = null;
48
- }
49
- }
50
- };
51
- const fixPosition = () => {
52
- if (fixedContainer.value && props.active) {
53
- positionFixed.value = window.scrollY > fixedContainer.value.offsetTop + props.scrollThreshold;
54
- const fixedWrapperHeight = fixedWrapper.value.clientHeight;
55
- fixedContainerHeight.value = positionFixed.value ? `${fixedWrapperHeight}px` : "";
56
- setScrollLimit();
57
- } else {
58
- positionFixed.value = false;
59
- fixedContainerHeight.value = "";
60
- }
61
- };
62
- const setWidth = () => {
63
- fixedWrapperWidth.value = props.active && fixedContainer.value ? `${fixedContainer.value.offsetWidth}px` : "";
64
- };
65
- watch(
66
- () => props.active,
67
- () => {
68
- if (props.fixWidth) {
69
- setWidth();
70
- }
71
- }
72
- );
73
- onMounted(() => {
74
- window.addEventListener("scroll", fixPosition);
75
- fixPosition();
76
- if (props.fixWidth) {
77
- window.addEventListener("resize", setWidth);
78
- setWidth();
79
- }
80
- });
81
- onUnmounted(() => {
82
- window.removeEventListener("scroll", fixPosition);
83
- window.removeEventListener("resize", setWidth);
84
- });
85
- defineExpose({ positionFixed });
86
- </script>
87
-
88
- <style lang="scss" scoped>
89
- .fixed-wrapper {
90
- &.position-fixed {
91
- position: fixed;
92
- width: 100%;
93
- }
94
- }
95
- </style>
@@ -1,37 +0,0 @@
1
- type __VLS_Props = {
2
- active?: boolean;
3
- scrollThreshold?: number;
4
- scrollLimitEl?: HTMLElement;
5
- fixWidth?: boolean;
6
- size?: {
7
- height?: string;
8
- width?: string;
9
- };
10
- position?: {
11
- left?: string;
12
- top?: string;
13
- right?: string;
14
- bottom?: string;
15
- };
16
- };
17
- declare var __VLS_1: {}, __VLS_3: {};
18
- type __VLS_Slots = {} & {
19
- default?: (props: typeof __VLS_1) => any;
20
- } & {
21
- default?: (props: typeof __VLS_3) => any;
22
- };
23
- declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
24
- positionFixed: import("vue").Ref<boolean, boolean>;
25
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
26
- active: boolean;
27
- scrollThreshold: number;
28
- fixWidth: boolean;
29
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
30
- declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
31
- declare const _default: typeof __VLS_export;
32
- export default _default;
33
- type __VLS_WithSlots<T, S> = T & {
34
- new (): {
35
- $slots: S;
36
- };
37
- };
@@ -1,3 +0,0 @@
1
- import '@angelblanco/v-calendar/style.css';
2
- declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
3
- export default _default;
@@ -1,6 +0,0 @@
1
- import { defineNuxtPlugin } from "#app";
2
- import Vcalendar from "@angelblanco/v-calendar";
3
- import "@angelblanco/v-calendar/style.css";
4
- export default defineNuxtPlugin((nuxtApp) => {
5
- nuxtApp.vueApp.use(Vcalendar, {});
6
- });