@swj_ld/ld-component-library 1.0.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 +81 -0
- package/dist/ld-component-library.es.js +50 -0
- package/dist/ld-component-library.umd.js +1 -0
- package/dist/style.css +1 -0
- package/dist/types/components/LdEmpty/LdEmpty.vue.d.ts +41 -0
- package/dist/types/components/LdEmpty/index.d.ts +5 -0
- package/dist/types/index.d.ts +57 -0
- package/package.json +32 -0
- package/src/components/LdEmpty/LdEmpty.vue +46 -0
- package/src/components/LdEmpty/index.ts +6 -0
- package/src/index.ts +9 -0
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# LD Component Library
|
|
2
|
+
|
|
3
|
+
A Vue 3 component library for uni-app projects.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @swj_ld/ld-component-library
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Importing Components
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<template>
|
|
17
|
+
<LdEmpty description="暂无数据" top="50%" />
|
|
18
|
+
</template>
|
|
19
|
+
|
|
20
|
+
<script setup>
|
|
21
|
+
import { LdEmpty } from '@swj_ld/ld-component-library'
|
|
22
|
+
</script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Importing All Components
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<template>
|
|
29
|
+
<LdEmpty description="暂无数据" />
|
|
30
|
+
</template>
|
|
31
|
+
|
|
32
|
+
<script setup>
|
|
33
|
+
import LDComponents from '@swj_ld/ld-component-library'
|
|
34
|
+
|
|
35
|
+
// Register globally
|
|
36
|
+
// app.use(LDComponents)
|
|
37
|
+
</script>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
### LdEmpty
|
|
43
|
+
|
|
44
|
+
A component for displaying empty state.
|
|
45
|
+
|
|
46
|
+
#### Props
|
|
47
|
+
|
|
48
|
+
| Prop | Type | Default | Description |
|
|
49
|
+
|------|------|---------|-------------|
|
|
50
|
+
| description | string | '暂无内容' | The description text |
|
|
51
|
+
| top | string | '46%' | The top position |
|
|
52
|
+
|
|
53
|
+
#### Example
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<LdEmpty description="暂无数据" top="50%" />
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Development
|
|
60
|
+
|
|
61
|
+
### Install Dependencies
|
|
62
|
+
|
|
63
|
+
```bash
|
|
64
|
+
npm install
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Build the Library
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
npm run build
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Development Server
|
|
74
|
+
|
|
75
|
+
```bash
|
|
76
|
+
npm run dev
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
|
|
81
|
+
MIT
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { defineComponent as p, resolveComponent as a, createElementBlock as i, openBlock as c, normalizeStyle as m, createVNode as d, withCtx as s, renderSlot as l, createElementVNode as y } from "vue";
|
|
2
|
+
const f = /* @__PURE__ */ p({
|
|
3
|
+
__name: "LdEmpty",
|
|
4
|
+
props: {
|
|
5
|
+
description: { default: "暂无内容" },
|
|
6
|
+
top: { default: "46%" }
|
|
7
|
+
},
|
|
8
|
+
setup(t) {
|
|
9
|
+
return (o, e) => {
|
|
10
|
+
const r = a("sar-empty");
|
|
11
|
+
return c(), i("view", {
|
|
12
|
+
class: "empty-wrap",
|
|
13
|
+
style: m({ top: t.top })
|
|
14
|
+
}, [
|
|
15
|
+
d(r, {
|
|
16
|
+
description: t.description,
|
|
17
|
+
"root-style": {
|
|
18
|
+
"--sar-empty-description-margin-top": 0,
|
|
19
|
+
"--sar-empty-description-font-size": "28rpx",
|
|
20
|
+
"--sar-empty-description-font-weight": "300",
|
|
21
|
+
"--sar-empty-description-color": "#151515",
|
|
22
|
+
"--sar-empty-extra-margin-top": 0
|
|
23
|
+
}
|
|
24
|
+
}, {
|
|
25
|
+
icon: s(() => [...e[0] || (e[0] = [
|
|
26
|
+
y("image", {
|
|
27
|
+
src: "/assets/images/nodata.png",
|
|
28
|
+
class: "image-box"
|
|
29
|
+
}, null, -1)
|
|
30
|
+
])]),
|
|
31
|
+
default: s(() => [
|
|
32
|
+
l(o.$slots, "default", {}, void 0, !0)
|
|
33
|
+
]),
|
|
34
|
+
_: 3
|
|
35
|
+
}, 8, ["description"])
|
|
36
|
+
], 4);
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
}), u = (t, o) => {
|
|
40
|
+
const e = t.__vccOpts || t;
|
|
41
|
+
for (const [r, n] of o)
|
|
42
|
+
e[r] = n;
|
|
43
|
+
return e;
|
|
44
|
+
}, _ = /* @__PURE__ */ u(f, [["__scopeId", "data-v-ac2729c0"]]), x = {
|
|
45
|
+
LdEmpty: _
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
_ as LdEmpty,
|
|
49
|
+
x as default
|
|
50
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.LdComponentLibrary={},t.Vue))})(this,function(t,e){"use strict";const r=((o,s)=>{const n=o.__vccOpts||o;for(const[i,d]of s)n[i]=d;return n})(e.defineComponent({__name:"LdEmpty",props:{description:{default:"暂无内容"},top:{default:"46%"}},setup(o){return(s,n)=>{const i=e.resolveComponent("sar-empty");return e.openBlock(),e.createElementBlock("view",{class:"empty-wrap",style:e.normalizeStyle({top:o.top})},[e.createVNode(i,{description:o.description,"root-style":{"--sar-empty-description-margin-top":0,"--sar-empty-description-font-size":"28rpx","--sar-empty-description-font-weight":"300","--sar-empty-description-color":"#151515","--sar-empty-extra-margin-top":0}},{icon:e.withCtx(()=>[...n[0]||(n[0]=[e.createElementVNode("image",{src:"/assets/images/nodata.png",class:"image-box"},null,-1)])]),default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},void 0,!0)]),_:3},8,["description"])],4)}}}),[["__scopeId","data-v-ac2729c0"]]),p={LdEmpty:r};t.LdEmpty=r,t.default=p,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/dist/style.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.empty-wrap[data-v-ac2729c0]{position:absolute;left:50%;transform:translate(-50%,-50%)}.empty-wrap .image-box[data-v-ac2729c0]{margin-bottom:28rpx;width:200rpx;height:200rpx}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
interface Props {
|
|
2
|
+
description?: string;
|
|
3
|
+
top?: string;
|
|
4
|
+
}
|
|
5
|
+
declare function __VLS_template(): {
|
|
6
|
+
default?(_: {}): any;
|
|
7
|
+
};
|
|
8
|
+
declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
9
|
+
description: string;
|
|
10
|
+
top: string;
|
|
11
|
+
}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
|
|
12
|
+
description: string;
|
|
13
|
+
top: string;
|
|
14
|
+
}>>> & Readonly<{}>, {
|
|
15
|
+
description: string;
|
|
16
|
+
top: string;
|
|
17
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
18
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
|
|
19
|
+
export default _default;
|
|
20
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
21
|
+
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
22
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
23
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
24
|
+
} : {
|
|
25
|
+
type: import('vue').PropType<T[K]>;
|
|
26
|
+
required: true;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
type __VLS_WithDefaults<P, D> = {
|
|
30
|
+
[K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
|
|
31
|
+
default: D[K];
|
|
32
|
+
}> : P[K];
|
|
33
|
+
};
|
|
34
|
+
type __VLS_Prettify<T> = {
|
|
35
|
+
[K in keyof T]: T[K];
|
|
36
|
+
} & {};
|
|
37
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
38
|
+
new (): {
|
|
39
|
+
$slots: S;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export { default as LdEmpty, type LdEmptyProps } from './components/LdEmpty';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
LdEmpty: {
|
|
4
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
|
|
5
|
+
description: {
|
|
6
|
+
type: import('vue').PropType<string>;
|
|
7
|
+
default: string;
|
|
8
|
+
};
|
|
9
|
+
top: {
|
|
10
|
+
type: import('vue').PropType<string>;
|
|
11
|
+
default: string;
|
|
12
|
+
};
|
|
13
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
14
|
+
description: string;
|
|
15
|
+
top: string;
|
|
16
|
+
}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
17
|
+
P: {};
|
|
18
|
+
B: {};
|
|
19
|
+
D: {};
|
|
20
|
+
C: {};
|
|
21
|
+
M: {};
|
|
22
|
+
Defaults: {};
|
|
23
|
+
}, Readonly<import('vue').ExtractPropTypes<{
|
|
24
|
+
description: {
|
|
25
|
+
type: import('vue').PropType<string>;
|
|
26
|
+
default: string;
|
|
27
|
+
};
|
|
28
|
+
top: {
|
|
29
|
+
type: import('vue').PropType<string>;
|
|
30
|
+
default: string;
|
|
31
|
+
};
|
|
32
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, {
|
|
33
|
+
description: string;
|
|
34
|
+
top: string;
|
|
35
|
+
}>;
|
|
36
|
+
__isFragment?: never;
|
|
37
|
+
__isTeleport?: never;
|
|
38
|
+
__isSuspense?: never;
|
|
39
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
|
|
40
|
+
description: {
|
|
41
|
+
type: import('vue').PropType<string>;
|
|
42
|
+
default: string;
|
|
43
|
+
};
|
|
44
|
+
top: {
|
|
45
|
+
type: import('vue').PropType<string>;
|
|
46
|
+
default: string;
|
|
47
|
+
};
|
|
48
|
+
}>> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
49
|
+
description: string;
|
|
50
|
+
top: string;
|
|
51
|
+
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
52
|
+
$slots: {
|
|
53
|
+
default?(_: {}): any;
|
|
54
|
+
};
|
|
55
|
+
});
|
|
56
|
+
};
|
|
57
|
+
export default _default;
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@swj_ld/ld-component-library",
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "1.0.0",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": {
|
|
7
|
+
"types": "./dist/types/index.d.ts",
|
|
8
|
+
"import": "./dist/ld-component-library.es.js",
|
|
9
|
+
"require": "./dist/ld-component-library.umd.js"
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
"main": "dist/ld-component-library.umd.js",
|
|
13
|
+
"module": "dist/ld-component-library.es.js",
|
|
14
|
+
"types": "dist/types/index.d.ts",
|
|
15
|
+
"files": ["dist", "src"],
|
|
16
|
+
"scripts": {
|
|
17
|
+
"build": "vite build",
|
|
18
|
+
"type-check": "vue-tsc --noEmit",
|
|
19
|
+
"dev": "vite"
|
|
20
|
+
},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"sard-uniapp": "^x.x.x",
|
|
23
|
+
"vue": "^3.3.4"
|
|
24
|
+
},
|
|
25
|
+
"devDependencies": {
|
|
26
|
+
"@vitejs/plugin-vue": "^5.0.0",
|
|
27
|
+
"typescript": "^5.2.2",
|
|
28
|
+
"vite": "^5.0.0",
|
|
29
|
+
"vite-plugin-dts": "^3.6.4",
|
|
30
|
+
"vue-tsc": "^1.8.27"
|
|
31
|
+
}
|
|
32
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts" setup>
|
|
2
|
+
interface Props {
|
|
3
|
+
description?: string
|
|
4
|
+
top?: string
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
withDefaults(defineProps<Props>(), {
|
|
8
|
+
description: '暂无内容',
|
|
9
|
+
top: '46%',
|
|
10
|
+
})
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<view class="empty-wrap" :style="{ top }">
|
|
15
|
+
<sar-empty
|
|
16
|
+
:description="description"
|
|
17
|
+
:root-style="{
|
|
18
|
+
'--sar-empty-description-margin-top': 0,
|
|
19
|
+
'--sar-empty-description-font-size': '28rpx',
|
|
20
|
+
'--sar-empty-description-font-weight': '300',
|
|
21
|
+
'--sar-empty-description-color': '#151515',
|
|
22
|
+
'--sar-empty-extra-margin-top': 0,
|
|
23
|
+
}"
|
|
24
|
+
>
|
|
25
|
+
<template #icon>
|
|
26
|
+
<image src="/assets/images/nodata.png" class="image-box" />
|
|
27
|
+
</template>
|
|
28
|
+
<template #default>
|
|
29
|
+
<slot />
|
|
30
|
+
</template>
|
|
31
|
+
</sar-empty>
|
|
32
|
+
</view>
|
|
33
|
+
</template>
|
|
34
|
+
|
|
35
|
+
<style lang="scss" scoped>
|
|
36
|
+
.empty-wrap {
|
|
37
|
+
position: absolute;
|
|
38
|
+
left: 50%;
|
|
39
|
+
transform: translate(-50%, -50%);
|
|
40
|
+
.image-box {
|
|
41
|
+
margin-bottom: 28rpx;
|
|
42
|
+
width: 200rpx;
|
|
43
|
+
height: 200rpx;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
</style>
|