npm - ranui - Versions diffs - 0.1.0-alpha - Mend

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.

Files changed (54) hide show

package/.vitepress/config.ts +26 -0
package/.vitepress/theme/index.ts +9 -0
package/assets/image/failImage.ts +4 -0
package/assets/svgs/check-circle.svg +4 -0
package/assets/svgs/close-circle.svg +4 -0
package/assets/svgs/eye-close.svg +4 -0
package/assets/svgs/eye.svg +4 -0
package/assets/svgs/info-circle.svg +5 -0
package/assets/svgs/lock.svg +4 -0
package/assets/svgs/unlock.svg +4 -0
package/assets/svgs/user.svg +3 -0
package/components/button/index.less +95 -0
package/components/button/index.ts +64 -0
package/components/form/index.less +0 -0
package/components/form/index.ts +36 -0
package/components/image/index.less +0 -0
package/components/image/index.ts +62 -0
package/components/input/index.less +114 -0
package/components/input/index.ts +367 -0
package/components/modal/index.less +0 -0
package/components/modal/index.ts +118 -0
package/components/tabPane/index.less +0 -0
package/components/tabPane/index.ts +71 -0
package/components/tabs/index.less +47 -0
package/components/tabs/index.ts +207 -0
package/dist/assets/image/failImage.d.ts +2 -0
package/dist/components/button/index.d.ts +2 -0
package/dist/components/image/index.d.ts +2 -0
package/dist/components/input/index.d.ts +2 -0
package/dist/components/modal/index.d.ts +2 -0
package/dist/components/tabPane/index.d.ts +2 -0
package/dist/components/tabs/index.d.ts +2 -0
package/dist/index.d.ts +0 -0
package/dist/index.js +677 -0
package/dist/index.js.map +1 -0
package/dist/index.umd.cjs +2 -0
package/dist/index.umd.cjs.map +1 -0
package/dist/style.css +1 -0
package/dist/typings.d.ts +4 -0
package/dist/utils/index.d.ts +7 -0
package/docs/button/index.md +25 -0
package/docs/image/index.md +9 -0
package/docs/input/index.md +146 -0
package/docs/tabs/index.md +121 -0
package/index.html +67 -0
package/index.md +1 -0
package/index.ts +6 -0
package/package.json +33 -0
package/plugins/auto-import-file.ts +59 -0
package/plugins/load-style.ts +31 -0
package/tsconfig.json +31 -0
package/typings.d.ts +4 -0
package/utils/index.ts +12 -0
package/vite.config.ts +58 -0

package/index.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="./index.ts" type="module"></script>
+  </head>
+  <body>
+    <!-- <h1>Hello RanUI</h1> -->
+    <div style="margin: 20px">
+      <!-- <div>按钮</div>
+         <r-button type="primary">主要按钮</r-button>
+        <r-button type="warning">警告按钮</r-button>
+        <r-button type="default">默认按钮</r-button>
+        <r-button type="primary" disabled="true">disable按钮</r-button>
+        <div style="margin:20px">输入框</div>
+      <r-input label="user" type="password"></r-input>
+      <div>图片</div> -->
+      <!-- <r-button type="text" disabled>默认按钮</r-button> -->
+      <span>加载失败</span>
+      <r-img fallback=""></r-img>
+      <div>表单</div>
+      <r-tabs>
+        <r-tab label="tab1" >11111</r-tab>
+        <r-tab label="tab2" type="line">22222</r-tab>
+        <r-tab label="tab3" >33333</r-tab>
+      </r-tabs>
+      <!-- <iframe name="hidden" style="display:none;"></iframe> -->
+      <form id="form">
+            <fieldset>
+                <legend>Choose your favorite monster</legend>
+                <input type="radio" id="kraken" name="monster" value="K">
+                <label for="kraken">Kraken</label><br>
+                <input type="radio" id="sasquatch" name="monster" value="S">
+                <label for="sasquatch">Sasquatch</label><br>
+                <input type="radio" id="mothman" name="monster" value="M" />
+                <label for="mothman">Mothman</label>
+                <button type="submit">提交按钮</button>
+            </fieldset>
+        </form>
+    </div>
+    <script>
+      const form = document.getElementById("form");
+      const onFinish = (e) => {
+        e.preventDefault();
+        const jsonData = {};
+        const formData = new FormData(form);
+        formData.forEach((value, key) => {
+          if (!jsonData[key]) {
+            jsonData[key] =
+              formData.getAll(key).length > 1
+                ? formData.getAll(key)
+                : formData.get(key);
+          }
+        });
+        console.log("e---->", jsonData);
+      };
+      form.addEventListener("submit", onFinish);
+    </script>
+  </body>
+</html>

package/index.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ # RanUI

package/index.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import './components/button/index.ts';
+import './components/image/index.ts';
+import './components/input/index.ts';
+import './components/modal/index.ts';
+import './components/tabPane/index.ts';
+import './components/tabs/index.ts';

package/package.json ADDED Viewed

@@ -0,0 +1,33 @@
+{
+  "name": "ranui",
+  "version": "0.1.0-alpha",
+  "description": "基于web components的组件库",
+  "main": "dist/index.umd.cjs",
+  "module": "dist/index.js",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "engines": {
+    "node": "^14.18.0 || >=16.0.0"
+  },
+  "homepage": "https://github.com/chaxus/ran/tree/main/packages/ranui/docs",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chaxus/ran",
+    "directory": "packages/ranui"
+  },
+  "scripts": {
+    "dev": "vitepress dev",
+    "start": "vite",
+    "build": "vite build",
+    "build:docs": "vitepress build",
+    "serve:docs": "vitepress serve"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "less": "^4.1.3",
+    "ranuts": "workspace:^0.1.0",
+    "vitepress": "0.22.4"
+  }
+}

package/plugins/auto-import-file.ts ADDED Viewed

@@ -0,0 +1,59 @@
+import { Plugin } from 'vite';
+import fs from "fs";
+import ranuts from 'ranuts';
+const { writeFile, readFile, queryFileInfo } = ranuts;
+interface Options {
+    ignore?: Array<string>,
+    path: Array<string>,
+    extensions: Array<string>
+}
+const createIndex = async (options: Options, entry: string) => {
+    let content = ''
+    const { path = [], extensions = [], ignore = [] } = options
+    /**
+     * @description: 递归查找目录
+     * @param {Array} path
+     */
+    const recurveFile = async (path: Array<string>) => {
+        for (const item of path) {
+            const { status, data } = await queryFileInfo(item)
+            const extension = item.substring(item.lastIndexOf('.'))
+            if (status && data.isFile() && extensions.includes(extension) && !ignore.includes(item)) {
+                content += `import '${item}';\n`
+            }
+            if (status && data.isDirectory() && !ignore.includes(item)) {
+                const fileList = fs.readdirSync(item)
+                const list = fileList.map(children => `${item}/${children}`)
+                await recurveFile(list)
+            }
+        }
+    }
+    try {
+        await recurveFile(path)
+        const currContent = await readFile(entry)
+        if (currContent.status && currContent.data !== content) return await writeFile(entry, content)
+        return { status: false }
+    } catch (error) {
+        throw error
+    }
+}
+// 当初始目录中没有index的时候，不会主动生成，需要至少增加一个空index.js
+export default function autoImportFilePlugin(options: Options): Plugin {
+    return {
+        name: 'vite-plugin-auto-import-file',
+        enforce: 'pre',
+        async config(context) {
+            const { entry = '' } = context.build?.lib || {};
+            // const { alias = {} } = context.resolve || {}
+            // const aliasList = Object.keys(alias)
+            if (entry) await createIndex(options, entry)
+        },
+        async handleHotUpdate(context) {
+            const { entry = '' } = context.server.config.build.lib || {}
+            if (entry) await createIndex(options, entry)
+        }
+    }
+}

package/plugins/load-style.ts ADDED Viewed

@@ -0,0 +1,31 @@
+import { Plugin } from 'vite';
+interface Options {
+    ignore?: Array<string>
+}
+export default function loadStylePlugin(options?: Options): Plugin {
+    return {
+        name: 'vite-plugin-load-style',
+        transform(code, id) {
+            const path = new RegExp('ranui\/components\/[a-zA-z0-9]+\/index\.ts')
+            const stylePath = new RegExp(/((this\.)?[a-zA-Z0-9]+)\s*=\s*this\.attachShadow\(\{.*\}\)/)
+            const front = `import f7170ee498e0dd32cbdcb63fba8f75cc from './index.less';`
+            const { ignore = [] } = options ?? {}
+            const [fragment, statement] = code.match(stylePath) ?? []
+            let result = code
+            if (path.test(id) && !ignore.some(item => new RegExp(item).test(id)) && fragment && statement) {
+                result = result.replace(
+                    stylePath,
+                    `${fragment};
+                    const F7170EE498E0DD32CBDCB63FBA8F75CC = document.createElement('style');
+                    F7170EE498E0DD32CBDCB63FBA8F75CC.textContent = f7170ee498e0dd32cbdcb63fba8f75cc;
+                    ${statement}.appendChild(F7170EE498E0DD32CBDCB63FBA8F75CC);`)
+                result = front + result;
+            }
+            return {
+                code: result,
+                map: null // TODO
+            };
+        }
+    }
+}

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "outDir": "dist",
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": false,
+    "strict": true,
+    "noImplicitAny": true,
+    "useUnknownInCatchVariables": false,
+    "inlineSourceMap": true,
+    "baseUrl": ".",
+    "experimentalDecorators":true,
+    "paths": {
+      "@/assets/*": ["assets/*"],
+      "@/components/*": ["components/*"],
+      "@/plugins/*": ["plugins/*"],
+      "@/utils/*": ["utils/*"],
+    },
+  },
+  "ts-node": {
+      "esm": true,
+      "experimentalSpecifierResolution":"node",
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

package/typings.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+declare module "*.less"
+declare module '@/assets'
+declare module '@/components'
+declare module '@/plugins'

package/utils/index.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export const falseList = [false, "false", null, undefined];
+/**
+  * @description: 判断这个元素上是否有disabled属性
+  * @param {Element} element
+  * @return {*}
+  */
+export const isDisabled = (element: Element) => {
+  const status = element.hasAttribute('disabled')
+  const value = element.getAttribute('disabled')
+  if (status && !falseList.includes(value)) return true
+  return false
+}

package/vite.config.ts ADDED Viewed

@@ -0,0 +1,58 @@
+import { defineConfig } from "vite";
+import path, { resolve } from "path";
+import { fileURLToPath } from "url";
+import dts from 'vite-plugin-dts'
+import loadStyle from './plugins/load-style'
+import autoImportFile from './plugins/auto-import-file'
+// const __filename = fileURLToPath(import.meta.url);
+// const __dirname = path.dirname(__filename);
+export default defineConfig({
+  build: {
+    minify: 'terser',
+    sourcemap: true,
+    lib: {
+      entry: resolve(__dirname, "index.ts"),
+      name: "ranui",
+      fileName: "index",
+      formats: ["es", "umd"],
+    },
+  },
+  plugins: [
+    dts({
+      tsConfigFilePath: './tsconfig.json'
+    }),
+    loadStyle({
+      ignore: ['ranui/components/modal/index.ts']
+    }),
+    autoImportFile({
+      path: [
+        './components',
+        // resolve(__dirname, "components/")
+      ],
+      extensions: [".ts"],
+      ignore: ['./components/form/index.ts']
+    })
+  ],
+  resolve: {
+    alias: {
+      '@/components': resolve(__dirname, "components/"),
+      '@/assets': resolve(__dirname, "assets/"),
+      '@/utils': resolve(__dirname, "utils/"),
+    },
+    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json"],
+  },
+  css: {
+    // preprocessorOptions: {
+      // less: {
+      //   javascriptEnabled: true,
+      //   additionalData: `@import "client/assets/base.css";`
+      // }
+    // },
+    modules: {
+      generateScopedName: "[name--[local]--[hash:base64:5]]",
+    },
+  },
+});

ranui 0.1.0-alpha