@yueglobal/vue-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 
+
+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,154 @@
+# @yueglobal/vue-ui
+
+粤链全球 - Vue 组件库
+
+如需`React`版本，请前往 [@yueglobal/ui](https://www.npmjs.com/package/@yueglobal/ui)
+
+## 安装使用
+
+```shell
+yarn add @yueglobal/vue-ui
+```
+
+```ts
+import {
+  // 页面头部组件
+  YuePageHeader,
+  // 页面底部组件
+  YuePageFooter,
+} from '@yueglobal/vue-ui';
+
+// 引入样式文件
+import '@yueglobal/vue-ui/style.css';
+```
+
+## YuePageHeader
+
+页面头部组件，包含一级和二级导航菜单、面包屑、以及登录/用户信息等功能。
+
+### 属性
+
+| 属性              | 说明                                | 类型                                        | 默认值 |
+| ----------------- | ----------------------------------- | ------------------------------------------- | ------ |
+| `width`           | 内容宽度                            | `string` \| `number`                        | `80%`  |
+| `backgroundColor` | 头部背景色                          | `string`                                    | `#fff` |
+| `rightContent`    | 顶部右侧的登录/用户信息按钮         | `Component`                                 |        |
+| `menuItems`       | 各业务系统的菜单                    | `YueMenuItem`[]                             |        |
+| `pageTitle`       | 缺值时从一级菜单取值                | `string`                                    |        |
+| `pageIcon`        | 页面图标                            | `string` \| `Component`                     |        |
+| `breadcrumbs`     | 自定义面包屑数据                    | `YueBreadcrumb`[]                           |        |
+| `routes`          | 路由数据,用于自动生成面包屑         | any                                         |        |
+| `pathname`        | 当前的路由                          | `string`                                    |        |
+| `onRouteChange`   | 点击菜单/面包屑时触发的路由切换事件 | `({ key: string; label?: string }) => void` |        |
+| `onLocaleChange`  | 切换语言时的回调事件                | `({locale: string}) => void`                |        |
+
+- 业务子系统：`pageTitle`或`pageIcon`缺省时会根据`url`自动从一级菜单匹配值
+
+- 面包屑：若`breadcrumbs`缺省，则会根据`routes`、`pathname`自动生成面包屑的数据
+
+- `routes`是`vue`的路由列表，需按如下方式取值：
+
+```ts
+import { useRouter } from 'vue-router';
+// .......
+const routes = useRouter().getRoutes();
+```
+
+### YueMenuItem
+
+| 属性       | 说明       | 类型            | 备注                           |
+| ---------- | ---------- | --------------- | ------------------------------ |
+| `key`      | 唯一标识   | `string`        | `必填`，可传路由地址如 `/home` |
+| `label`    | 菜单项文案 | `string`        | `必填`                         |
+| `children` | 子菜单项   | `YueMenuItem`[] |                                |
+
+### YueBreadcrumb
+
+| 属性    | 说明                   | 类型     | 备注                   |
+| ------- | ---------------------- | -------- | ---------------------- |
+| `key`   | 唯一标识，用于路由跳转 | `string` | 可传路由地址如 `/home` |
+| `label` | 面包屑项文案           | `string` |                        |
+
+### 使用示例
+
+```vue | pure
+<script>
+import { ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { YuePageHeader } from '@yueglobal/vue-ui';
+import RightContent from './right-content.vue';
+
+const route = useRoute();
+const routes = useRouter().getRoutes();
+
+const pathname = ref(route.path);
+const menuItems = ref([
+  { key: '/home', label: '首页' },
+  {
+    key: '/exhibition',
+    label: '展会',
+    children: [
+      { key: '/exhibition/international', label: '国际展会' },
+      { key: '/exhibition/domestic', label: '国内展会' },
+    ],
+  },
+  { key: '/business', label: '商务' },
+]);
+// 顶部右侧的 登录/用户信息 组件
+const rightContent = ref(RightContent);
+
+// 监听路由变化
+watch(
+  () => route.path,
+  (newPath) => {
+    pathname.value = newPath;
+  },
+);
+
+function onRouteChange({ key, label }) {
+  // 在这里处理路由跳转逻辑, 比如
+  if (key.startsWith('/')) {
+    history.push(key);
+  }
+}
+
+function onLocaleChange({ locale }) {
+  console.log('切换语言为：', locale);
+}
+</script>
+
+<template>
+  <yue-page-header
+    width="1440px"
+    pageTitle="出海培训"
+    :menuItems="menuItems"
+    :pathname="pathname"
+    :routes="routes"
+    :breadcrumbs="breadcrumbs"
+    :right-content="rightContent"
+    @route-change="onRouteChange"
+    @locale-change="onLocaleChange"
+  />
+</template>
+```
+
+## YuePageFooter
+
+页面底部组件，显示版权信息、联系方式和相关链接。
+
+### 属性
+
+| 属性    | 说明     | 类型                 | 默认值 |
+| ------- | -------- | -------------------- | ------ |
+| `width` | 内容宽度 | `string` \| `number` | `80%`  |
+
+### 使用示例
+
+```vue | pure
+<script>
+import { YuePageFooter } from '@yueglobal/vue-ui';
+</script>
+<template>
+  <yue-page-footer width="1440px" />
+</template>
+```

package/components/ASvgIcon.vue.d.ts

@@ -0,0 +1,34 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    style: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {
+    handleClick(e: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    style: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    style: Record<string, any>;
+    className: string;
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/DeclarationIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/ExpoIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/HomeIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/HwcIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/InsuranceIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/LawIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/LocationIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/SelectionIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/SingleWindowIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/TaxationIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/TradeDataIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/TrainingIcon.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: ASvgIcon.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, ASvgIcon.PublicProps>;
+export default _default;
+import ASvgIcon from './ASvgIcon.vue';

package/components/icon-image/index.vue.d.ts

@@ -0,0 +1,10 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: (ObjectConstructor | StringConstructor)[];
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/index.d.ts

@@ -0,0 +1,2 @@
+export { default as YuePageFooter } from './yue-page-footer/index.vue';
+export { default as YuePageHeader } from './yue-page-header/index.vue';