@jetlinks-web/components 2.0.2-2 → 2.0.2-4

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

package/src/CheckButton/CheckButton.vue

@@ -1,146 +0,0 @@
-<template>
-  <div :class="['j-check-button', props.class]" :style="style">
-    <div
-        v-for="item in _options"
-        :key="item.value"
-        :class="[
-                'j-check-button-item',
-                myValue.includes(item.value) ? 'selected' : '',
-                item.disabled ? 'disabled' : '',
-            ]"
-        @click="
-                () => {
-                    selected(item.value, item.disabled);
-                }
-            "
-    >
-      {{ item.label }}
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, CSSProperties, PropType, ref, watch } from 'vue';
-import { isArray } from '@jetlinks-web/utils';
-
-const props = defineProps({
-  value: {
-    type: [String, Array],
-    default: undefined,
-  },
-  options: {
-    type: Array as PropType<{ disabled?: boolean; label: string; value: string }[]>,
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  class: {
-    type: String,
-    default: undefined,
-  },
-  style: {
-    type: Object as PropType<CSSProperties>,
-    default: () => ({}),
-  },
-});
-const emit = defineEmits(['update:value', 'change', 'select']);
-
-const myValue = ref();
-const optionsMap = ref(new Map());
-
-const _options = computed(() => {
-  props.options.forEach((item: any) => {
-    if (props.disabled) {
-      item.display = props.disabled;
-    }
-    optionsMap.value.set(item.value, item);
-  });
-  return props.options;
-});
-
-watch(
-    () => props.value,
-    () => {
-      if (props.value) {
-        myValue.value = isArray(props.value) ? props.value : [props.value];
-      } else {
-        myValue.value = [];
-      }
-    },
-    {immediate: true, deep: true},
-);
-
-const selected = (key: string | number, disabled: boolean) => {
-  if (disabled) return;
-
-  const values = new Set(myValue.value);
-
-  if (values.has(key)) {
-    values.delete(key);
-  } else {
-    if (!props.multiple) {
-      values.clear();
-    }
-    values.add(key);
-  }
-
-  myValue.value = [...values.values()];
-
-  const optionsItems = myValue.value.map((_key) => {
-    return optionsMap.value.get(_key);
-  });
-
-  const _value = props.multiple ? myValue.value : myValue.value[0];
-
-  emit('update:value', _value);
-  emit('change', _value, props.multiple ? optionsItems : optionsItems[0]);
-  emit('select', _value, props.multiple ? optionsItems : optionsItems[0]);
-};
-</script>
-
-<style scoped lang="less">
-.j-check-button {
-  display: flex;
-  gap: 16px;
-  width: 100%;
-
-  .j-check-button-item {
-    flex: 1;
-    min-width: 0;
-    padding: 8px;
-    border-radius: @border-radius-base;
-    background-color: #f2f3f5;
-    transition: all 0.3s;
-    color: #333;
-    text-align: center;
-    cursor: pointer;
-
-    &:hover {
-      background-color: @primary-color;
-      opacity: 0.85;
-      color: #fff;
-    }
-
-    &.selected {
-      background-color: @primary-color;
-      color: #fff;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      color: #00000060;
-
-      &:hover {
-        background-color: #f2f3f5;
-        color: #00000060;
-      }
-    }
-  }
-}
-</style>

package/src/CheckButton/index.md

@@ -1,27 +0,0 @@
----
-category: Components
-subtitle: 选择按钮
-type: 数据录入
-title: Checkbutton
----
-
-## API
-
-### 属性
-
-#### CheckButton
-
-| 参数     | 说明                            | 类型                                                         | 默认值 | 版本 |
-| -------- | ------------------------------- | ------------------------------------------------------------ | ------ | ---- |
-| multiple | 多选                            | boolean                                                      | false  |      |
-| disabled | 失效状态                        | boolean                                                      | false  |      |
-| value    | 与 CheckboxGroup 组合使用时的值 | boolean \| string \| number                                  | -      |      |
-| options  | 选择项                          | Array<{ label: string value: string disabled?: boolean }> | \[]    |      |
-| class | 类名 | string | undefined | - |
-| style | css样式 | CSSProperties | {} | - |
-
-#### 事件
-
-| 事件名称 | 说明           | 回调参数              | 默认值  |版本                    |     |
-| -------- | -------------- | --------------------- | ----------------------- | --- | --- |
-| change   | 变化时回调函数 | Function(keys: string | string[], nodes: any[]) | -   |     |

package/src/CheckButton/index.ts

@@ -1,3 +0,0 @@
-import CheckButton from './CheckButton.vue';
-
-export default CheckButton;

package/src/ConfigProvider/context.ts

@@ -1,17 +0,0 @@
-import type {PropType} from "vue";
-import { configProviderProps } from 'ant-design-vue/es/config-provider/context';
-
-export type MapConfigType = {
-  mapStyle?: any
-  JSKey?: string
-  WebKey?: string
-}
-export const configProps = () => ({
-  ...configProviderProps(),
-  IconConfig: {
-    type: Object as PropType<{ scriptUrl: string }>
-  },
-  MapConfig: {
-    type: Object as PropType<MapConfigType>
-  }
-})

package/src/ConfigProvider/index.tsx

@@ -1,40 +0,0 @@
-import {defineComponent, provide, reactive, h} from 'vue'
-import { configProps } from './context'
-import type { MapConfigType } from './context'
-import { ComponentsEnum, MAPConfig } from '@jetlinks-web/constants'
-import { ConfigProvider } from 'ant-design-vue'
-import {omit} from 'lodash-es'
-import Empty from '../Empty'
-
-const JConfigProvider = defineComponent({
-  name: 'JConfigProvider',
-  inheritAttrs: false,
-  props: {
-    ...configProps()
-  },
-  setup(props, { slots }) {
-
-    const _iconConfig = reactive(props.IconConfig || {})
-    const _mapConfig = reactive<MapConfigType>(props.MapConfig || {})
-
-    provide(ComponentsEnum.Icon, _iconConfig) // 全局Icon 配置
-
-    provide(MAPConfig, _mapConfig) // 全局地图配置
-
-    return () => {
-
-      return h(
-        ConfigProvider,
-        {...omit(props, ['IconConfig', 'MapConfig'])},
-        {
-          default: slots.default,
-          renderEmpty: () => (slots.renderEmpty?.() || <Empty />)
-        }
-      )
-    }
-  }
-})
-
-JConfigProvider.config = ConfigProvider.config
-
-export default JConfigProvider

package/src/Echarts/Echarts.vue

@@ -1,43 +0,0 @@
-<template>
-  <div ref="echartsDom" class="echarts-warp" :style="style"></div>
-</template>
-
-<script lang="ts" name="Echarts" setup>
-import {CSSProperties, nextTick, ref, watch, Ref} from 'vue'
-import {useECharts} from '@jetlinks-web/hooks'
-
-interface Props {
-  style?: CSSProperties
-}
-
-const props = defineProps({
-  options: {
-    type: Object,
-    default: undefined,
-  },
-  style: Object as PropType<Props['style']>,
-})
-
-const echartsDom = ref<Ref<HTMLDivElement> | HTMLDivElement>()
-
-const {setOptions} = useECharts(echartsDom.value)
-
-watch(
-  () => JSON.stringify(props.options),
-  () => {
-    if (props.options) {
-      nextTick(() => {
-        setOptions(props.options)
-      })
-    }
-  },
-  {immediate: true},
-)
-</script>
-
-<style scoped>
-.echarts-warp {
-  width: 100%;
-  height: 100%;
-}
-</style>

package/src/Echarts/index.ts

@@ -1,3 +0,0 @@
-import Echarts from './Echarts.vue'
-
-export default Echarts