@katlux/preset-modern 0.1.1-alpha.93 → 0.1.1-alpha.95

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.
Files changed (13) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/assets/scss/css-variables.css +1 -0
  3. package/dist/runtime/assets/scss/index.css +5 -3
  4. package/dist/runtime/components/KDatatable/KDatatable.d.vue.ts +1 -1
  5. package/dist/runtime/components/KDatatable/KDatatable.vue.d.ts +1 -1
  6. package/dist/runtime/components/KMaskTextbox/KMaskTextbox.d.vue.ts +2 -2
  7. package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue.d.ts +2 -2
  8. package/dist/runtime/components/KPagination/KPagination.d.vue.ts +1 -0
  9. package/dist/runtime/components/KPagination/KPagination.vue +5 -4
  10. package/dist/runtime/components/KPagination/KPagination.vue.d.ts +1 -0
  11. package/dist/runtime/components/KRangeSlider/KRangeSlider.vue +11 -1
  12. package/dist/runtime/components/KSlider/KSlider.vue +10 -1
  13. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@katlux/preset-modern",
3
3
  "configKey": "katluxTemplateModern",
4
- "version": "0.1.1-alpha.93",
4
+ "version": "0.1.1-alpha.95",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/assets/scss/css-variables.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --font-color-secondary: var(--neutral-500);
32
32
  --font-color-heading: var(--neutral-900);
33
33
  --font-color-light: #ffffff;
34
+ --input-label-color: var(--font-color-primary);
34
35
  --background-color: #ffffff;
35
36
  --background-color-light: var(--neutral-50);
36
37
  --background-color-medium: var(--neutral-100);
package/dist/runtime/assets/scss/index.css CHANGED
@@ -31,6 +31,7 @@
31
31
  --font-color-secondary: var(--neutral-500);
32
32
  --font-color-heading: var(--neutral-900);
33
33
  --font-color-light: #ffffff;
34
+ --input-label-color: var(--font-color-primary);
34
35
  --background-color: #ffffff;
35
36
  --background-color-light: var(--neutral-50);
36
37
  --background-color-medium: var(--neutral-100);
@@ -132,9 +133,10 @@
132
133
  }
133
134
 
134
135
  .k-input-label {
135
- font-size: var(--font-size-xs);
136
- color: var(--font-color-secondary);
137
- margin-bottom: calc(var(--gap-sm) / 2);
136
+ font-size: var(--font-size-sm, 13px);
137
+ color: var(--input-label-color, var(--font-color-primary, currentColor));
138
+ margin-bottom: calc(var(--gap-sm, 8px) / 2);
138
139
  display: block;
139
140
  font-weight: 500;
141
+ line-height: 1.4;
140
142
  }
package/dist/runtime/components/KDatatable/KDatatable.d.vue.ts CHANGED
@@ -21,9 +21,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
21
21
  "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
22
22
  "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
23
23
  }>, {
24
- bulkActions: Array<IKDatatableAction>;
25
24
  selectedRows: any[];
26
25
  selectAll: boolean;
26
+ bulkActions: Array<IKDatatableAction>;
27
27
  visibleFields: Array<string> | null;
28
28
  rowActions: Array<IKDatatableAction>;
29
29
  cellSlots: Record<string, any>;
package/dist/runtime/components/KDatatable/KDatatable.vue.d.ts CHANGED
@@ -21,9 +21,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
21
21
  "onUpdate:selectedRows"?: ((value: any[]) => any) | undefined;
22
22
  "onUpdate:selectAll"?: ((value: boolean) => any) | undefined;
23
23
  }>, {
24
- bulkActions: Array<IKDatatableAction>;
25
24
  selectedRows: any[];
26
25
  selectAll: boolean;
26
+ bulkActions: Array<IKDatatableAction>;
27
27
  visibleFields: Array<string> | null;
28
28
  rowActions: Array<IKDatatableAction>;
29
29
  cellSlots: Record<string, any>;
package/dist/runtime/components/KMaskTextbox/KMaskTextbox.d.vue.ts CHANGED
@@ -8,11 +8,11 @@ type __VLS_Props = {
8
8
  validationText?: string;
9
9
  };
10
10
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
11
- "update:maskedValue": (value: string) => any;
12
11
  clear: () => any;
12
+ "update:maskedValue": (value: string) => any;
13
13
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
14
- "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
15
14
  onClear?: (() => any) | undefined;
15
+ "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
16
16
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
17
17
  declare const _default: typeof __VLS_export;
18
18
  export default _default;
package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue.d.ts CHANGED
@@ -8,11 +8,11 @@ type __VLS_Props = {
8
8
  validationText?: string;
9
9
  };
10
10
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
11
- "update:maskedValue": (value: string) => any;
12
11
  clear: () => any;
12
+ "update:maskedValue": (value: string) => any;
13
13
  }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
14
- "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
15
14
  onClear?: (() => any) | undefined;
15
+ "onUpdate:maskedValue"?: ((value: string) => any) | undefined;
16
16
  }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
17
17
  declare const _default: typeof __VLS_export;
18
18
  export default _default;
package/dist/runtime/components/KPagination/KPagination.d.vue.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  type __VLS_Props = {
2
2
  dp: any;
3
+ currentPage: number;
3
4
  totalPages: number;
4
5
  getPageHref: (page: number) => string | undefined;
5
6
  visiblePages: number[];
package/dist/runtime/components/KPagination/KPagination.vue CHANGED
@@ -5,7 +5,7 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
5
5
  KButton.nav-btn(
6
6
  @click="goToPrev"
7
7
  :disabled="!showPrevButton"
8
- :href="getPageHref(dp.currentPage.value - 1)"
8
+ :href="getPageHref(currentPage - 1)"
9
9
  size="small"
10
10
  type="light"
11
11
  :aria-label="t('Previous Page')"
@@ -28,8 +28,8 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
28
28
  @click="() => pageClicked(item)"
29
29
  :href="getPageHref(item)"
30
30
  size="small"
31
- :type="item === dp.currentPage.value ? 'primary' : 'light'"
32
- :aria-current="item === dp.currentPage.value ? 'page' : undefined"
31
+ :type="item === currentPage ? 'primary' : 'light'"
32
+ :aria-current="item === currentPage ? 'page' : undefined"
33
33
  :aria-label="t('Page') + ' ' + item"
34
34
  ) {{ item }}
35
35
 
@@ -49,7 +49,7 @@ nav.k-pagination-modern(v-if="totalPages > 1" :aria-label="t('Pagination Navigat
49
49
  KButton.nav-btn(
50
50
  @click="goToNext"
51
51
  :disabled="!showNextButton"
52
- :href="getPageHref(dp.currentPage.value + 1)"
52
+ :href="getPageHref(currentPage + 1)"
53
53
  size="small"
54
54
  type="light"
55
55
  :aria-label="t('Next Page')"
@@ -61,6 +61,7 @@ import { useKatluxI18n } from "#toolkit/composables/useKatluxI18n";
61
61
  const { t } = useKatluxI18n();
62
62
  defineProps({
63
63
  dp: { type: null, required: true },
64
+ currentPage: { type: Number, required: true },
64
65
  totalPages: { type: Number, required: true },
65
66
  getPageHref: { type: Function, required: true },
66
67
  visiblePages: { type: Array, required: true },
package/dist/runtime/components/KPagination/KPagination.vue.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  type __VLS_Props = {
2
2
  dp: any;
3
+ currentPage: number;
3
4
  totalPages: number;
4
5
  getPageHref: (page: number) => string | undefined;
5
6
  visiblePages: number[];
package/dist/runtime/components/KRangeSlider/KRangeSlider.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  label.k-input-label(v-if="label") {{ label }}
4
4
  .slider-container(@click="handleTrackClick")
5
5
  .slider-track
6
- .slider-range(:style="{ left: minPercent + '%', width: (maxPercent - minPercent) + '%' }")
6
+ .slider-range(:style="{ '--range-start': minPercent + '%', '--range-width': (maxPercent - minPercent) + '%' }")
7
7
  input.slider-input.slider-min(
8
8
  type="range"
9
9
  :min="rangeMin"
@@ -82,6 +82,14 @@ const handleTrackClick = (event) => {
82
82
  opacity: 0.5;
83
83
  cursor: not-allowed;
84
84
  }
85
+ .KRangeSlider .k-input-label {
86
+ font-size: var(--font-size-sm, 13px);
87
+ color: var(--input-label-color, var(--font-color-primary, currentColor));
88
+ margin-bottom: 8px;
89
+ display: block;
90
+ font-weight: 500;
91
+ line-height: 1.4;
92
+ }
85
93
  .KRangeSlider .slider-container {
86
94
  position: relative;
87
95
  height: 8px;
@@ -98,6 +106,8 @@ const handleTrackClick = (event) => {
98
106
  .KRangeSlider .slider-range {
99
107
  position: absolute;
100
108
  height: 8px;
109
+ left: var(--range-start, 0%);
110
+ width: var(--range-width, 0%);
101
111
  background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
102
112
  border-radius: 4px;
103
113
  z-index: 1;
package/dist/runtime/components/KSlider/KSlider.vue CHANGED
@@ -3,7 +3,7 @@
3
3
  label.k-input-label(v-if="label") {{ label }}
4
4
  .slider-container(@click="handleTrackClick")
5
5
  .slider-track
6
- .slider-fill(:style="{ width: valuePercent + '%' }")
6
+ .slider-fill(:style="{ '--slider-fill': valuePercent + '%' }")
7
7
  input.slider-input(
8
8
  type="range"
9
9
  :min="rangeMin"
@@ -53,6 +53,14 @@ const handleTrackClick = (event) => {
53
53
  opacity: 0.5;
54
54
  cursor: not-allowed;
55
55
  }
56
+ .KSlider .k-input-label {
57
+ font-size: var(--font-size-sm, 13px);
58
+ color: var(--input-label-color, var(--font-color-primary, currentColor));
59
+ margin-bottom: 8px;
60
+ display: block;
61
+ font-weight: 500;
62
+ line-height: 1.4;
63
+ }
56
64
  .KSlider .slider-container {
57
65
  position: relative;
58
66
  height: 8px;
@@ -69,6 +77,7 @@ const handleTrackClick = (event) => {
69
77
  .KSlider .slider-fill {
70
78
  position: absolute;
71
79
  height: 8px;
80
+ width: var(--slider-fill, 0%);
72
81
  background: linear-gradient(90deg, var(--primary-400), var(--primary-600));
73
82
  border-radius: 4px;
74
83
  z-index: 1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@katlux/preset-modern",
3
- "version": "0.1.1-alpha.93",
3
+ "version": "0.1.1-alpha.95",
4
4
  "description": "Modern default design preset and styling variables for Katlux components",
5
5
  "author": "Katlux",
6
6
  "license": "Apache-2.0",