@avilang/practical-ui 0.1.4 → 0.2.0

package/.husky/pre-commit

@@ -1,4 +1,4 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# .husky/pre-commit
 
+cd packages/components
 npx lint-staged

package/button/button.vue

@@ -0,0 +1,39 @@
+<template>
+  <n-button
+    :class="`${attrs.class ? attrs.class : ''}`"
+    attr-type="button"
+    :focusable="false"
+    :bordered="true"
+    :keyboard="false"
+    :block="block"
+    :size="size"
+    :type="type"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </n-button>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue'
+import { NButton } from 'naive-ui'
+import { debounce } from '../utility/throttle-debounce'
+
+defineOptions({
+  name: 'PButton',
+  inheritAttrs: false
+})
+
+defineProps({
+  type: { type: String, default: 'primary' },
+  size: { type: String, default: 'medium' },
+  block: { type: Boolean, default: false }
+})
+
+const attrs = useAttrs()
+
+const emit = defineEmits(['click'])
+const handleClick = debounce(function () {
+  emit('click')
+})
+</script>

package/button/index.js

@@ -0,0 +1 @@
+export { default as PButton } from './button.vue'

package/config-provider/config-provider.vue

@@ -0,0 +1,34 @@
+<template>
+  <n-config-provider
+    preflight-style-disabled
+    abstract
+    inline-theme-disabled
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme-overrides="themeOverrides"
+  >
+    <slot></slot>
+  </n-config-provider>
+</template>
+
+<script setup>
+import 'vfonts/Lato.css'
+import { NConfigProvider, zhCN, dateZhCN } from 'naive-ui'
+
+defineOptions({
+  name: 'PConfigProvider',
+  inheritAttrs: false
+})
+
+const themeOverrides = {
+  common: {
+    fontWeightStrong: '600',
+    primaryColor: '#2080F0FF',
+    primaryColorHover: '#4098FCFF',
+    primaryColorPressed: '#1060C9FF',
+    primaryColorSuppl: '#4098FCFF'
+  }
+}
+</script>
+
+<style src="./reset.css"></style>

package/config-provider/index.js

@@ -0,0 +1 @@
+export { default as PConfigProvider } from './config-provider.vue'

package/config-provider/reset.css

@@ -0,0 +1,137 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+    background-color: rgb(255, 255, 255);
+    color: rgb(51, 54, 57);
+    font-size: 14px;
+    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    line-height: 1.6;
+    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}

package/index.js

@@ -0,0 +1,13 @@
+import { PConfigProvider } from './config-provider/index.js'
+import { PButton } from './button/index.js'
+import { PInput } from './input/index.js'
+
+export default {
+  install: (app, options = {}) => {
+    const { prefix = 'p' } = options
+
+    app.component(`${prefix}-config-provider`, PConfigProvider)
+    app.component(`${prefix}-button`, PButton)
+    app.component(`${prefix}-input`, PInput)
+  }
+}

package/input/index.js

@@ -0,0 +1 @@
+export { default as PInput } from './input.vue'

package/input/input.vue

@@ -0,0 +1,58 @@
+<template>
+  <n-input
+    :input-props="{ autocomplete: 'off' }"
+    :type="type"
+    :value="value"
+    :maxlength="maxlength"
+    :show-count="showCount"
+    :count-graphemes="(maxlength != null && maxlength > 0) || showCount ? countGraphemes : void 0"
+    :placeholder="placeholder"
+    @input="handleInput"
+    @blur="handleBlur"
+  />
+</template>
+
+<script setup>
+import { NInput } from 'naive-ui'
+import { countGraphemes } from '../utility/util'
+
+defineOptions({
+  name: 'PInput',
+  inheritAttrs: false
+})
+
+const { trim } = defineProps({
+  type: { type: String, default: 'text' },
+  placeholder: { type: String, default: '' },
+  maxlength: { type: Number },
+  showCount: { type: Boolean, default: false },
+  trim: { type: Boolean, default: true }
+})
+const value = defineModel({ type: String, default: '' })
+const emit = defineEmits(['blur', 'input'])
+
+function handleValueWithTrim() {
+  let v = value.value
+  if (trim) {
+    const vWithTrim = v.trim()
+    value.value = vWithTrim
+    v = vWithTrim
+  }
+  return v
+}
+
+function handleBlur() {
+  const val = handleValueWithTrim()
+  emit('blur', { value: val })
+}
+
+function handleInput(val) {
+  value.value = val
+
+  let v = val
+  if (trim) {
+    v = v.trim()
+  }
+  emit('input', { value: v })
+}
+</script>

package/package.json

@@ -1,67 +1,40 @@
 {
   "name": "@avilang/practical-ui",
-  "description": "基于 React 的后台 UI 库",
-  "version": "0.1.4",
+  "type": "module",
+  "version": "0.2.0",
+  "description": "Practical UI components created based on vue3",
+  "main": "index.js",
   "scripts": {
-    "build:css": "gulp",
-    "build": "rimraf dist && rollup -c && rimraf dist/index.css && yarn build:css",
-    "lint": "eslint --ignore-path .gitignore --ignore-pattern lib/_fonts/* --ext .js lib",
-    "lint:style": "stylelint --ignore-path .gitignore --fix lib/**/*.scss",
-    "docz:dev": "rimraf .docz && docz dev",
-    "docz:build": "docz build",
-    "docz:serve": "docz build && docz serve",
-    "prepare": "husky install"
+    "build": "vite build",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix",
+    "format": "prettier . --write",
+    "prepare": "cd ../.. && husky packages/components/.husky"
   },
   "lint-staged": {
-    "*.js": "eslint --cache --ignore-path .gitignore --ignore-pattern lib/_fonts/* --ignore-pattern dist/*",
-    "*.scss": "stylelint --cache --fix"
+    "*.{js,jsx,vue}": [
+      "eslint",
+      "prettier --check"
+    ],
+    "*.{css,less}": "prettier --check"
+  },
+  "keywords": [
+    "naive-ui",
+    "vue3",
+    "practical ui"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.10"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
-    "prop-types": "^15.7.2"
+    "grapheme-splitter": "1.0.4",
+    "naive-ui": "2.40.1",
+    "vfonts": "0.0.3"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^4.0.0",
-    "babel-eslint": "^10.0.0",
-    "docz": "^2.3.1",
-    "eslint": "^7.25.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "gatsby-plugin-sass": "^4.4.0",
-    "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.1",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-cli": "^2.3.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^4.1.0",
-    "husky": "^6.0.0",
-    "lint-staged": "^10.5.4",
-    "node-sass": "^5.0.0",
-    "postcss": "^8.2.15",
-    "prettier": "^2.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.48.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "stylelint": "^13.13.1",
-    "stylelint-config-recess-order": "^2.4.0",
-    "stylelint-config-sass-guidelines": "^8.0.0",
-    "stylelint-config-standard": "^22.0.0"
-  },
-  "engines": {
-    "node": ">=14.16.1 <15"
+    "@laynezh/vite-plugin-lib-assets": "^0.5.24",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "^5.4.8"
   },
+  "author": "avilang <1985945885@qq.com> (https://github.com/avilang)",
   "license": "MIT"
 }

package/utility/throttle-debounce.js

@@ -0,0 +1,198 @@
+/* eslint-disable */
+// 基于 https://github.com/cowboy/jquery-throttle-debounce/ 简单做了修改
+// 接口文档和用法和原来库一致 连接 https://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html
+
+// Since jQuery really isn't required for this plugin, use `jQuery` as the
+// namespace only if it already exists, otherwise use the `Cowboy` namespace,
+// creating it if necessary.
+var _undefined = void(0);
+var $ = {},
+
+  // Internal method reference.
+  jq_throttle;
+
+// Method: jQuery.throttle
+//
+// Throttle execution of a function. Especially useful for rate limiting
+// execution of handlers on events like resize and scroll. If you want to
+// rate-limit execution of a function to a single time, see the
+// <jQuery.debounce> method.
+//
+// In this visualization, | is a throttled-function call and X is the actual
+// callback execution:
+//
+// > Throttled with `no_trailing` specified as false or unspecified:
+// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
+// > X    X    X    X    X    X        X    X    X    X    X    X
+// >
+// > Throttled with `no_trailing` specified as true:
+// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
+// > X    X    X    X    X             X    X    X    X    X
+//
+// Usage:
+//
+// > var throttled = jQuery.throttle( delay, [ no_trailing, ] callback );
+// >
+// > jQuery('selector').bind( 'someevent', throttled );
+// > jQuery('selector').unbind( 'someevent', throttled );
+//
+// This also works in jQuery 1.4+:
+//
+// > jQuery('selector').bind( 'someevent', jQuery.throttle( delay, [ no_trailing, ] callback ) );
+// > jQuery('selector').unbind( 'someevent', callback );
+//
+// Arguments:
+//
+//  delay - (Number) A zero-or-greater delay in milliseconds. For event
+//    callbacks, values around 100 or 250 (or even higher) are most useful.
+//  no_trailing - (Boolean) Optional, defaults to false. If no_trailing is
+//    true, callback will only execute every `delay` milliseconds while the
+//    throttled-function is being called. If no_trailing is false or
+//    unspecified, callback will be executed one final time after the last
+//    throttled-function call. (After the throttled-function has not been
+//    called for `delay` milliseconds, the internal counter is reset)
+//  callback - (Function) A function to be executed after delay milliseconds.
+//    The `this` context and all arguments are passed through, as-is, to
+//    `callback` when the throttled-function is executed.
+//
+// Returns:
+//
+//  (Function) A new, throttled, function.
+
+$.throttle = jq_throttle = function( delay, no_trailing, callback, debounce_mode ) {
+  // After wrapper has stopped being called, this timeout ensures that
+  // `callback` is executed at the proper times in `throttle` and `end`
+  // debounce modes.
+  var timeout_id,
+
+    // Keep track of the last time `callback` was executed.
+    last_exec = 0;
+
+  // `no_trailing` defaults to falsy.
+  if ( typeof no_trailing !== 'boolean' ) {
+    debounce_mode = callback;
+    callback = no_trailing;
+    no_trailing = _undefined;
+  }
+
+  // The `wrapper` function encapsulates all of the throttling / debouncing
+  // functionality and when executed will limit the rate at which `callback`
+  // is executed.
+  function wrapper() {
+    var that = this,
+      elapsed = +new Date() - last_exec,
+      args = arguments;
+
+    // Execute `callback` and update the `last_exec` timestamp.
+    function exec() {
+      last_exec = +new Date();
+      callback.apply( that, args );
+    };
+
+    // If `debounce_mode` is true (at_begin) this is used to clear the flag
+    // to allow future `callback` executions.
+    function clear() {
+      timeout_id = _undefined;
+    };
+
+    if ( debounce_mode && !timeout_id ) {
+      // Since `wrapper` is being called for the first time and
+      // `debounce_mode` is true (at_begin), execute `callback`.
+      exec();
+    }
+
+    // Clear any existing timeout.
+    timeout_id && clearTimeout( timeout_id );
+
+    if ( debounce_mode === _undefined && elapsed > delay ) {
+      // In throttle mode, if `delay` time has been exceeded, execute
+      // `callback`.
+      exec();
+
+    } else if ( no_trailing !== true ) {
+      // In trailing throttle mode, since `delay` time has not been
+      // exceeded, schedule `callback` to execute `delay` ms after most
+      // recent execution.
+      //
+      // If `debounce_mode` is true (at_begin), schedule `clear` to execute
+      // after `delay` ms.
+      //
+      // If `debounce_mode` is false (at end), schedule `callback` to
+      // execute after `delay` ms.
+      timeout_id = setTimeout( debounce_mode ? clear : exec, debounce_mode === _undefined ? delay - elapsed : delay );
+    }
+  };
+
+  // Set the guid of `wrapper` function to the same of original callback, so
+  // it can be removed in jQuery 1.4+ .unbind or .die by using the original
+  // callback as a reference.
+  if ( $.guid ) {
+    wrapper.guid = callback.guid = callback.guid || $.guid++;
+  }
+
+  // Return the wrapper function.
+  return wrapper;
+};
+
+// Method: jQuery.debounce
+//
+// Debounce execution of a function. Debouncing, unlike throttling,
+// guarantees that a function is only executed a single time, either at the
+// very beginning of a series of calls, or at the very end. If you want to
+// simply rate-limit execution of a function, see the <jQuery.throttle>
+// method.
+//
+// In this visualization, | is a debounced-function call and X is the actual
+// callback execution:
+//
+// > Debounced with `at_begin` specified as false or unspecified:
+// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
+// >                          X                                 X
+// >
+// > Debounced with `at_begin` specified as true:
+// > ||||||||||||||||||||||||| (pause) |||||||||||||||||||||||||
+// > X                                 X
+//
+// Usage:
+//
+// > var debounced = jQuery.debounce( delay, [ at_begin, ] callback );
+// >
+// > jQuery('selector').bind( 'someevent', debounced );
+// > jQuery('selector').unbind( 'someevent', debounced );
+//
+// This also works in jQuery 1.4+:
+//
+// > jQuery('selector').bind( 'someevent', jQuery.debounce( delay, [ at_begin, ] callback ) );
+// > jQuery('selector').unbind( 'someevent', callback );
+//
+// Arguments:
+//
+//  delay - (Number) A zero-or-greater delay in milliseconds. For event
+//    callbacks, values around 100 or 250 (or even higher) are most useful.
+//  at_begin - (Boolean) Optional, defaults to false. If at_begin is false or
+//    unspecified, callback will only be executed `delay` milliseconds after
+//    the last debounced-function call. If at_begin is true, callback will be
+//    executed only at the first debounced-function call. (After the
+//    throttled-function has not been called for `delay` milliseconds, the
+//    internal counter is reset)
+//  callback - (Function) A function to be executed after delay milliseconds.
+//    The `this` context and all arguments are passed through, as-is, to
+//    `callback` when the debounced-function is executed.
+//
+// Returns:
+//
+//  (Function) A new, debounced, function.
+
+$.debounce = function( delay, at_begin, callback ) {
+  return callback === _undefined
+    ? jq_throttle( delay, at_begin, false )
+    : jq_throttle( delay, callback, at_begin !== false );
+};
+
+export const debounce = function(callback, delay, at_begin) {
+  return $.debounce(delay || 300, at_begin == null ? true : at_begin, callback);
+};
+
+export const throttle = function(callback, delay, no_trailing) {
+  return $.throttle(delay || 300, no_trailing == null ? false : no_trailing, callback);
+}

package/utility/util.js

@@ -0,0 +1,7 @@
+import GraphemeSplitter from 'grapheme-splitter'
+
+const splitter = new GraphemeSplitter()
+
+export const countGraphemes = (str = '') => {
+  return splitter.countGraphemes(str)
+}

package/vite.config.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-undef */
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import libAssets from '@laynezh/vite-plugin-lib-assets'
+
+// READING https://github.com/vitejs/vite/issues/3295
+export default defineConfig({
+  plugins: [
+    vue(),
+    libAssets({
+      include: /\.woff2(\?.*)?$/,
+      name: '[name].[ext]'
+    })
+  ],
+  build: {
+    assetsInlineLimit: 0,
+    cssCodeSplit: false,
+    lib: {
+      entry: resolve(__dirname, 'index.js'),
+      formats: ['es'],
+      fileName: 'index'
+    },
+    rollupOptions: {
+      external: ['vue']
+    }
+  }
+})

package/.browserslistrc

@@ -1,6 +0,0 @@
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-IE 11
-not IE 10

package/.editorconfig

@@ -1,15 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.html]
-insert_final_newline = false

package/.eslintrc

@@ -1,25 +0,0 @@
-{
-  "extends": [
-    "react-app",
-    "airbnb",
-    "airbnb/hooks",
-    "plugin:jsx-a11y/recommended",
-    "plugin:prettier/recommended"
-  ],
-  "plugins": ["jsx-a11y"],
-  "rules": {
-    "func-names": ["error", "never"],
-    "prefer-destructuring": "off",
-    "no-unused-expressions": "off",
-    "no-useless-return": "off",
-    "consistent-return": "off",
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
-    "import/prefer-default-export": "off",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/jsx-props-no-spreading": "off",
-    "react/forbid-prop-types": "off",
-    "react/prop-types": ["error", { "ignore": ["children"] }],
-    "react/require-default-props": "off",
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
-  }
-}

package/.gitattributes

@@ -1,4 +0,0 @@
-src/**/*.js text eol=lf
-lib/**/*.js text eol=lf
-lib/**/*.scss text eol=lf
-lib/_fonts/**/* text binary