@katlux/preset-modern 0.1.0-beta.63 → 0.1.0-beta.64

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 (19) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/assets/scss/css-variables.css +4 -0
  3. package/dist/runtime/assets/scss/index.css +12 -0
  4. package/dist/runtime/components/KMaskTextbox/KMaskTextbox.d.vue.ts +1 -0
  5. package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue +2 -0
  6. package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue.d.ts +1 -0
  7. package/dist/runtime/components/KRangeSlider/KRangeSlider.d.vue.ts +1 -0
  8. package/dist/runtime/components/KRangeSlider/KRangeSlider.vue +2 -0
  9. package/dist/runtime/components/KRangeSlider/KRangeSlider.vue.d.ts +1 -0
  10. package/dist/runtime/components/KSlider/KSlider.d.vue.ts +1 -0
  11. package/dist/runtime/components/KSlider/KSlider.vue +2 -0
  12. package/dist/runtime/components/KSlider/KSlider.vue.d.ts +1 -0
  13. package/dist/runtime/components/KTextarea/KTextarea.d.vue.ts +1 -0
  14. package/dist/runtime/components/KTextarea/KTextarea.vue +12 -3
  15. package/dist/runtime/components/KTextarea/KTextarea.vue.d.ts +1 -0
  16. package/dist/runtime/components/KTextbox/KTextbox.d.vue.ts +4 -1
  17. package/dist/runtime/components/KTextbox/KTextbox.vue +45 -21
  18. package/dist/runtime/components/KTextbox/KTextbox.vue.d.ts +4 -1
  19. 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.0-beta.63",
4
+ "version": "0.1.0-beta.64",
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
@@ -104,10 +104,14 @@
104
104
  --button-bg-dark: var(--button-gradient-dark);
105
105
  --button-text-dark: var(--font-color-light);
106
106
  --button-hover-bg-dark: var(--button-gradient-dark);
107
+ --input-bg: var(--background-color);
107
108
  --input-border-radius: var(--border-radius-sm);
108
109
  --input-border-color: var(--border-color-medium);
110
+ --input-border: 2px solid var(--input-border-color);
111
+ --input-hover-border-color: var(--neutral-400);
109
112
  --input-focus-border-color: var(--primary-500);
110
113
  --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
114
+ --input-height: 48px;
111
115
  --table-header-bg: var(--neutral-100);
112
116
  --table-header-color: var(--neutral-600);
113
117
  --table-border-color: var(--neutral-200);
package/dist/runtime/assets/scss/index.css CHANGED
@@ -104,10 +104,14 @@
104
104
  --button-bg-dark: var(--button-gradient-dark);
105
105
  --button-text-dark: var(--font-color-light);
106
106
  --button-hover-bg-dark: var(--button-gradient-dark);
107
+ --input-bg: var(--background-color);
107
108
  --input-border-radius: var(--border-radius-sm);
108
109
  --input-border-color: var(--border-color-medium);
110
+ --input-border: 2px solid var(--input-border-color);
111
+ --input-hover-border-color: var(--neutral-400);
109
112
  --input-focus-border-color: var(--primary-500);
110
113
  --input-focus-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
114
+ --input-height: 48px;
111
115
  --table-header-bg: var(--neutral-100);
112
116
  --table-header-color: var(--neutral-600);
113
117
  --table-border-color: var(--neutral-200);
@@ -129,4 +133,12 @@
129
133
  --layout-sidebar-width: 240px;
130
134
  --layout-sidebar-bg: var(--neutral-50);
131
135
  --layout-content-bg: #ffffff;
136
+ }
137
+
138
+ .k-input-label {
139
+ font-size: var(--font-size-xs);
140
+ color: var(--neutral-500);
141
+ margin-bottom: calc(var(--gap-sm) / 2);
142
+ display: block;
143
+ font-weight: 500;
132
144
  }
package/dist/runtime/components/KMaskTextbox/KMaskTextbox.d.vue.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  maskedValue: string;
3
4
  placeholder: string;
4
5
  showClear: boolean;
package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template lang="pug">
2
2
  .KMaskTextbox
3
+ label.k-input-label(v-if="label") {{ label }}
3
4
  KTextbox(
4
5
  :modelValue="maskedValue"
5
6
  :placeholder="placeholder"
@@ -14,6 +15,7 @@
14
15
  import { computed } from "vue";
15
16
  import { getMaskPatternDef } from "@katlux/toolkit/components/KMaskTextbox/KMaskTextbox.logic";
16
17
  const props = defineProps({
18
+ label: { type: String, required: false },
17
19
  maskedValue: { type: String, required: true },
18
20
  placeholder: { type: String, required: true },
19
21
  showClear: { type: Boolean, required: true },
package/dist/runtime/components/KMaskTextbox/KMaskTextbox.vue.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  maskedValue: string;
3
4
  placeholder: string;
4
5
  showClear: boolean;
package/dist/runtime/components/KRangeSlider/KRangeSlider.d.vue.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  rangeMin: number;
3
4
  rangeMax: number;
4
5
  rangeStep: number;
package/dist/runtime/components/KRangeSlider/KRangeSlider.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template lang="pug">
2
2
  .KRangeSlider(:class="{ disabled: isDisabled }")
3
+ label.k-input-label(v-if="label") {{ label }}
3
4
  .slider-container(@click="handleTrackClick")
4
5
  .slider-track
5
6
  .slider-range(:style="{ left: minPercent + '%', width: (maxPercent - minPercent) + '%' }")
@@ -26,6 +27,7 @@
26
27
  <script setup>
27
28
  import { computed } from "vue";
28
29
  const props = defineProps({
30
+ label: { type: String, required: false },
29
31
  rangeMin: { type: Number, required: true },
30
32
  rangeMax: { type: Number, required: true },
31
33
  rangeStep: { type: Number, required: true },
package/dist/runtime/components/KRangeSlider/KRangeSlider.vue.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  rangeMin: number;
3
4
  rangeMax: number;
4
5
  rangeStep: number;
package/dist/runtime/components/KSlider/KSlider.d.vue.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  rangeMin: number;
3
4
  rangeMax: number;
4
5
  rangeStep: number;
package/dist/runtime/components/KSlider/KSlider.vue CHANGED
@@ -1,5 +1,6 @@
1
1
  <template lang="pug">
2
2
  .KSlider(:class="{ disabled: isDisabled }")
3
+ label.k-input-label(v-if="label") {{ label }}
3
4
  .slider-container(@click="handleTrackClick")
4
5
  .slider-track
5
6
  .slider-fill(:style="{ width: valuePercent + '%' }")
@@ -17,6 +18,7 @@
17
18
  <script setup>
18
19
  import { computed } from "vue";
19
20
  const props = defineProps({
21
+ label: { type: String, required: false },
20
22
  rangeMin: { type: Number, required: true },
21
23
  rangeMax: { type: Number, required: true },
22
24
  rangeStep: { type: Number, required: true },
package/dist/runtime/components/KSlider/KSlider.vue.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  rangeMin: number;
3
4
  rangeMax: number;
4
5
  rangeStep: number;
package/dist/runtime/components/KTextarea/KTextarea.d.vue.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  type __VLS_Props = {
2
2
  placeholder: string;
3
3
  rows: number;
4
+ label?: string;
4
5
  };
5
6
  type __VLS_ModelProps = {
6
7
  'text'?: string;
package/dist/runtime/components/KTextarea/KTextarea.vue CHANGED
@@ -1,20 +1,29 @@
1
1
  <template lang="pug">
2
- textarea.KTextarea.modern-textarea(v-model="text" :placeholder="placeholder" :rows="rows")
2
+ .KTextarea-wrapper
3
+ label.k-input-label(v-if="label") {{ label }}
4
+ textarea.KTextarea.modern-textarea(v-model="text" :placeholder="placeholder" :rows="rows")
3
5
  </template>
4
6
 
5
7
  <script setup>
6
8
  const text = defineModel("text", { type: String });
7
9
  defineProps({
8
10
  placeholder: { type: String, required: true },
9
- rows: { type: Number, required: true }
11
+ rows: { type: Number, required: true },
12
+ label: { type: String, required: false }
10
13
  });
11
14
  </script>
12
15
 
13
16
  <style scoped>
17
+ .KTextarea-wrapper {
18
+ display: flex;
19
+ flex-direction: column;
20
+ width: 100%;
21
+ }
22
+
14
23
  .KTextarea.modern-textarea {
15
24
  border: 2px solid var(--border-color-medium);
16
25
  border-radius: var(--border-radius-sm);
17
- background: var(--background-color);
26
+ background: var(--input-bg);
18
27
  padding: var(--gap-sm) var(--gap-md);
19
28
  font-family: var(--font-family);
20
29
  font-size: var(--font-size-md);
package/dist/runtime/components/KTextarea/KTextarea.vue.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  type __VLS_Props = {
2
2
  placeholder: string;
3
3
  rows: number;
4
+ label?: string;
4
5
  };
5
6
  type __VLS_ModelProps = {
6
7
  'text'?: string;
package/dist/runtime/components/KTextbox/KTextbox.d.vue.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  text: string;
3
- showClearIcon: boolean;
4
+ showClear: boolean;
4
5
  clear: () => void;
5
6
  placeholder: string;
6
7
  type: string;
8
+ validation?: 'success' | 'warning' | 'error' | null;
9
+ validationText?: string;
7
10
  };
8
11
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
12
  "update:text": (value: string) => any;
package/dist/runtime/components/KTextbox/KTextbox.vue CHANGED
@@ -1,77 +1,101 @@
1
1
  <template lang="pug">
2
- .KTextbox.modern-textbox
3
- input(:type="props.type" v-model="text" :placeholder="placeholder")
4
- .clear-button(v-if="showClearIcon" @click="clear")
5
- KIcon(iconname="close" width="16" height="16")
2
+ .KTextbox-wrapper(:class="$attrs.class" :style="$attrs.style")
3
+ label.k-input-label(v-if="label") {{ label }}
4
+ .KTextbox.modern-textbox(:class="validation ? `is-${validation}` : ''")
5
+ input(v-bind="inputAttrs" :type="props.type" v-model="text" :placeholder="placeholder")
6
+ .clear-button(v-if="showClear" @click.stop="clear" @mousedown.stop)
7
+ KIcon(iconname="close" width="16" height="16")
8
+ span.validation-text(v-if="validation && ['success', 'warning', 'error'].includes(validation) && validationText" :class="`is-${validation}`") {{ validationText }}
6
9
  </template>
7
10
 
8
11
  <script setup>
9
- import { computed } from "vue";
12
+ import { computed, useAttrs } from "vue";
13
+ defineOptions({
14
+ inheritAttrs: false
15
+ });
10
16
  const props = defineProps({
17
+ label: { type: String, required: false },
11
18
  text: { type: String, required: true },
12
- showClearIcon: { type: Boolean, required: true },
19
+ showClear: { type: Boolean, required: true },
13
20
  clear: { type: Function, required: true },
14
21
  placeholder: { type: String, required: true },
15
- type: { type: String, required: true }
22
+ type: { type: String, required: true },
23
+ validation: { type: [String, null], required: false },
24
+ validationText: { type: String, required: false }
16
25
  });
17
26
  const emit = defineEmits(["update:text"]);
18
27
  const text = computed({
19
28
  get: () => props.text,
20
29
  set: (value) => emit("update:text", value)
21
30
  });
31
+ const attrs = useAttrs();
32
+ const inputAttrs = computed(() => {
33
+ const { class: _, style: __, ...rest } = attrs;
34
+ return rest;
35
+ });
22
36
  </script>
23
37
 
24
38
  <style scoped>
39
+ .KTextbox-wrapper {
40
+ display: flex;
41
+ flex-direction: column;
42
+ flex: 1;
43
+ min-width: 0;
44
+ }
45
+
25
46
  .KTextbox.modern-textbox {
47
+ position: relative;
26
48
  display: flex;
27
49
  align-items: center;
28
- gap: var(--gap-sm);
29
- border: 2px solid var(--border-color-medium);
50
+ border: var(--input-border);
30
51
  border-radius: var(--border-radius-sm);
31
- background: var(--background-color);
32
- height: 48px;
33
- padding: 0 var(--gap-md);
52
+ background: var(--input-bg);
53
+ height: var(--input-height);
54
+ box-sizing: border-box;
34
55
  transition: all var(--transition-bounce);
35
56
  box-shadow: var(--shadow-sm);
36
57
  }
37
58
  .KTextbox.modern-textbox:focus-within {
38
- border-color: var(--primary-500);
59
+ border-color: var(--input-focus-border-color);
39
60
  box-shadow: var(--input-focus-shadow), var(--shadow-sm);
40
61
  }
41
62
  .KTextbox.modern-textbox:hover {
42
- border-color: var(--neutral-400);
63
+ border-color: var(--input-hover-border-color);
43
64
  }
44
65
  .KTextbox.modern-textbox input {
45
66
  flex: 1;
67
+ min-width: 0;
46
68
  background: transparent;
47
69
  border: none;
48
70
  outline: none;
49
71
  font-size: 15px;
50
72
  color: var(--font-color-primary);
51
- padding: 0;
73
+ box-sizing: border-box;
74
+ padding: 0 var(--component-gap);
75
+ height: 100%;
76
+ width: 100%;
52
77
  }
53
78
  .KTextbox.modern-textbox input::placeholder {
54
79
  color: var(--neutral-400);
55
80
  }
56
81
  .KTextbox.modern-textbox .clear-button {
82
+ position: absolute;
83
+ right: var(--component-gap);
84
+ top: 50%;
85
+ transform: translateY(-50%);
57
86
  display: flex;
58
87
  align-items: center;
59
88
  justify-content: center;
60
89
  width: 24px;
61
90
  height: 24px;
62
- border-radius: 50%;
63
- background: var(--neutral-200);
64
91
  color: var(--neutral-500);
65
92
  cursor: pointer;
66
93
  transition: all var(--transition-fast);
67
- flex-shrink: 0;
68
94
  }
69
95
  .KTextbox.modern-textbox .clear-button:hover {
70
- background: var(--neutral-300);
71
96
  color: var(--neutral-700);
72
- transform: scale(1.1);
73
97
  }
74
98
  .KTextbox.modern-textbox .clear-button:active {
75
- transform: scale(0.95);
99
+ transform: translateY(-50%) scale(0.95);
76
100
  }
77
101
  </style>
package/dist/runtime/components/KTextbox/KTextbox.vue.d.ts CHANGED
@@ -1,9 +1,12 @@
1
1
  type __VLS_Props = {
2
+ label?: string;
2
3
  text: string;
3
- showClearIcon: boolean;
4
+ showClear: boolean;
4
5
  clear: () => void;
5
6
  placeholder: string;
6
7
  type: string;
8
+ validation?: 'success' | 'warning' | 'error' | null;
9
+ validationText?: string;
7
10
  };
8
11
  declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
9
12
  "update:text": (value: string) => any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@katlux/preset-modern",
3
- "version": "0.1.0-beta.63",
3
+ "version": "0.1.0-beta.64",
4
4
  "description": "Modern default design preset and styling variables for Katlux components",
5
5
  "author": "Katlux",
6
6
  "license": "MIT",