orio-ui 1.16.2 → 1.17.0

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 (8) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/assets/css/variables.css +1 -1
  3. package/dist/runtime/components/ControlElement.vue +15 -9
  4. package/dist/runtime/components/Input.vue +5 -2
  5. package/dist/runtime/components/Textarea.vue +1 -1
  6. package/dist/runtime/composables/useValidation.d.ts +3 -3
  7. package/dist/runtime/composables/useValidation.js +5 -6
  8. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0 || ^4.0.0"
6
6
  },
7
- "version": "1.16.2",
7
+ "version": "1.17.0",
8
8
  "builder": {
9
9
  "@nuxt/module-builder": "1.0.2",
10
10
  "unbuild": "3.6.1"
package/dist/runtime/assets/css/variables.css CHANGED
@@ -1 +1 @@
1
- :root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}
1
+ :root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;--border-radius-pill:9999px;--font-xs:0.65rem;--font-sm:0.75rem;--font-md:0.875rem;--font-lg:1.25rem;--font-xl:1.75rem}
package/dist/runtime/components/ControlElement.vue CHANGED
@@ -37,46 +37,50 @@ const props = defineProps({
37
37
  <style scoped>
38
38
  .control {
39
39
  --control-font-size: var(--font-md);
40
+ --control-label-font-size: var(--font-sm);
40
41
  --control-py: 0.5rem;
41
42
  --control-px: 0.75rem;
42
43
  --control-gap: 0.5rem;
43
44
  --control-radius: var(--border-radius-md);
44
45
  --control-icon-size: 1rem;
45
46
  --control-inner-block-start: 1.25rem;
46
- --control-inner-block-end: 0.25rem;
47
+ --control-inner-block-end: 0.2rem;
47
48
  --control-label-block-start: 0.25rem;
48
49
  }
49
50
  .control.size-sm {
50
51
  --control-font-size: var(--font-sm);
52
+ --control-label-font-size: var(--font-xs);
51
53
  --control-py: 0.25rem;
52
54
  --control-px: 0.5rem;
53
55
  --control-gap: 0.25rem;
54
56
  --control-radius: var(--border-radius-sm);
55
57
  --control-icon-size: 0.75rem;
56
58
  --control-inner-block-start: 1rem;
57
- --control-inner-block-end: 0.15rem;
59
+ --control-inner-block-end: 0.1rem;
58
60
  --control-label-block-start: 0.2rem;
59
61
  }
60
62
  .control.size-lg {
61
63
  --control-font-size: var(--font-lg);
64
+ --control-label-font-size: var(--font-md);
62
65
  --control-py: 0.625rem;
63
66
  --control-px: 1rem;
64
67
  --control-gap: 0.5rem;
65
68
  --control-radius: var(--border-radius-md);
66
69
  --control-icon-size: 1.25rem;
67
- --control-inner-block-start: 1.75rem;
68
- --control-inner-block-end: 0.25rem;
70
+ --control-inner-block-start: 1.1rem;
71
+ --control-inner-block-end: 0.2rem;
69
72
  --control-label-block-start: 0.25rem;
70
73
  }
71
74
  .control.size-xl {
72
75
  --control-font-size: var(--font-xl);
76
+ --control-label-font-size: var(--font-lg);
73
77
  --control-py: 0.75rem;
74
78
  --control-px: 1.25rem;
75
79
  --control-gap: 0.75rem;
76
80
  --control-radius: var(--border-radius-lg);
77
81
  --control-icon-size: 1.5rem;
78
- --control-inner-block-start: 2.25rem;
79
- --control-inner-block-end: 0.375rem;
82
+ --control-inner-block-start: 1.5rem;
83
+ --control-inner-block-end: 0;
80
84
  --control-label-block-start: 0.25rem;
81
85
  }
82
86
  .control {
@@ -86,7 +90,7 @@ const props = defineProps({
86
90
  gap: 0.1rem;
87
91
  }
88
92
  .control .control-label {
89
- font-size: var(--control-font-size);
93
+ font-size: var(--control-label-font-size);
90
94
  user-select: none;
91
95
  }
92
96
  .control .control-group {
@@ -94,13 +98,15 @@ const props = defineProps({
94
98
  }
95
99
  .control .control-error {
96
100
  color: var(--color-danger);
97
- font-size: var(--control-font-size);
101
+ font-size: var(--control-label-font-size);
98
102
  }
99
103
  .control .slot-wrapper :deep(*) {
100
104
  font-size: var(--control-font-size);
101
105
  }
106
+ .control.has-error .slot-wrapper {
107
+ border: 1px solid var(--color-danger);
108
+ }
102
109
  .control.has-error .slot-wrapper :deep(*) {
103
- border-color: var(--color-danger);
104
110
  font-size: var(--control-font-size);
105
111
  }
106
112
  .control.minimal {
package/dist/runtime/components/Input.vue CHANGED
@@ -13,7 +13,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
13
13
  :class="{ inner: layout === 'inner' }"
14
14
  >
15
15
  <slot name="before" />
16
- <input v-bind="$attrs" :id v-model="modelValue" type="text" />
16
+ <input :id v-model="modelValue" type="text" v-bind="$attrs" />
17
17
  <slot name="after" />
18
18
  </orio-control-element>
19
19
  </template>
@@ -71,7 +71,10 @@ input {
71
71
  top: var(--control-label-block-start);
72
72
  color: var(--color-muted);
73
73
  }
74
+ .inner :deep(.slot-wrapper) {
75
+ padding: var(--control-inner-block-start) var(--control-px) var(--control-inner-block-end);
76
+ }
74
77
  .inner input {
75
- padding: var(--control-inner-block-start) 0 var(--control-inner-block-end);
78
+ padding: 0;
76
79
  }
77
80
  </style>
package/dist/runtime/components/Textarea.vue CHANGED
@@ -14,7 +14,7 @@ defineProps({
14
14
  :layout="layout === 'inner' ? 'vertical' : layout"
15
15
  :class="{ inner: layout === 'inner' }"
16
16
  >
17
- <textarea v-bind="attrs" :id v-model="modelValue" rows="4" />
17
+ <textarea :id v-model="modelValue" rows="4" v-bind="attrs" />
18
18
  </orio-control-element>
19
19
  </template>
20
20
 
package/dist/runtime/composables/useValidation.d.ts CHANGED
@@ -2,11 +2,11 @@ import { type MaybeRef } from "vue";
2
2
  export interface ValidationRule {
3
3
  model: MaybeRef<any>;
4
4
  id: string;
5
- validator: (model: MaybeRef<any>) => boolean;
5
+ validator: (model: any) => boolean;
6
6
  message?: string;
7
7
  }
8
- export declare function isFilled(model: MaybeRef<string | []>): boolean;
9
- export declare function isEmail(model: MaybeRef<string>): boolean;
8
+ export declare function isFilled(value: string | []): boolean;
9
+ export declare function isEmail(value: string): boolean;
10
10
  export declare function useValidation(rules?: ValidationRule[]): {
11
11
  checkValidity: () => boolean;
12
12
  errors: Record<string, string | null>;
package/dist/runtime/composables/useValidation.js CHANGED
@@ -1,9 +1,8 @@
1
- import { reactive, isRef, ref } from "vue";
2
- export function isFilled(model) {
3
- return isRef(model) ? !!model.value.length : !!model.length;
1
+ import { reactive, ref, unref } from "vue";
2
+ export function isFilled(value) {
3
+ return !!value.length;
4
4
  }
5
- export function isEmail(model) {
6
- const value = isRef(model) ? model.value : model;
5
+ export function isEmail(value) {
7
6
  if (!value) return true;
8
7
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
9
8
  return emailRegex.test(value);
@@ -17,7 +16,7 @@ export function useValidation(rules) {
17
16
  validator,
18
17
  message
19
18
  }) {
20
- if (!validator(model)) {
19
+ if (!validator(unref(model))) {
21
20
  if (!errors[id]) {
22
21
  errors[id] = message || "Error on this field";
23
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "orio-ui",
3
- "version": "1.16.2",
3
+ "version": "1.17.0",
4
4
  "description": "Modern Nuxt component library with theme support",
5
5
  "type": "module",
6
6
  "main": "./dist/module.mjs",