orio-ui 1.0.3 → 1.0.4
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 +1 -1
- package/dist/runtime/assets/css/cool-gradient-hover.css +5 -3
- package/dist/runtime/assets/css/main.css +1 -1
- package/dist/runtime/assets/css/variables.css +1 -0
- package/dist/runtime/components/Button.vue +1 -1
- package/dist/runtime/components/CheckBox.vue +1 -1
- package/dist/runtime/components/ControlElement.vue +1 -0
- package/dist/runtime/components/DashedContainer.vue +4 -2
- package/dist/runtime/components/DatePicker.vue +1 -1
- package/dist/runtime/components/DateRangePicker.vue +1 -1
- package/dist/runtime/components/EmptyState.vue +2 -4
- package/dist/runtime/components/Input.vue +1 -2
- package/dist/runtime/components/Modal.vue +1 -1
- package/dist/runtime/components/Selector.vue +2 -2
- package/dist/runtime/components/Tag.vue +1 -1
- package/dist/runtime/components/Textarea.vue +1 -2
- package/package.json +2 -1
package/dist/module.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
.gradient-hover {
|
|
2
2
|
--gh-color: #fff;
|
|
3
|
-
--gh-angle:
|
|
3
|
+
--gh-angle: 150deg;
|
|
4
4
|
--gh-peek-x: 95%;
|
|
5
5
|
--gh-mix-base: black;
|
|
6
|
-
background-image: linear-gradient(var(--gh-angle), color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base))
|
|
6
|
+
background-image: linear-gradient(var(--gh-angle), color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 10%, var(--gh-color) 50%, color-mix(in srgb, var(--gh-color) 80%, var(--gh-mix-base)) 80%);
|
|
7
7
|
background-repeat: no-repeat;
|
|
8
8
|
background-size: 0% 0%;
|
|
9
9
|
background-position: 0% 0%;
|
|
@@ -18,6 +18,8 @@
|
|
|
18
18
|
|
|
19
19
|
/* Dark mode: now theme-aware */
|
|
20
20
|
:root[data-mode=dark] .gradient-hover {
|
|
21
|
-
--gh-color: var(
|
|
21
|
+
--gh-color: var(
|
|
22
|
+
--color-accent
|
|
23
|
+
); /* switch from static white to theme accent */
|
|
22
24
|
--gh-mix-base: var(--color-bg); /* blend into dark background */
|
|
23
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import "./colors.css";@import "./animation.css";@import "./scroll.css";*,:after,:before{box-sizing:border-box}
|
|
1
|
+
@import "./colors.css";@import "./variables.css";@import "./animation.css";@import "./scroll.css";@import "./cool-gradient-hover.scss";*,:after,:before{box-sizing:border-box}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px}
|
|
@@ -62,7 +62,7 @@ defineProps<{
|
|
|
62
62
|
width: var(--box-size);
|
|
63
63
|
height: var(--box-size);
|
|
64
64
|
border: 2px solid var(--color-border);
|
|
65
|
-
border-radius:
|
|
65
|
+
border-radius: var(--border-radius-sm);
|
|
66
66
|
background-color: var(--color-bg);
|
|
67
67
|
display: inline-flex;
|
|
68
68
|
align-items: center;
|
|
@@ -33,12 +33,13 @@ const iconSize = computed(() => {
|
|
|
33
33
|
.dashed-container {
|
|
34
34
|
cursor: pointer;
|
|
35
35
|
border: 3px dashed var(--color-border);
|
|
36
|
-
border-radius:
|
|
37
|
-
padding:
|
|
36
|
+
border-radius: var(--border-radius-lg);
|
|
37
|
+
padding: 2rem;
|
|
38
38
|
display: flex;
|
|
39
39
|
flex-direction: column;
|
|
40
40
|
justify-content: center;
|
|
41
41
|
align-items: center;
|
|
42
|
+
gap: 0.5rem;
|
|
42
43
|
}
|
|
43
44
|
.dashed-container:hover .text-class {
|
|
44
45
|
color: var(--color-accent-hover);
|
|
@@ -50,5 +51,6 @@ const iconSize = computed(() => {
|
|
|
50
51
|
|
|
51
52
|
.text-class {
|
|
52
53
|
color: var(--color-accent);
|
|
54
|
+
font-weight: 500;
|
|
53
55
|
}
|
|
54
56
|
</style>
|
|
@@ -26,5 +26,5 @@ const randomName = computed(() => `date-${nanoid(8)}`);
|
|
|
26
26
|
</template>
|
|
27
27
|
|
|
28
28
|
<style scoped>
|
|
29
|
-
.date-picker *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:
|
|
29
|
+
.date-picker *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
|
|
30
30
|
</style>
|
|
@@ -33,7 +33,7 @@ defineExpose({ dateIsCorrect });
|
|
|
33
33
|
|
|
34
34
|
<template>
|
|
35
35
|
<div>
|
|
36
|
-
<orio-control-element>
|
|
36
|
+
<orio-control-element v-bind="$attrs">
|
|
37
37
|
<div class="date-range-picker">
|
|
38
38
|
<orio-date-picker v-model:date="dates.startDate" :month />
|
|
39
39
|
<orio-date-picker v-model:date="dates.endDate" :month />
|
|
@@ -40,25 +40,23 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
40
40
|
justify-content: center;
|
|
41
41
|
text-align: center;
|
|
42
42
|
gap: 0.5rem;
|
|
43
|
-
padding:
|
|
43
|
+
padding: 1rem;
|
|
44
44
|
color: var(--color-text-secondary);
|
|
45
45
|
}
|
|
46
46
|
.empty-state.small {
|
|
47
|
-
padding:
|
|
47
|
+
padding: 0.5rem;
|
|
48
48
|
gap: 0.25rem;
|
|
49
49
|
}
|
|
50
50
|
.empty-state.small .empty-state-icon {
|
|
51
51
|
font-size: 2rem;
|
|
52
52
|
}
|
|
53
53
|
.empty-state.medium {
|
|
54
|
-
padding: 2rem;
|
|
55
54
|
gap: 0.5rem;
|
|
56
55
|
}
|
|
57
56
|
.empty-state.medium .empty-state-icon {
|
|
58
57
|
font-size: 3rem;
|
|
59
58
|
}
|
|
60
59
|
.empty-state.large {
|
|
61
|
-
padding: 3rem;
|
|
62
60
|
gap: 1rem;
|
|
63
61
|
}
|
|
64
62
|
.empty-state.large .empty-state-icon {
|
|
@@ -17,7 +17,7 @@ const text = defineModel<string>({ default: '' });
|
|
|
17
17
|
width: 100%;
|
|
18
18
|
padding: 0.5rem 0.75rem;
|
|
19
19
|
border: 1px solid var(--color-border);
|
|
20
|
-
border-radius:
|
|
20
|
+
border-radius: var(--border-radius-md);
|
|
21
21
|
font-size: 1rem;
|
|
22
22
|
color: var(--color-text);
|
|
23
23
|
background-color: var(--color-bg);
|
|
@@ -32,7 +32,6 @@ const text = defineModel<string>({ default: '' });
|
|
|
32
32
|
}
|
|
33
33
|
.text-input:focus {
|
|
34
34
|
border-color: var(--color-accent);
|
|
35
|
-
box-shadow: 0 0 0 2px var(--color-accent-soft);
|
|
36
35
|
outline: none;
|
|
37
36
|
}
|
|
38
37
|
.text-input:disabled {
|
|
@@ -65,5 +65,5 @@ watch(show, (open) => {
|
|
|
65
65
|
</template>
|
|
66
66
|
|
|
67
67
|
<style scoped>
|
|
68
|
-
.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease}.modal{background:#fff;border-radius:
|
|
68
|
+
.overlay{align-items:center;backdrop-filter:blur(6px);background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;transition:opacity .25s ease;z-index:99}.modal{background:#fff;border-radius:var(--border-radius-lg);box-shadow:0 25px 60px rgba(0,0,0,.25);color:var(--color-muted);max-height:90vh;max-width:90vw;padding:24px;position:absolute;transform-origin:top left;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s ease;width:380px;z-index:100}.modal,.overlay-fade-enter-from,.overlay-fade-leave-to{opacity:0}.overlay-fade-enter-active,.overlay-fade-leave-active{transition:opacity .25s ease}
|
|
69
69
|
</style>
|
|
@@ -162,7 +162,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
|
|
|
162
162
|
cursor: pointer;
|
|
163
163
|
background: var(--color-bg);
|
|
164
164
|
border: 1px solid var(--color-border);
|
|
165
|
-
border-radius:
|
|
165
|
+
border-radius: var(--border-radius-md);
|
|
166
166
|
padding: 0.5rem 0.75rem;
|
|
167
167
|
font-size: 0.95rem;
|
|
168
168
|
color: var(--color-text);
|
|
@@ -190,7 +190,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
|
|
|
190
190
|
overflow: auto;
|
|
191
191
|
background: var(--color-bg);
|
|
192
192
|
border: 1px solid var(--color-border);
|
|
193
|
-
border-radius:
|
|
193
|
+
border-radius: var(--border-radius-md);
|
|
194
194
|
margin-top: 0.25rem;
|
|
195
195
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
196
196
|
}
|
|
@@ -17,5 +17,5 @@ withDefaults(defineProps<Props>(), {
|
|
|
17
17
|
</template>
|
|
18
18
|
|
|
19
19
|
<style scoped>
|
|
20
|
-
.tag{border:1px solid transparent;border-radius:
|
|
20
|
+
.tag{border:1px solid transparent;border-radius:var(--border-radius-lg);display:inline-block;font-size:.8rem;font-weight:500;line-height:1;max-height:1rem;padding:.25rem .6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag--neutral{background-color:var(--color-surface);border-color:color-mix(in srgb,var(--color-border) 80%,var(--color-accent) 20%);color:var(--color-muted)}.tag--accent{background-color:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}
|
|
21
21
|
</style>
|
|
@@ -20,9 +20,8 @@ const modelValue = defineModel<string>({ default: '' });
|
|
|
20
20
|
width: 100%;
|
|
21
21
|
padding: 0.5rem 0.75rem;
|
|
22
22
|
border: 1px solid var(--color-border);
|
|
23
|
-
border-radius:
|
|
23
|
+
border-radius: var(--border-radius-md);
|
|
24
24
|
font-size: 1rem;
|
|
25
|
-
line-height: 1.4;
|
|
26
25
|
color: var(--color-text);
|
|
27
26
|
background-color: var(--color-bg);
|
|
28
27
|
box-sizing: border-box;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "orio-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "Modern Nuxt component library with theme support",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/module.mjs",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"docs:build": "vitepress build docs",
|
|
29
29
|
"docs:preview": "vitepress preview docs",
|
|
30
30
|
"lint": "eslint .",
|
|
31
|
+
"lint:fix": "eslint . --fix",
|
|
31
32
|
"typecheck": "vue-tsc --noEmit"
|
|
32
33
|
},
|
|
33
34
|
"dependencies": {
|