@fangzhongya/fang-ui 0.0.3

package/LICENSE

@@ -0,0 +1,25 @@
+MIT License
+
+Copyright (c) 2022-2024 fangzhongya
+
+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,611 @@
+# fang-ui
+
+[TOC]
+
+# 组件库目录说明
+
+```
+vue-el-com
+  └ archive    // 组件在线展示开发测试库
+    └ node    // node运行文件
+        docs.ts   // 自动生成vitepress文档的运行文件
+      archive.config.ts    // vue-archive 配置文件
+      config.ts
+  └ bin    // bin 运行文件
+      fang.js   // 指令 fang 的运行文件
+  └ dist    // 打包生成文件
+  └ docs    // vitepress文档输出库
+    └ .vitepress    // vitepress配置文件
+    └ components    // components组件目录
+    └ examples    // 示例目录
+  └ node    // node 运行文件
+      cli.js    // fang.js 具体实现文件
+      package.ts    // 修改package文件配置
+      version.ts    // 修改package中的版本号，自动提升
+  └ node_modules    // pnpm 引入包文件
+  └ packages    // 子包库，开发在这里
+    └ components    // 组件库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+      └ template    // bin 运行模板文件
+        package.json    // 子项目package配置文件
+    └ directives    // 指令库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+      └ template    // bin 运行模板文件
+        package.json    // 子项目package配置文件
+    └ hooks    // 组件use方法库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+    └ icons    // 图标库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+    └ locale    // 国际化库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+    └ theme    // 样式库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+    └ types    // typescript的type声明库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+    └ utils    // 工具库
+      └ node    // node 运行文件
+          index.ts    // 自动生成index文件
+      └ packages    // 库内容文件夹
+        package.json    // 子项目package配置文件
+  .gitignore    //  git上传过滤文件
+  .npmrc    //  npm配置文件
+  catalogue-filter.json    //  自动生成，组件目录提升数据
+  config.json    //  配置json
+  index.ts    //  项目入口文件
+  LICENSE    //  npm生成证书文件
+  package.json    //  package项目配置文件
+  pnpm-lock.yaml    //  pnpm 文件引入配置文件
+  pnpm-workspace.yaml    //  pnpm workspace配置文件
+  README.md    //  项目说明md文件
+  tsconfig.json    //  typescript配置文件
+  tsconfig.node.json    //  typescript 的node配置文件
+  vite.config.ts    //  vite配置文件，打包配置
+
+```
+
+# 命令说明
+
+> dev:v // 更新 package 中的版本号
+
+> dev // 启动在线开发组件文档
+
+> dev:docs // 自动生成在线开发的组件文档的 md 文件到 docs 中
+
+> build:archive // 打包 在线开发组件文档
+
+> docs:dev // 启动 vitepress 文档
+
+> docs:build // 打包 vitepress 文档
+
+> build // 打包组件库
+
+> pub // 发布上传 npm
+
+> all // 一键操作 打包，更新版本，发布 npm
+
+> dev:index // 自动生成 index 文件
+
+## 初始化项目
+
+个入推荐使用 [ni](https://github.com/antfu/ni/ 'ni') 来安装
+依赖
+
+ni - 使用正确的包管理器 统一了包管理器命令。会自动识别你当前
+项目使用的是什么包管理器。支持的包管理器：npm · yarn · pnpm
+· bun
+
+1. 导入项目
+
+2. pnpm install 下载依赖 进入子目录中 packages/theme 也 pnpm
+   install 一下
+
+3. 如果要使用 docs 或者 archive 功能， 需要进入对应目录 pnpm
+   install 一下
+
+4. 看开发时文档 pnpm run dev
+
+5. 看输出时文档 pnpm run docs:dev
+
+6. 打包 pnpm run build
+
+7. 发布 npm pnpm run pub
+
+8. 一键操作 打包，更新版本，发布 npm pnpm run all
+
+官网链接
+
+---
+
+[ni](https://github.com/antfu/ni/ 'ni')
+
+[pnpm](https://pnpm.io/zh/ 'pnpm')
+
+[vite](http://www.vitejs.net/ 'vite')
+
+[vitepress](https://vitepress.vuejs.org/ 'vitepress')
+
+[element-plus](https://element-plus.org/zh-CN/ 'element-plus')
+
+# 组件开发
+
+组件开发在 packages/components/packages 中 进行
+
+推荐使用 fang a 通过模板生成
+
+## bin 命令说明
+
+> fang // 通过模板自动生成组件开发模板
+
+    先 npm link
+    可以在components目录和directives目录使用
+    模板类型 缺省值 type1
+
+    fang add 目录名称 模板类型
+
+```
+└ template    // bin 运行模板文件
+	└ 模板类型1
+		... // 具体的文件
+	└ 模板类型2
+		... // 具体的文件
+```
+
+#### 示例
+
+```
+└ template    // bin 运行模板文件
+	└ type1
+		└ src   // 组件内容体
+			data.ts   // 组件外部数据
+			index.vue   // 组件页面主体
+		index.ts    // 组件入口
+	└ type2
+		└ src   // 组件内容体
+			data.ts   // 组件外部数据
+			index.ts   // 组件页面主体
+		index.ts    // 组件入口
+```
+
+在/components/packages 目录中 运行 fang add date type2 将生
+成
+
+```
+components
+	└ packages
+		└ date
+			└ src   // 组件内容体
+				data.ts   // 组件外部数据
+				index.ts   // 组件页面主体
+			index.ts    // 组件入口
+```
+
+### 示例 date 目录结构
+
+```
+date   // 组件名称 必须是当前组件的目录
+└ src   // 组件内容体
+    data.ts   // 组件外部数据 props入参, emits事件, slot 插槽, expose 暴露
+    index.vue   // 组件页面主体
+  index.ts    // 组件入口
+```
+
+同一类型和功能的组件允许用目录包层，方便查找与维护
+
+但组件名称不允许重复
+
+```
+ form    // 表单组件库组
+ └ date   // date组件
+    └ src   // 组件内容体
+        data.ts
+        index.vue
+    index.ts    // 组件入口
+ └ select   // select组件名称
+    └ src   // 组件内容体
+        data.ts
+        index.vue
+    index.ts    // 组件入口
+```
+
+### index.ts 组件入口 说明
+
+当前文件一般不需要修改 通过命令会自动生成
+
+```ts
+/**
+ * @config cover=false
+ * cover 是否覆盖当前文件，默认是false， true 表示不覆盖
+ * 当前已经由@fangzhongya/create自动生成
+ * Thu Feb 23 2023 11:29:09 GMT+0800 (中国标准时间)
+ */
+import { withInstall } from '@fang-ui/utils';
+import SrcVue from './src/index.vue';
+export const FangDate = withInstall(SrcVue, 'FangDate');
+export default FangDate;
+```
+
+当前文件可以用 pnpm run dev:index 命令自动生成的
+
+withInstall 是组件注册方法
+
+FangDate 是暴露的组件名称
+
+### src/data.ts 组件外部数据 说明
+
+```ts
+import type { ExtractPropTypes } from 'vue';
+import { buildProps } from '@fang-ui/utils';
+//组件属性
+export const dataProps = buildProps({
+    /**
+     * @props { String, Number, Array<String> } many= ( )
+     * 多类型
+     */
+    many: {
+        type: [],
+    },
+});
+export type DataProps = ExtractPropTypes<typeof dataProps>;
+/**
+ * @emits change (val:[String, Array])
+ * 选择的时间
+ */
+//组件事件
+export const dataEmits = {
+    change: (evt: string | string[]) => {},
+};
+export type DataEmits = typeof dataEmits;
+/**
+ * @slot default 默认插槽
+ */
+//组件插槽
+export const dataSlot = {
+    default: 'default',
+};
+/**
+ * @expose setValue (val:<string>设置的数据 )
+ * 设置值
+ */
+//组件暴露方法和属性
+export const dataExpose = {};
+```
+
+src/data.ts 文件提供的入参属性，事件，插槽，暴露方法等，必须
+写注释，方便开发文档读取，来自动生成文档
+
+buildProps 构建入参类型
+
+dataProps 组件属性
+
+dataEmits 组件事件
+
+dataSlot 组件插槽
+
+dataExpose 组件暴露方法和属性
+
+#### 注释写法说明
+
+生成文档时只读取有 @title @props @slot @emits @expose 标签的
+注释，注释只能是
+
+```
+/**
+*/
+```
+
+不支持
+
+```
+/***
+*/
+```
+
+注释可以写文件任意位置，但建议还写到你对应的字段上方，方便阅
+读与维护
+
+读取以当前组件主体为入口开始读取如果在 archive 组件在线展示
+开发测试库 archive.config.ts 配置文件中配置了
+
+```js
+components: [
+    {
+        // 公共参数文件的目录
+        comprops: '/common/data/',
+        // 当前入口文件中同级的文件名称
+        curprops: 'data',
+    },
+];
+```
+
+将提供引入路径读取对应文件中的注释
+
+> 组件文件注释说明
+
+```js
+/**
+ * @title 标题
+ * @name 组件名称 组件中文名称
+ * @author 作者
+ * @description 组件介绍
+ * @date 组件更新时间
+ */
+```
+
+> 组件 props 组件属性
+
+```js
+/**
+ * 多标签
+ * @props 是props属性标识
+ * @name 属性名
+ * @type 类型
+ * @default 默认值
+ * @selectable 可选值
+ * @description 说明
+ */
+/**
+ * 单标签
+ * @props {类型} 属性名=默认值 (可选值) 说明
+ */
+```
+
+> 组件 slot 组件插槽
+
+```js
+/**
+ * 多标签
+ * @slot 是slot插槽标识
+ * @name 插槽名
+ * @selectable 子标签
+ * @description 说明
+ */
+/**
+ * 单标签
+ * @props 插槽名 (可选值) 说明
+ */
+```
+
+> 组件 emits 组件事件
+
+```js
+/**
+ * 多标签
+ * @emits 是emits事件标识
+ * @name 事件名
+ * @selectable 回调参数
+ * @description 说明
+ */
+/**
+ * 单标签
+ * @emits 事件名 (回调参数) 说明
+ */
+```
+
+> 组件 expose 组件方法
+
+```js
+/**
+ * 多标签
+ * @expose 是expose方法标识
+ * @name 方法名
+ * @type 返回值
+ * @selectable 参数
+ * @description 说明
+ */
+/**
+ * 单标签
+ * @expose {返回值} 方法名 (参数) 说明
+ */
+```
+
+### index.vue 组件页面主体 说明
+
+```vue
+<template>
+    <div :class="cs.z()">
+        <div>{{getLocale('cs')}}</div>
+        <slot :name="dataSlot.default"></slot>
+    </div>
+</template>
+<script lang="ts" setup>
+import {
+    dataProps,
+    dataEmits,
+    dataExpose,
+    dataSlot,
+} from './data';
+import { useCssName, useLocale } from '@fang-ui/hooks';
+// 获取国际化字段
+const { getLocale } = useLocale();
+// 样式设置方法
+const cs = useCssName('date');
+// 组件属性
+const props = defineProps(dataProps);
+// 组件事件
+const emit = defineEmits(dataEmits);
+// 组件暴露方法和属性
+defineExpose({
+    ...dataExpose,
+});
+</script
+```
+
+getLocale 国际化取值方法
+
+useCssName 样式名称生成器 'date' 当前组件目录名称
+
+## JS 工具库的编写
+
+## Vue 组件库的封装
+
+### 结构说明
+
+文件结构 ts 包含的内容 vue 文件包含的内容函数说明
+
+### Element-plus 封装
+
+# 文档编写与生成
+
+> dev // 启动在线开发组件文档
+
+> dev:docs // 自动生成在线开发的组件文档的 md 文件到 docs 中
+
+> build:archive // 打包 在线开发组件文档
+
+> docs:dev // 启动 vitepress 文档
+
+> docs:build // 打包 vitepress 文档
+
+# 构建与发布
+
+> build // 打包组件库
+
+> pub // 发布上传 npm
+
+> all // 一键操作 打包，更新版本，发布 npm
+
+# 项目引用
+
+## 全局引用
+
+```ts
+// 全局引入组件
+import FangUi from 'fang-ui';
+// 全局引入样式
+import 'fang-ui/dist/theme/index.css';
+
+const app = createApp(App);
+app.use(router);
+app.use(FangUi);
+app.mount('#app');
+```
+
+## 单独引用
+
+```ts
+// 单独引入组件
+import { FangDate } from 'fang-ui';
+// 全局引入样式 目前还不支持单独引入样式，后期开发
+import 'fang-ui/dist/theme/index.css';
+
+const app = createApp(App);
+app.use(router);
+app.use(FangDate);
+app.mount('#app');
+```
+
+## vue 中引用
+
+```vue
+<template>
+    <div>
+        <FangDate> </FangDate>
+    </div>
+</template>
+<script lang="ts" setup>
+import { FangDate } from 'fang-ui';
+</script>
+<style lang="scss"></style>
+```
+
+## vue 中最小化引用
+
+```vue
+<template>
+    <div>
+        <FangDate> </FangDate>
+    </div>
+</template>
+<script lang="ts" setup>
+import { FangDate } from 'fang-ui/dist/components/date';
+</script>
+<style lang="scss"></style>
+```
+
+##按需导入您需要使用额外的插件来导入要使用的组件。
+
+###自动导入 推荐首先你需要安装 unplugin-vue-components 插件
+
+npm install -D unplugin-vue-components
+
+然后把下列代码插入到你的 Vite 的配置文件中
+
+#### Vite
+
+```ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+// fang-ui 自动导入 需要引入的方法
+import { FangComponentResolver } from 'fang-ui/dist/expand/components';
+export default defineConfig({
+    plugins: [
+        vue(),
+        AutoImport({
+            imports: ['vue', 'vue-router', 'pinia'],
+            resolvers: [ElementPlusResolver()],
+        }),
+        Components({
+            dirs: [],
+            dts: true,
+            resolvers: [
+                ElementPlusResolver(),
+                //  自动导入 需要引入的方法, 添加方法
+                FangComponentResolver(),
+            ],
+        }),
+    ],
+});
+```
+
+```
+type Config = {
+	/**
+     * 别名
+     */
+    alias?: string;
+    /**
+     * 只支持别名
+     */
+    onlyAlias?: boolean;
+};
+FangComponentResolver(config:Config)
+```
+
+#### 示例
+
+```
+FangComponentResolver({
+alias:"com"
+})
+```
+
+ComFangDate 和 FangDate 都是会引入 FangDate 组件
+
+onlyAlias = true 就只能是 ComFangDate 才会引入 FangDate 组件
+
+## JS 工具库使用
+
+## Vue 组件使用

package/bin/fang.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+'use strict';
+
+import { add, update } from '../node/cli.js';
+import { styleLog } from '@fangzhongya/utils/log/styleLog';
+const curUrl = process.cwd();
+const argv = process.argv.slice(2);
+const type = argv[0];
+const catalogue = argv[1];
+if (catalogue) {
+    if (type == 'add') {
+        add(curUrl, catalogue, argv[2]);
+    } else if (type == 'u') {
+        if (argv[2]) {
+            update(curUrl, catalogue, argv[2]);
+        } else {
+            console.log(
+                styleLog('缺少更新后的目录名称', {
+                    text: 1,
+                }),
+            );
+        }
+    } else {
+        console.log(
+            styleLog('执行类型错误', {
+                text: 1,
+            }),
+            styleLog('add 新建', {
+                text: 2,
+            }),
+            ',',
+            styleLog('u 更新', {
+                text: 4,
+            }),
+        );
+    }
+} else {
+    console.log(
+        styleLog('没有找到要执行的目录名称', {
+            text: 1,
+        }),
+    );
+}

package/dist/_virtual/_plugin-vue_export-helper.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+exports.default = _export_sfc;

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,10 @@
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+export {
+  _export_sfc as default
+};

package/dist/components/alert/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+require("vue");
+const withInstall = require("../../utils/vue/withInstall.cjs");
+const index_vue_vue_type_script_setup_true_lang = require("./src/index.cjs");
+const Alert = withInstall.withInstall(index_vue_vue_type_script_setup_true_lang.default, "Alert");
+exports.Alert = Alert;
+exports.default = Alert;