unika-components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 uniecard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# Unika 业务组件库
+
+### 提供一个业务组件库在编辑器和 H5 页面中都可以使用
+该组件包导出两种格式的模块，供不同情况下使用
+
+```javascript
+  // umd 格式
+  "main": "dist/unika-components.umd.js",
+  // es modules 格式
+  "module": "dist/unika-components.esm.js",
+```
+
+## 安装和使用
+
+```bash
+// 安装
+npm install unika-components --save
+```
+
+```javascript
+import Unika from 'unika-components'
+// 加载样式
+import 'unika-components/dist/unika-components.css'
+
+const app = createApp(App)
+// 全局引入 目前包括 FinalPage, LText, LImage , Lshape三个组件
+app.use(Unika)
+
+app.mount('#app')
+```
+
+### 渲染最终页面
+```javascript
+setup() {
+  // 使用 finalPage 组件进行渲染，使用我们预定义好的数据结构
+  const testData = {
+    // 页面上面一个个组件的属性
+    components: [
+      {id: '123', name: 'uni-text', props: { text: 'hello', top: '0', left: '20px'}},
+      {id: '234', name: 'uni-image', props: { imageSrc: 'http://vue-maker.oss-cn-hangzhou.aliyuncs.com/vue-marker/5f6338e666336111f73d220c.png', top: '30px', left: '20px'}},
+      {id: '235', name: 'uni-shape', props: { backgroundColor: 'red', top: '50px', left: '20px', width: '100px', height: '100px'}},
+      // 这是一个链接
+      {id: '345', name: 'uni-text', props: { backgroundColor: "#1890ff", color: "#ffffff", text: "按钮内容",  width: "100px", actionType: "to", url: "http://www.baidu.com", top: '200px', left: '150px',
+      }}
+    ]
+  }
+  return {
+    testData
+  }
+}
+```
+
+```html
+<final-page :components="testData.components"></final-page>
+```
+
+## 最终页面效果
+
+![最终页面效果](./result.png)
+
+

package/dist/src/components/LongPage/LongPage.vue.d.ts

@@ -0,0 +1,20 @@
+import { PropType } from 'vue';
+import { ComponentData, WorkData } from '../../defaultProps';
+declare const _default: import("vue").DefineComponent<{
+    work: {
+        type: PropType<WorkData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    work: {
+        type: PropType<WorkData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/src/components/LongPage/index.d.ts

@@ -0,0 +1,2 @@
+import LongPage from './LongPage.vue';
+export default LongPage;

package/dist/src/components/SwiperPage/SwiperPage.vue.d.ts

@@ -0,0 +1,20 @@
+import { PropType } from 'vue';
+import { ComponentData, PageData } from '../../defaultProps';
+declare const _default: import("vue").DefineComponent<{
+    page: {
+        type: PropType<PageData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    page: {
+        type: PropType<PageData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/src/components/SwiperPage/index.d.ts

@@ -0,0 +1,2 @@
+import SwiperPage from './SwiperPage.vue';
+export default SwiperPage;

package/dist/src/components/UniImage/UniImage.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniImage/index.d.ts

@@ -0,0 +1,2 @@
+import UniImage from './UniImage.vue';
+export default UniImage;

package/dist/src/components/UniShape/UniShape.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniShape/index.d.ts

@@ -0,0 +1,2 @@
+import UniShape from './UniShape.vue';
+export default UniShape;

package/dist/src/components/UniText/UniText.vue.d.ts

@@ -0,0 +1,11 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniText/index.d.ts

@@ -0,0 +1,2 @@
+import UniText from './UniText.vue';
+export default UniText;

package/dist/src/defaultProps.d.ts

@@ -0,0 +1,252 @@
+export interface ComponentData {
+    props: {
+        [key: string]: any;
+    };
+    id: string;
+    name: string;
+    layerName?: string;
+    isHidden?: boolean;
+    isLocked?: boolean;
+}
+export interface PageData {
+    id: string;
+    components: ComponentData[];
+    title?: string;
+    props?: {
+        [key: string]: any;
+    };
+}
+export interface WorkData {
+    props?: {
+        [key: string]: any;
+    };
+    id?: number;
+    pages: PageData[];
+    setting?: {
+        [key: string]: any;
+    };
+    type?: string;
+    width?: string;
+    height?: string;
+    pageMode?: string;
+    isPublish?: boolean;
+    title?: string;
+    desc?: string;
+    coverImg?: string;
+    uuid?: string;
+    latestPublishAt?: string;
+    updatedAt?: string;
+    isTemplate?: boolean;
+    isHot?: boolean;
+    isNew?: boolean;
+    author?: string;
+    copiedCount?: number;
+    status?: string;
+    shareImg?: string;
+    music?: {
+        id: string;
+        name: string;
+        url: string;
+        status: boolean;
+        duration: number;
+        isPlaying: false;
+        props: {
+            [key: string]: any;
+        };
+    };
+    user?: {
+        gender: string;
+        nickName: string;
+        picture: string;
+        userName: string;
+    };
+    datasources?: Array<{
+        [key: string]: any;
+    }>;
+}
+export declare const commonDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+};
+export declare const textDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    text: string;
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    fontStyle: string;
+    textDecoration: string;
+    lineHeight: string;
+    textAlign: string;
+    color: string;
+    backgroundColor: string;
+};
+export declare const imageDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    imageSrc: string;
+};
+export declare const shapeDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    backgroundColor: string;
+};
+export declare const componentsDefaultProps: {
+    'uni-text': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            text: string;
+            fontSize: string;
+            fontFamily: string;
+            fontWeight: string;
+            fontStyle: string;
+            textDecoration: string;
+            lineHeight: string;
+            textAlign: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    'uni-image': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            imageSrc: string;
+        };
+    };
+    'uni-shape': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            backgroundColor: string;
+        };
+    };
+};
+export declare const isEditingProp: {
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const transformToComponentProps: (props: {
+    [key: string]: any;
+}, extraProps?: {
+    [key: string]: any;
+} | undefined) => {
+    [x: string]: any;
+};
+export default componentsDefaultProps;

package/dist/src/hooks/useComponentClick.d.ts

@@ -0,0 +1,2 @@
+declare const useComponentClick: (props: any) => () => void;
+export default useComponentClick;

package/dist/src/hooks/useStylePick.d.ts

@@ -0,0 +1,3 @@
+export declare const defaultStyles: string[];
+declare const useStylePick: (props: any, pickStyles?: string[]) => import("vue").ComputedRef<Pick<any, string>>;
+export default useStylePick;

package/dist/src/index.d.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import UniText from './components/UniText';
+import UniImage from './components/UniImage';
+import UniShape from './components/UniShape';
+import LongPage from './components/LongPage';
+import SwiperPage from './components/SwiperPage';
+declare const install: (app: App) => void;
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, install };
+declare const _default: {
+    install: (app: App<any>) => void;
+};
+export default _default;

package/dist/tests/unit/UniImage.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/tests/unit/UniText.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/unika-components.css

@@ -0,0 +1,16 @@
+
+.uni-image-component {
+  max-width: 100%;
+}
+
+h2.uni-text-component, p.uni-text-component {
+  margin-bottom: 0;
+}
+button.uni-text-component {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.uni-text-component {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+}