@unsource/ui 1.5.7 → 1.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/dist/module.json +1 -1
- package/dist/module.mjs +20 -9
- package/dist/runtime/components/UnList.d.vue.ts +15 -4
- package/dist/runtime/components/UnList.vue +28 -10
- package/dist/runtime/components/UnList.vue.d.ts +15 -4
- package/dist/runtime/components/UnTab.d.vue.ts +25 -0
- package/dist/runtime/components/UnTab.vue +56 -0
- package/dist/runtime/components/UnTab.vue.d.ts +25 -0
- package/package.json +2 -1
- package/dist/runtime/components/Un/Tab.d.vue.ts +0 -15
- package/dist/runtime/components/Un/Tab.vue +0 -47
- package/dist/runtime/components/Un/Tab.vue.d.ts +0 -15
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -22,21 +22,32 @@ const module = defineNuxtModule({
|
|
|
22
22
|
await installModule("@unocss/nuxt", {
|
|
23
23
|
configFile: "./runtime/uno.config.{mjs,js,ts}"
|
|
24
24
|
});
|
|
25
|
-
await installModule("@nuxt/icon"
|
|
26
|
-
await installModule("nuxt-swiper");
|
|
27
|
-
_nuxt.options.modules.push(
|
|
28
|
-
"@unocss/nuxt",
|
|
29
|
-
"@nuxt/icon",
|
|
30
|
-
"nuxt-swiper"
|
|
31
|
-
);
|
|
32
|
-
_nuxt.options.icon = {
|
|
25
|
+
await installModule("@nuxt/icon", {
|
|
33
26
|
customCollections: [
|
|
34
27
|
{
|
|
35
28
|
prefix: "my-icon",
|
|
36
29
|
dir: "./assets/icons"
|
|
37
30
|
}
|
|
38
31
|
]
|
|
39
|
-
};
|
|
32
|
+
});
|
|
33
|
+
await installModule("nuxt-swiper");
|
|
34
|
+
await installModule("nuxt-lodash", {
|
|
35
|
+
prefix: "_",
|
|
36
|
+
// prefixSkip: ["is"],
|
|
37
|
+
upperAfterPrefix: false,
|
|
38
|
+
exclude: [],
|
|
39
|
+
alias: [
|
|
40
|
+
// ["camelCase", "stringToCamelCase"], // => stringToCamelCase
|
|
41
|
+
// ["kebabCase", "stringToKebab"], // => stringToKebab
|
|
42
|
+
// ["isDate", "isLodashDate"], // => _isLodashDate
|
|
43
|
+
]
|
|
44
|
+
});
|
|
45
|
+
_nuxt.options.modules.push(
|
|
46
|
+
"@unocss/nuxt",
|
|
47
|
+
"@nuxt/icon",
|
|
48
|
+
"nuxt-swiper",
|
|
49
|
+
"nuxt-lodash"
|
|
50
|
+
);
|
|
40
51
|
}
|
|
41
52
|
});
|
|
42
53
|
|
|
@@ -2,15 +2,26 @@ import type { CardCustomClass, CardItem } from './UnCard.vue.js';
|
|
|
2
2
|
type __VLS_Props = {
|
|
3
3
|
title?: string;
|
|
4
4
|
items?: CardItem[];
|
|
5
|
-
customClass?: Record<'main' | 'title' | 'header' | 'items', unknown> & {
|
|
5
|
+
customClass?: Record<'main' | 'title' | 'header' | 'items' | 'collapsibleIcon', unknown> & {
|
|
6
6
|
item?: CardCustomClass;
|
|
7
7
|
};
|
|
8
|
+
collapsible?: boolean;
|
|
9
|
+
collapsibleIcon?: string;
|
|
10
|
+
noRotate?: boolean;
|
|
8
11
|
};
|
|
9
|
-
|
|
12
|
+
type __VLS_ModelProps = {
|
|
13
|
+
'show'?: boolean;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
16
|
+
declare var __VLS_6: {};
|
|
10
17
|
type __VLS_Slots = {} & {
|
|
11
|
-
default?: (props: typeof
|
|
18
|
+
default?: (props: typeof __VLS_6) => any;
|
|
12
19
|
};
|
|
13
|
-
declare const __VLS_base: import("vue").DefineComponent<
|
|
20
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
21
|
+
"update:show": (value: boolean | undefined) => any;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
23
|
+
"onUpdate:show"?: ((value: boolean | undefined) => any) | undefined;
|
|
24
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
25
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
26
|
declare const _default: typeof __VLS_export;
|
|
16
27
|
export default _default;
|
|
@@ -4,8 +4,12 @@
|
|
|
4
4
|
class="flex flex-col p-3 bg-white rounded-2xl gap-4"
|
|
5
5
|
>
|
|
6
6
|
<div
|
|
7
|
-
:class="
|
|
7
|
+
:class="[
|
|
8
|
+
customClass?.header,
|
|
9
|
+
{ 'cursor-pointer': collapsible }
|
|
10
|
+
]"
|
|
8
11
|
class="flex items-center justify-between"
|
|
12
|
+
@click="collapsible ? show = !show : ''"
|
|
9
13
|
>
|
|
10
14
|
<p
|
|
11
15
|
v-if="title"
|
|
@@ -14,22 +18,36 @@
|
|
|
14
18
|
>
|
|
15
19
|
{{ title }}
|
|
16
20
|
</p>
|
|
21
|
+
<UnNuxtIcon
|
|
22
|
+
v-if="collapsible"
|
|
23
|
+
:class="customClass?.collapsibleIcon"
|
|
24
|
+
:name="collapsibleIcon || 'solar:alt-arrow-down-bold-duotone'"
|
|
25
|
+
class="transition-all duration-300"
|
|
26
|
+
:style="{ rotate: show && !noRotate ? '180deg' : '0deg' }"
|
|
27
|
+
/>
|
|
17
28
|
<slot />
|
|
18
29
|
</div>
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
30
|
+
<template v-if="show">
|
|
31
|
+
<UnCard
|
|
32
|
+
v-for="(item, index) in items"
|
|
33
|
+
:key="index"
|
|
34
|
+
:class="customClass.items"
|
|
35
|
+
:custom-class="customClass.item"
|
|
36
|
+
:item="item"
|
|
37
|
+
/>
|
|
38
|
+
</template>
|
|
26
39
|
</div>
|
|
27
40
|
</template>
|
|
28
41
|
|
|
29
42
|
<script setup>
|
|
30
|
-
const { customClass = {} } = defineProps({
|
|
43
|
+
const { customClass = {}, collapsible = false } = defineProps({
|
|
31
44
|
title: { type: String, required: false },
|
|
32
45
|
items: { type: Array, required: false },
|
|
33
|
-
customClass: { type: Object, required: false }
|
|
46
|
+
customClass: { type: Object, required: false },
|
|
47
|
+
collapsible: { type: Boolean, required: false },
|
|
48
|
+
collapsibleIcon: { type: String, required: false },
|
|
49
|
+
noRotate: { type: Boolean, required: false }
|
|
34
50
|
});
|
|
51
|
+
const show = defineModel("show", { type: Boolean });
|
|
52
|
+
show.value ||= !collapsible;
|
|
35
53
|
</script>
|
|
@@ -2,15 +2,26 @@ import type { CardCustomClass, CardItem } from './UnCard.vue.js';
|
|
|
2
2
|
type __VLS_Props = {
|
|
3
3
|
title?: string;
|
|
4
4
|
items?: CardItem[];
|
|
5
|
-
customClass?: Record<'main' | 'title' | 'header' | 'items', unknown> & {
|
|
5
|
+
customClass?: Record<'main' | 'title' | 'header' | 'items' | 'collapsibleIcon', unknown> & {
|
|
6
6
|
item?: CardCustomClass;
|
|
7
7
|
};
|
|
8
|
+
collapsible?: boolean;
|
|
9
|
+
collapsibleIcon?: string;
|
|
10
|
+
noRotate?: boolean;
|
|
8
11
|
};
|
|
9
|
-
|
|
12
|
+
type __VLS_ModelProps = {
|
|
13
|
+
'show'?: boolean;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
16
|
+
declare var __VLS_6: {};
|
|
10
17
|
type __VLS_Slots = {} & {
|
|
11
|
-
default?: (props: typeof
|
|
18
|
+
default?: (props: typeof __VLS_6) => any;
|
|
12
19
|
};
|
|
13
|
-
declare const __VLS_base: import("vue").DefineComponent<
|
|
20
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
21
|
+
"update:show": (value: boolean | undefined) => any;
|
|
22
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
23
|
+
"onUpdate:show"?: ((value: boolean | undefined) => any) | undefined;
|
|
24
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
14
25
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
15
26
|
declare const _default: typeof __VLS_export;
|
|
16
27
|
export default _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export type TabItem = {
|
|
2
|
+
icon?: string;
|
|
3
|
+
value: string;
|
|
4
|
+
title?: string;
|
|
5
|
+
to?: Record<string, unknown>;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_Props = {
|
|
8
|
+
items: TabItem[];
|
|
9
|
+
mini?: boolean;
|
|
10
|
+
routable?: boolean;
|
|
11
|
+
routeTarget?: 'query' | 'hash' | 'name' | 'params';
|
|
12
|
+
label?: string;
|
|
13
|
+
customClass?: Partial<Record<'label' | 'selectedLabel' | 'normalLabel' | 'title' | 'icon', string>>;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_ModelProps = {
|
|
16
|
+
modelValue?: string | number;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
"update:modelValue": (value: string | number | undefined) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
|
|
23
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex items-stretch text-(base gray-600) font-semibold bg-transparent h-13">
|
|
3
|
+
<label
|
|
4
|
+
v-for="item in items"
|
|
5
|
+
:key="item.value"
|
|
6
|
+
:class="[customClass.label, item?.value === value ? customClass.selectedLabel : customClass.normalLabel, item?.value === value ? 'text-primary cursor-default border-b-(2 primary)' : 'border-b-(1 border)', mini ? 'px-3' : ' px-4']"
|
|
7
|
+
class="flex gap-2 justify-center items-center flex-grow basis-1 border-b-(solid) cursor-pointer p-3 text-sm"
|
|
8
|
+
@click="addToQuery(item)"
|
|
9
|
+
>
|
|
10
|
+
<input
|
|
11
|
+
v-model="value"
|
|
12
|
+
type="radio"
|
|
13
|
+
:value="item.value"
|
|
14
|
+
hidden
|
|
15
|
+
>
|
|
16
|
+
<UnNuxtIcon
|
|
17
|
+
:class="customClass.icon"
|
|
18
|
+
:name="item.icon"
|
|
19
|
+
/>
|
|
20
|
+
<span
|
|
21
|
+
:class="customClass.title"
|
|
22
|
+
class="whitespace-nowrap"
|
|
23
|
+
>
|
|
24
|
+
{{ item.title || item.value }}
|
|
25
|
+
</span>
|
|
26
|
+
</label>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<script setup>
|
|
31
|
+
import { _merge, useRoute, useRouter } from "#imports";
|
|
32
|
+
const { customClass = {}, label, routeTarget, routable } = defineProps({
|
|
33
|
+
items: { type: Array, required: true },
|
|
34
|
+
mini: { type: Boolean, required: false },
|
|
35
|
+
routable: { type: Boolean, required: false },
|
|
36
|
+
routeTarget: { type: String, required: false },
|
|
37
|
+
label: { type: String, required: false },
|
|
38
|
+
customClass: { type: Object, required: false }
|
|
39
|
+
});
|
|
40
|
+
const value = defineModel({ type: [String, Number] });
|
|
41
|
+
const route = useRoute();
|
|
42
|
+
const router = useRouter();
|
|
43
|
+
const addToQuery = (i) => {
|
|
44
|
+
value.value = i.value;
|
|
45
|
+
if (routable) {
|
|
46
|
+
if (i.to) {
|
|
47
|
+
router.replace(i.to);
|
|
48
|
+
} else if (routeTarget) {
|
|
49
|
+
const q = _merge(route, {
|
|
50
|
+
[routeTarget]: label ? { [label]: i.value } : `${routeTarget === "hash" ? "#" : ""}${i.value}`
|
|
51
|
+
});
|
|
52
|
+
router.replace(q);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
</script>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export type TabItem = {
|
|
2
|
+
icon?: string;
|
|
3
|
+
value: string;
|
|
4
|
+
title?: string;
|
|
5
|
+
to?: Record<string, unknown>;
|
|
6
|
+
};
|
|
7
|
+
type __VLS_Props = {
|
|
8
|
+
items: TabItem[];
|
|
9
|
+
mini?: boolean;
|
|
10
|
+
routable?: boolean;
|
|
11
|
+
routeTarget?: 'query' | 'hash' | 'name' | 'params';
|
|
12
|
+
label?: string;
|
|
13
|
+
customClass?: Partial<Record<'label' | 'selectedLabel' | 'normalLabel' | 'title' | 'icon', string>>;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_ModelProps = {
|
|
16
|
+
modelValue?: string | number;
|
|
17
|
+
};
|
|
18
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
19
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
20
|
+
"update:modelValue": (value: string | number | undefined) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
"onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
|
|
23
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
24
|
+
declare const _default: typeof __VLS_export;
|
|
25
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unsource/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "nuxt ui kit for unsource env",
|
|
6
6
|
"repository": "https://github.com/alisa2142/unsource-ui",
|
|
@@ -37,6 +37,7 @@
|
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@neshan-maps-platform/vue3-openlayers": "^2.0.1",
|
|
39
39
|
"@nuxt/kit": "^4.1.3",
|
|
40
|
+
"nuxt-lodash": "^2.5.3",
|
|
40
41
|
"nuxt-swiper": "^1.2.2",
|
|
41
42
|
"swiper": "^11.2.10",
|
|
42
43
|
"unocss-preset-scrollbar": "^3.2.0"
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
declare const _default: typeof __VLS_export;
|
|
2
|
-
export default _default;
|
|
3
|
-
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
-
$props: Partial<typeof props>;
|
|
5
|
-
mini: boolean;
|
|
6
|
-
items: unknown[];
|
|
7
|
-
routable: boolean;
|
|
8
|
-
label?: string | undefined;
|
|
9
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
-
declare const props: {
|
|
11
|
-
readonly mini: boolean;
|
|
12
|
-
readonly items: unknown[];
|
|
13
|
-
readonly routable: boolean;
|
|
14
|
-
readonly label?: string | undefined;
|
|
15
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="flex items-stretch text-(base gray-600) font-semibold bg-transparent p-1 h-13">
|
|
3
|
-
<label v-for="item in items"
|
|
4
|
-
:class="[[item?.value === ( value ) ? 'text-primary-500 cursor-default border-primary-500 border-2' : 'border-1 border-gray-400' ] , [mini ? 'px-3' : ' px-4']]"
|
|
5
|
-
class="flex justify-center items-center flex-grow basis-1 border-b-(solid) cursor-pointer p-3 text-sm"
|
|
6
|
-
@click="addToQuery(item.key , item.value)">
|
|
7
|
-
<input v-model="value" type="radio" :value="item.value" hidden>
|
|
8
|
-
<span class="whitespace-nowrap">
|
|
9
|
-
{{ item.label }}
|
|
10
|
-
</span>
|
|
11
|
-
</label>
|
|
12
|
-
</div>
|
|
13
|
-
</template>
|
|
14
|
-
|
|
15
|
-
<script setup>
|
|
16
|
-
const props = defineProps({
|
|
17
|
-
items: {
|
|
18
|
-
type: Array,
|
|
19
|
-
required: true
|
|
20
|
-
},
|
|
21
|
-
mini: {
|
|
22
|
-
type: Boolean,
|
|
23
|
-
default: false
|
|
24
|
-
},
|
|
25
|
-
routable: {
|
|
26
|
-
type: Boolean,
|
|
27
|
-
default: true
|
|
28
|
-
},
|
|
29
|
-
label: {
|
|
30
|
-
type: String
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
const value = defineModel();
|
|
34
|
-
const route = useRoute();
|
|
35
|
-
const router = useRouter();
|
|
36
|
-
const addToQuery = (key, v) => {
|
|
37
|
-
value.value = v;
|
|
38
|
-
if (props.routable) {
|
|
39
|
-
router.replace({
|
|
40
|
-
query: {
|
|
41
|
-
...route.query,
|
|
42
|
-
[props.label]: v
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
</script>
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
declare const _default: typeof __VLS_export;
|
|
2
|
-
export default _default;
|
|
3
|
-
declare const __VLS_export: import("vue").DefineComponent<{}, {
|
|
4
|
-
$props: Partial<typeof props>;
|
|
5
|
-
mini: boolean;
|
|
6
|
-
items: unknown[];
|
|
7
|
-
routable: boolean;
|
|
8
|
-
label?: string | undefined;
|
|
9
|
-
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
10
|
-
declare const props: {
|
|
11
|
-
readonly mini: boolean;
|
|
12
|
-
readonly items: unknown[];
|
|
13
|
-
readonly routable: boolean;
|
|
14
|
-
readonly label?: string | undefined;
|
|
15
|
-
};
|