@proj-airi/ui 0.4.27 → 0.6.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.
- package/README.md +41 -0
- package/dist/components/Form/Range/ColorHueRange.vue +60 -0
- package/dist/components/Form/Range/index.d.ts +1 -0
- package/dist/components/Form/Range/index.mjs +1 -0
- package/dist/components/Form/Textarea/Textarea.vue +1 -1
- package/package.json +8 -8
- package/src/components/Form/Range/ColorHueRange.vue +61 -0
- package/src/components/Form/Range/index.ts +1 -0
- package/src/components/Form/Textarea/Textarea.vue +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @proj-airi/ui
|
|
2
|
+
|
|
3
|
+
A stylized UI component library built with [Reka UI](https://reka-ui.com/).
|
|
4
|
+
|
|
5
|
+
To preview the components, refer to the [`stage-ui`](../stage-ui) package for instructions for running the Histoire UI storyboard.
|
|
6
|
+
|
|
7
|
+
## Usage
|
|
8
|
+
|
|
9
|
+
```shell
|
|
10
|
+
ni @proj-airi/ui -D # from @antfu/ni, can be installed via `npm i -g @antfu/ni`
|
|
11
|
+
pnpm i @proj-airi/ui -D
|
|
12
|
+
yarn i @proj-airi/ui -D
|
|
13
|
+
npm i @proj-airi/ui -D
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
```vue
|
|
17
|
+
<script setup lang="ts">
|
|
18
|
+
import { Button } from '@proj-airi/ui'
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<Button>Click me</Button>
|
|
23
|
+
</template>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Components
|
|
27
|
+
|
|
28
|
+
* [Animations](src/components/Animations)
|
|
29
|
+
* [TransitionVertical](src/components/Animations/TransitionVertical.vue)
|
|
30
|
+
* [Form](src/components/Form)
|
|
31
|
+
* [Checkbox](src/components/Form/Checkbox)
|
|
32
|
+
* [Field](src/components/Form/Field)
|
|
33
|
+
* [Input](src/components/Form/Input)
|
|
34
|
+
* [Radio](src/components/Form/Radio)
|
|
35
|
+
* [Range](src/components/Form/Range)
|
|
36
|
+
* [Select](src/components/Form/Select)
|
|
37
|
+
* [Textarea](src/components/Form/Textarea)
|
|
38
|
+
|
|
39
|
+
## License
|
|
40
|
+
|
|
41
|
+
[MIT](../../LICENSE)
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
const props = defineProps({
|
|
3
|
+
disabled: { type: Boolean, required: false },
|
|
4
|
+
class: { type: String, required: false }
|
|
5
|
+
});
|
|
6
|
+
const colorValue = defineModel("colorValue", { type: String, ...{
|
|
7
|
+
type: String,
|
|
8
|
+
default: ""
|
|
9
|
+
} });
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<template>
|
|
13
|
+
<input
|
|
14
|
+
v-model="colorValue"
|
|
15
|
+
type="range" min="0" max="360" step="0.01"
|
|
16
|
+
class="color-hue-range"
|
|
17
|
+
transition="all ease-in-out duration-250"
|
|
18
|
+
:disabled="props.disabled"
|
|
19
|
+
:class="[
|
|
20
|
+
props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
|
|
21
|
+
props.class || '',
|
|
22
|
+
]"
|
|
23
|
+
>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<style scoped>
|
|
27
|
+
.color-hue-range {
|
|
28
|
+
--at-apply: appearance-none h-10 rounded-lg;
|
|
29
|
+
background: linear-gradient(
|
|
30
|
+
to right,
|
|
31
|
+
oklch(85% 0.2 0),
|
|
32
|
+
oklch(85% 0.2 60),
|
|
33
|
+
oklch(85% 0.2 120),
|
|
34
|
+
oklch(85% 0.2 180),
|
|
35
|
+
oklch(85% 0.2 240),
|
|
36
|
+
oklch(85% 0.2 300),
|
|
37
|
+
oklch(85% 0.2 360)
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
&::-webkit-slider-thumb {
|
|
41
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
|
|
42
|
+
hover: bg-neutral-800 transition-colors duration-200;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark &::-webkit-slider-thumb {
|
|
46
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
|
|
47
|
+
hover: bg-neutral-300 transition-colors duration-200;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&::-moz-range-thumb {
|
|
51
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
|
|
52
|
+
hover: bg-neutral-800 transition-colors duration-200;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dark &::-moz-range-thumb {
|
|
56
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
|
|
57
|
+
hover: bg-neutral-300 transition-colors duration-200;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
@@ -10,7 +10,7 @@ const modelValue = defineModel({ type: String, ...{ default: "" } });
|
|
|
10
10
|
transition="all duration-200 ease-in-out"
|
|
11
11
|
text="disabled:neutral-400 dark:disabled:neutral-600"
|
|
12
12
|
cursor="disabled:not-allowed"
|
|
13
|
-
w-full rounded-lg px-
|
|
13
|
+
w-full rounded-lg px-2 py-1 text-sm outline-none
|
|
14
14
|
shadow="sm"
|
|
15
15
|
bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
|
|
16
16
|
/>
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proj-airi/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.6.0",
|
|
5
5
|
"description": "A collection of UI components that used by Project AIRI",
|
|
6
6
|
"author": {
|
|
7
|
-
"name": "
|
|
8
|
-
"email": "
|
|
9
|
-
"url": "https://github.com/
|
|
7
|
+
"name": "Moeru AI Project AIRI Team",
|
|
8
|
+
"email": "airi@moeru.ai",
|
|
9
|
+
"url": "https://github.com/moeru-ai"
|
|
10
10
|
},
|
|
11
11
|
"license": "MIT",
|
|
12
12
|
"repository": {
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
}
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@vueuse/core": "^13.
|
|
32
|
+
"@vueuse/core": "^13.3.0",
|
|
33
33
|
"floating-vue": "^5.2.2",
|
|
34
|
-
"reka-ui": "^2.
|
|
35
|
-
"vue": "^3.5.
|
|
34
|
+
"reka-ui": "^2.3.0",
|
|
35
|
+
"vue": "^3.5.16"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@vue-macros/volar": "3.0.0-beta.8",
|
|
39
|
-
"vue-tsc": "^3.0.0-alpha.
|
|
39
|
+
"vue-tsc": "^3.0.0-alpha.8"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"dev": "pnpm run stub",
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const props = defineProps<{
|
|
3
|
+
disabled?: boolean
|
|
4
|
+
class?: string
|
|
5
|
+
}>()
|
|
6
|
+
|
|
7
|
+
const colorValue = defineModel<string>('colorValue', {
|
|
8
|
+
type: String,
|
|
9
|
+
default: '',
|
|
10
|
+
})
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<input
|
|
15
|
+
v-model="colorValue"
|
|
16
|
+
type="range" min="0" max="360" step="0.01"
|
|
17
|
+
class="color-hue-range"
|
|
18
|
+
transition="all ease-in-out duration-250"
|
|
19
|
+
:disabled="props.disabled"
|
|
20
|
+
:class="[
|
|
21
|
+
props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
|
|
22
|
+
props.class || '',
|
|
23
|
+
]"
|
|
24
|
+
>
|
|
25
|
+
</template>
|
|
26
|
+
|
|
27
|
+
<style scoped>
|
|
28
|
+
.color-hue-range {
|
|
29
|
+
--at-apply: appearance-none h-10 rounded-lg;
|
|
30
|
+
background: linear-gradient(
|
|
31
|
+
to right,
|
|
32
|
+
oklch(85% 0.2 0),
|
|
33
|
+
oklch(85% 0.2 60),
|
|
34
|
+
oklch(85% 0.2 120),
|
|
35
|
+
oklch(85% 0.2 180),
|
|
36
|
+
oklch(85% 0.2 240),
|
|
37
|
+
oklch(85% 0.2 300),
|
|
38
|
+
oklch(85% 0.2 360)
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
&::-webkit-slider-thumb {
|
|
42
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
|
|
43
|
+
hover: bg-neutral-800 transition-colors duration-200;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dark &::-webkit-slider-thumb {
|
|
47
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
|
|
48
|
+
hover: bg-neutral-300 transition-colors duration-200;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&::-moz-range-thumb {
|
|
52
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-600 cursor-pointer shadow-lg border-2 border-neutral-500
|
|
53
|
+
hover: bg-neutral-800 transition-colors duration-200;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.dark &::-moz-range-thumb {
|
|
57
|
+
--at-apply: w-1 h-12 appearance-none rounded-md bg-neutral-100 cursor-pointer shadow-md border-2 border-white
|
|
58
|
+
hover: bg-neutral-300 transition-colors duration-200;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
</style>
|
|
@@ -11,7 +11,7 @@ const modelValue = defineModel<string>({ default: '' })
|
|
|
11
11
|
transition="all duration-200 ease-in-out"
|
|
12
12
|
text="disabled:neutral-400 dark:disabled:neutral-600"
|
|
13
13
|
cursor="disabled:not-allowed"
|
|
14
|
-
w-full rounded-lg px-
|
|
14
|
+
w-full rounded-lg px-2 py-1 text-sm outline-none
|
|
15
15
|
shadow="sm"
|
|
16
16
|
bg="neutral-50 dark:neutral-950 focus:neutral-50 dark:focus:neutral-900"
|
|
17
17
|
/>
|