@jetlinks-web/components 2.0.2 → 2.0.3

package/lib/style.js

@@ -0,0 +1,5 @@
+"use strict";
+
+require("./ProLayout/style");
+require("./ProTable/style");
+require("./Search/style");

package/package.json

@@ -1,40 +1,149 @@
 {
   "name": "@jetlinks-web/components",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "",
-  "main": "index.ts",
-  "module": "index.ts",
+  "main": "lib/index.js",
+  "module": "es/index.js",
   "keywords": [],
   "files": [
-    "src",
-    "index.ts"
+    "lib",
+    "es"
   ],
   "private": false,
   "author": "",
   "license": "ISC",
   "dependencies": {
     "@ant-design/icons-vue": "^7.0.1",
+    "@vuemap/vue-amap": "^2.0.17",
     "@vueuse/core": "^10.2.1",
     "@vueuse/router": "^10.9.0",
-    "@vuemap/vue-amap": "^2.0.17",
-    "sortablejs": "^1.15.2",
+    "ant-design-vue": "3.2.20",
     "echarts": "^5.4.3",
     "monaco-editor": "^0.40.0",
-    "@jetlinks-web/utils": "^1.0.6",
+    "sortablejs": "^1.15.2",
     "@jetlinks-web/constants": "^1.0.2",
-    "@jetlinks-web/hooks": "^1.0.10"
+    "@jetlinks-web/hooks": "^1.0.12",
+    "@jetlinks-web/utils": "^1.0.6"
   },
   "devDependencies": {
-    "lodash-es": "^4.17.21",
-    "pinia": "^2.1.6",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-member-expression-literals": "^7.8.3",
+    "@babel/plugin-transform-object-assign": "^7.8.3",
+    "@babel/plugin-transform-property-literals": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/plugin-transform-template-literals": "^7.8.3",
+    "@babel/plugin-transform-typescript": "^7.12.1",
+    "@babel/polyfill": "^7.8.7",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-typescript": "^7.10.4",
+    "@commitlint/cli": "^17.4.2",
+    "@commitlint/config-conventional": "^17.4.2",
+    "@rollup/plugin-commonjs": "^22.0.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@types/eslint": "^8.21.0",
+    "@types/lodash-es": "^4.17.6",
+    "@types/node": "^18.13.0",
+    "@types/sortablejs": "^1.15.1",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
+    "@typescript-eslint/parser": "^5.50.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/babel-plugin-jsx": "^1.0.0",
+    "@vue/compiler-sfc": "^3.4.21",
+    "autoprefixer": "^10.2.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.0",
+    "babel-plugin-import": "^1.1.1",
+    "babel-plugin-inline-import-data-uri": "^1.0.1",
+    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-transform-require-context": "^0.1.1",
+    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "child_process": "^1.0.2",
+    "codesandbox": "^2.2.3",
+    "colorful": "^2.1.0",
+    "commander": "^6.1.0",
+    "commitlint": "^17.4.2",
+    "compute-scroll-into-view": "^3.0.0",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^3.0.0",
+    "diacritics": "^1.3.0",
+    "duplicate-package-checker-webpack-plugin": "^3.0.0",
+    "esbuild": "~0.12.29",
+    "esbuild-loader": "^2.18.0",
+    "escape-html": "^1.0.3",
+    "eslint": "^8.33.0",
+    "eslint-config-prettier": "^8.0.0",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-markdown": "^2.0.0",
+    "eslint-plugin-vue": "^8.1.1",
+    "fast-glob": "^3.2.12",
+    "globby": "^11.1.0",
+    "gray-matter": "^4.0.3",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-strip-code": "^0.1.4",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "is-windows": "^1.0.2",
+    "json5": "^2.2.3",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "less-plugin-npm-import": "^2.1.0",
+    "less-vars-to-js": "^1.3.0",
+    "lint-staged": "^13.1.0",
+    "lru-cache": "^7.14.1",
+    "marked": "0.3.18",
+    "merge2": "^1.4.1",
+    "mini-css-extract-plugin": "^2.4.5",
+    "minimist": "^1.2.0",
+    "mkdirp": "^0.5.1",
+    "object-assign": "^4.1.1",
+    "postcss": "^8.2.12",
+    "postcss-loader": "^6.0.0",
+    "prettier": "^2.8.3",
+    "prismjs": "^1.29.0",
+    "remove-files-webpack-plugin": "^1.5.0",
+    "rollup-plugin-esbuild": "^4.9.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-vue": "^6.0.0",
+    "slash": "^3.0.0",
+    "string-replace-loader": "^3.1.0",
+    "style-loader": "^3.3.1",
+    "sucrase": "^3.29.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "through2": "^4.0.2",
+    "ts-loader": "^9.1.0",
+    "ts-morph": "^17.0.1",
+    "typescript": "^4.9.3",
+    "unplugin-vue-macros": "^0.11.2",
+    "url": "^0.11.0",
+    "url-loader": "^3.0.0",
+    "vite": "^4.0.0",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue": "^3.2.45",
+    "vue-eslint-parser": "^9.1.0",
+    "vue-tsc": "^1.0.11",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^4.0.0",
+    "webpack-merge": "^5.0.0",
+    "webpackbar": "^5.0.2"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "scripts": {
+    "compile": "node tools/cli/run.js compile",
     "clean": "pnpm rimraf node_modules && pnpm rimraf .turbo"
   }
 }

package/index.ts

@@ -1,64 +0,0 @@
-import type { App } from 'vue'
-
-import { InitAMap } from './src/AMap'
-import BadgeStatus from './src/BadgeStatus'
-import CardSelect from './src/CardSelect'
-import CheckButton from './src/CheckButton'
-import ConfigProvider from './src/ConfigProvider'
-import Echarts from './src/Echarts'
-import Ellipsis from './src/Ellipsis'
-import Empty from './src/Empty'
-import FullPage from './src/FullPage'
-import AIcon from './src/Icon'
-import MonacoEditor from './src/MonacoEditor'
-import PermissionButton from './src/PermissionButton'
-import ProLayout, { PageContainer } from './src/ProLayout'
-import ProTable from './src/ProTable'
-import Scrollbar from './src/Scrollbar'
-import Search, { AdvancedSearch } from './src/Search'
-import ValueItem from './src/ValueItem'
-
-export * from './src/style'
-
-export {
-  BadgeStatus,
-  CardSelect,
-  CheckButton,
-  Echarts,
-  Ellipsis,
-  Empty,
-  FullPage,
-  AIcon,
-  MonacoEditor,
-  PermissionButton,
-  ValueItem,
-  ProTable,
-  Scrollbar,
-  Search,
-  AdvancedSearch,
-  ConfigProvider,
-}
-export default {
-  install(app: App) {
-    app
-      .component('JAMap', InitAMap)
-      .component('JBadgeStatus', BadgeStatus)
-      .component('JCardSelect', CardSelect)
-      .component('JCheckButton', CheckButton)
-      .component('JConfigProvider', ConfigProvider)
-      .component('JEcharts', Echarts)
-      .component('JEllipsis', Ellipsis)
-      .component('JEmpty', Empty)
-      .component('JFullPage', FullPage)
-      .component('AIcon', AIcon)
-      .component('JMonacoEditor', MonacoEditor)
-      .component('JPermissionButton', PermissionButton)
-      .component('JProLayout', ProLayout)
-      .component('JPageContainer', PageContainer)
-      .component('JProTable', ProTable)
-      .component('JScrollbar', Scrollbar)
-      .component('JSearch', Search)
-      .component('JAdvancedSearch', AdvancedSearch)
-      .component('JValueItem', ValueItem)
-  },
-}

package/src/AMap/Map.vue

@@ -1,110 +0,0 @@
-<template>
-  <div
-    :style="props.style || { width: '100%', height: '100%' }"
-    :class="props.class"
-  >
-    <el-amap
-      v-if="hasAMapKey"
-      :map-style="_mapStyle"
-      v-bind="{
-        ...props,
-        ...$attrs
-      }"
-      @init="initMap"
-    >
-      <template v-if="uiLoading">
-        <slot></slot>
-      </template>
-      <template v-else><slot></slot></template>
-    </el-amap>
-    <Empty v-else description="请配置高德地图key" style="padding: 20%" />
-  </div>
-</template>
-
-<script setup name="InitAMap" lang="ts">
-import type { CSSProperties, PropType } from 'vue';
-import { ref, computed } from 'vue'
-import { initAMapApiLoader, ElAmap } from '@vuemap/vue-amap';
-import { getAMapUiPromise } from '@jetlinks-web/utils'
-import { MapProps } from './util'
-import { MAPConfig } from "@jetlinks-web/constants";
-import Empty from '../Empty'
-import '@vuemap/vue-amap/dist/style.css';
-
-interface AMapProps {
-  style?: CSSProperties;
-  class?: string;
-  AMapUI?: string | boolean;
-  plugins?: string[]
-}
-
-const emit = defineEmits([
-  'initMap',
-])
-
-const props = defineProps({
-  ...MapProps(),
-  style: Object as PropType<AMapProps['style']>,
-  class: String as PropType<AMapProps['class']>,
-  AMapUI: [String, Boolean],
-  center: Array,
-  plugins: Array as PropType<string[]>,
-  zooms: {
-    type: Array,
-    default: [3, 20]
-  },
-  JSKey: String,
-  WebKey: String,
-});
-
-const config = inject<{ mapStyle: any, JSKey: string, WebKey: string }>(MAPConfig)
-
-const _mapStyle = computed(() => {
-  if (props.mapStyle) {
-    return `amap://styles/${props.mapStyle}`
-  }
-
-  if (config.mapStyle) {
-    return config.mapStyle
-  }
-
-  return undefined
-})
-
-const hasAMapKey = computed(() => {
-  return !!(props.JSKey || config.JSKey)
-})
-
-initAMapApiLoader({
-  key: props.JSKey || config.JSKey || '',
-  securityJsCode: props.WebKey || config.WebKey,
-  plugins: props.plugins
-});
-
-const uiLoading = ref<boolean>(false);
-
-const map = ref<any>(null);
-
-const isOpenUi = computed(() => {
-  return 'AMapUI' in props || props.AMapUI;
-});
-const getAMapUI = () => {
-  const version = typeof props.AMapUI === 'string' ? props.AMapUI : '1.1';
-  getAMapUiPromise(version).then(() => {
-    uiLoading.value = true;
-  });
-};
-
-const initMap = (e: any) => {
-  map.value = e;
-  emit('initMap', e)
-  if (isOpenUi.value) {
-    getAMapUI();
-  }
-};
-
-</script>
-
-<style scoped>
-
-</style>

package/src/AMap/index.ts

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

package/src/AMap/util.ts

@@ -1,56 +0,0 @@
-export const MapProps = () => ({
-  //  响应式
-  center: Array,
-  labelzIndex: Number,
-  lang: String,
-  mapStyle: String,
-
-  //  静态属性
-  vid: String,
-  amapManager: Object as any,
-  defaultCursor: String,
-  animateEnable: {
-    type: Boolean,
-    default: true
-  },
-  isHotspot: Boolean,
-  rotateEnable: {
-    type: Boolean,
-    default: true
-  },
-  resizeEnable: {
-    type: Boolean,
-    default: true
-  },
-  showIndoorMap: Boolean,
-  expandZoomRange: Boolean,
-  dragEnable: {
-    type: Boolean,
-    default: true
-  },
-  zoomEnable: {
-    type: Boolean,
-    default: true
-  },
-  doubleClickZoom: {
-    type: Boolean,
-    default: true
-  },
-  keyboardEnable: {
-    type: Boolean,
-    default: true
-  },
-  jogEnable: {
-    type: Boolean,
-    default: true
-  },
-  scrollWheel: {
-    type: Boolean,
-    default: true
-  },
-  touchZoom: {
-    type: Boolean,
-    default: true
-  },
-
-})

package/src/BadgeStatus/Badge.vue

@@ -1,41 +0,0 @@
-<template>
-  <a-badge
-    :color="_color"
-    :text="text"
-  ></a-badge>
-</template>
-
-<script setup lang="ts" name="BadgeStatus">
-import { computed } from 'vue'
-import { getHexColor } from './color'
-
-const props = defineProps({
-  text: {
-    type: String,
-  },
-  status: {
-    type: [String, Number],
-    default: 'default',
-  },
-  /**
-   * 自定义status值颜色
-   * @example {
-   *   1: 'success',
-   *   0: 'error'
-   * }
-   */
-  statusNames: {
-    type: Object,
-    default: () => ({
-      'success': 'success',
-      'warning': 'warning',
-      'error': 'error',
-      'default': 'default',
-    })
-  },
-});
-
-const _color = computed(() => {
-  return getHexColor(props.status, props.statusNames, 1)
-})
-</script>

package/src/BadgeStatus/color.ts

@@ -1,25 +0,0 @@
-const colorMap = {
-  'success': '36, 178, 118',
-  'warning': '255, 144, 0',
-  'error': '229, 0, 18',
-  'processing': '9, 46, 231',
-  'default': '102, 102, 102',
-}
-
-export const getHexColor = (code: string | number, statusNames: Record<string | number, any>,  pe: number = 0.1) => {
-  if (!code) {
-    return `rgba(102, 102, 102, ${pe})`
-  }
-
-  if (colorMap[code]) {
-    return `rgba(${colorMap[code]}, ${pe})`
-  }
-
-  if (Object.keys(statusNames).length) {
-    return statusNames[code]
-  }
-
-  return
-}
-
-export default colorMap

package/src/BadgeStatus/index.ts

@@ -1,4 +0,0 @@
-import BadgeStatus from './Badge.vue'
-export * from './color'
-
-export default BadgeStatus

package/src/CardSelect/CardSelect.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="j-card-select" :style="CardSelectStyle">
-    <div
-      v-for="item in options"
-      :class="{
-        'j-card-select-item': true,
-        'disabled': disabled || item.disabled,
-        'active': selectKeys.includes(item.value)
-      }"
-      @click="() => handleSelect(item.value, item)"
-    >
-      <slot name="itemRender" :node="item" >
-        <div class="j-card-select-item-content">
-          <div class="j-card-select-title">
-            {{ item.label }}
-          </div>
-          <div class="j-card-select-describe">
-            {{ item.describe }}
-          </div>
-        </div>
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup name="CardSelect">
-import { has } from 'lodash-es'
-const props = defineProps({
-  layout: {
-    type: String,
-    default: 'horizontal'
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  column: {
-    type: Number,
-    default: 3,
-  },
-  value: {
-    type: [String, Array],
-    default: undefined,
-  },
-  itemLayout: {
-    type: String,
-    default: 'horizontal'
-  }
-})
-
-const emit = defineEmits(['select', 'change', 'update:value'])
-
-const selectKeys = ref([])
-
-const CardSelectStyle = computed(() => {
-  const _column = props.column > 0 && props.layout === 'horizontal' ? props.column : 1
-
-  return {
-    'grid-template-columns': `repeat(${_column}, 1fr)`
-  }
-})
-
-const isMultiple = computed(() => {
-  return has(props, 'multiple') && props.multiple !== false
-})
-
-const handleSelect = (key, node) => {
-  if (props.disabled || node.disabled) {
-    return
-  }
-
-  const selectKeysSet = new Set(selectKeys.value)
-  const isActive = selectKeysSet.has(key)
-
-  if (isMultiple.value) {
-    if (isActive) {
-      selectKeysSet.delete(key)
-    } else {
-      selectKeysSet.add(key)
-    }
-    selectKeys.value = [...selectKeysSet.values()]
-    const nodes = props.options.filter(item => selectKeys.value.includes(item.value))
-    emit('select', selectKeys.value, nodes)
-    emit('change', selectKeys.value, nodes)
-    emit('update:value', selectKeys.value)
-  } else {
-    selectKeys.value = [key]
-
-    emit('select', key, node)
-    emit('change', key, node)
-    emit('update:value', key)
-  }
-}
-
-watch(() => props.value, () => {
-  selectKeys.value = isMultiple.value ? props.value : [props.value]
-}, { immediate: true })
-
-</script>
-
-<style lang="less">
-@import '../style/variable.less';
-
-.j-card-select {
-  display: grid;
-  gap: 12px;
-
-  .j-card-select-item {
-    padding: 12px;
-    border: 1px solid #e6e6e6;
-    border-radius: @border-radius-base;
-    cursor: pointer;
-
-    &.active {
-      border-color: @primary-color;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.75;
-    }
-
-    .j-card-select-describe {
-      color: @text-color-subtitle;
-    }
-  }
-}
-</style>

package/src/CardSelect/index.ts

@@ -1,3 +0,0 @@
-import CardSelect from "./CardSelect.vue";
-
-export default CardSelect