@jetlinks-web/components 2.0.2 → 2.0.3

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,42 +0,0 @@
-import {defineComponent, provide, reactive} 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 (
-        <ConfigProvider
-          {...omit(props, ['IconConfig', 'MapConfig'])}
-          v-slots={{
-            renderEmpty: () => (slots.renderEmpty?.() || <Empty />),
-            ...slots,
-          }}
-        >
-          { slots.default?.() }
-        </ConfigProvider>
-      )
-    }
-  }
-})
-
-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

package/src/Ellipsis/Ellipsis.vue

@@ -1,182 +0,0 @@
-<template>
-  <Tooltip ref="tooltipRef" placement="top" v-bind="tooltip" :visible="visible">
-    <template v-if="tooltip">
-      <div :class="[jEllipsisLineClampClass, jEllipsis, 'j-ellipsis-deep']">
-        <slot></slot>
-        <slot name="tooltip"></slot>
-      </div>
-    </template>
-    <span
-      ref="triggerRef"
-      v-bind="triggerAttrs()"
-      @click="handleClickRef"
-      @mouseleave="visible = false"
-      @mouseenter="
-        ;[
-          props.expandTrigger === 'click'
-            ? getTooltipDisabled()
-            : showTooltip(),
-        ]
-      "
-    >
-    </span>
-  </Tooltip>
-</template>
-
-<script setup>
-import { Tooltip } from 'ant-design-vue'
-import { computed, mergeProps, ref, useAttrs } from 'vue'
-
-defineOptions({
-  name: 'Ellipsis',
-})
-
-const props = defineProps({
-  expandTrigger: {
-    type: String,
-    default: undefined,
-  },
-  /** multiline ellipsis */
-  lineClamp: {
-    type: [Number, String],
-    default: 1,
-  },
-  tooltip: {
-    type: [Boolean, Object],
-    default: true,
-  },
-})
-
-// define class name
-const jEllipsis = 'j-ellipsis'
-const jEllipsisCursorClass = 'j-ellipsis-cursor'
-const jEllipsisLineClampClass = 'j-ellipsis-line-clamp'
-
-const expandedRef = ref(false)
-const tooltipRef = ref(null)
-const triggerRef = ref(null)
-const visible = ref(false)
-
-const attrs = useAttrs()
-
-const handleClickRef = computed(() => {
-  return props.expandTrigger === 'click'
-    ? () => {
-        const { value: expanded } = expandedRef
-        expandedRef.value = !expanded
-      }
-    : undefined
-})
-
-function triggerAttrs() {
-  return {
-    ...mergeProps(attrs, {
-      class: [
-        jEllipsis,
-        props.lineClamp !== undefined ? jEllipsisLineClampClass : undefined,
-        props.expandTrigger === 'click' ? jEllipsisCursorClass : undefined,
-      ],
-      style: ellipsisStyleRef.value,
-    }),
-  }
-}
-
-const showTooltip = () => {
-  const { value: trigger } = triggerRef
-  if (trigger) {
-    visible.value = trigger.scrollHeight > trigger.offsetHeight
-  }
-}
-
-const ellipsisStyleRef = computed(() => {
-  const { lineClamp } = props
-  const { value: expanded } = expandedRef
-  if (lineClamp !== undefined) {
-    return {
-      textOverflow: '',
-      '-webkit-line-clamp': expanded ? '' : lineClamp,
-    }
-  } else {
-    return {
-      textOverflow: expanded ? '' : 'ellipsis',
-      '-webkit-line-clamp': '',
-    }
-  }
-})
-
-const syncEllipsisStyle = (trigger) => {
-  if (!trigger) return
-  const latestStyle = ellipsisStyleRef.value
-  const lineClampClass = jEllipsisLineClampClass
-  if (props.lineClamp !== undefined) {
-    syncTriggerClass(trigger, lineClampClass, 'add')
-  } else {
-    syncTriggerClass(trigger, lineClampClass, 'remove')
-  }
-  for (const key in latestStyle) {
-    if (trigger.style[key] !== latestStyle[key]) {
-      trigger.style[key] = latestStyle[key]
-    }
-  }
-}
-
-const syncTriggerClass = (trigger, styleClass, action) => {
-  if (action === 'add') {
-    if (!trigger.classList.contains(styleClass)) {
-      trigger.classList.add(styleClass)
-    }
-  } else {
-    if (trigger.classList.contains(styleClass)) {
-      trigger.classList.remove(styleClass)
-    }
-  }
-}
-
-const syncCursorStyle = (trigger, tooltipDisabled) => {
-  if (props.expandTrigger === 'click' && !tooltipDisabled) {
-    syncTriggerClass(trigger, jEllipsisCursorClass, 'add')
-  } else {
-    syncTriggerClass(trigger, jEllipsisCursorClass, 'remove')
-  }
-}
-
-const getTooltipDisabled = () => {
-  let tooltipDisabled = false
-  const { value: expanded } = expandedRef
-
-  if (expanded) return true
-
-  const { value: trigger } = triggerRef
-
-  if (trigger) {
-    syncEllipsisStyle(trigger)
-    tooltipDisabled = trigger.scrollHeight <= trigger.offsetHeight
-
-    syncCursorStyle(trigger, tooltipDisabled)
-  }
-  return tooltipDisabled
-}
-</script>
-
-<style scoped>
-.j-ellipsis {
-  overflow: hidden;
-  vertical-align: bottom;
-}
-
-.j-ellipsis-cursor {
-  cursor: pointer;
-}
-
-.j-ellipsis-line-clamp {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  word-break: break-all;
-}
-
-.j-ellipsis-deep {
-  max-height: 380px;
-  -webkit-line-clamp: 17;
-  text-overflow: ellipsis;
-}
-</style>

package/src/Ellipsis/index.ts

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

package/src/Empty/Empty.vue

@@ -1,43 +0,0 @@
-<template>
-  <Empty v-bind="baseProps">
-    <template v-for="item in renderArr" :key="item" #[item]="scope">
-      <slot :name="item" :scope="scope"></slot>
-    </template>
-  </Empty>
-</template>
-
-<script lang="ts" setup name="JEmpty">
-import { Empty } from 'ant-design-vue'
-import { useSlots } from 'vue'
-import NoData from './image'
-import { omit } from 'lodash-es'
-import type { PropType, CSSProperties } from 'vue'
-
-const slots = useSlots()
-const renderArr = Object.keys(slots)
-
-const props = defineProps({
-  description: {
-    type: String,
-    default: '暂无数据',
-  },
-  image: {
-    type: String,
-    default: NoData,
-  },
-  imageStyle: {
-    type: Object as PropType<CSSProperties>,
-    default: () => {
-      return { height: '60px' }
-    },
-  },
-})
-
-const baseProps = omit(props, ...renderArr)
-</script>
-<style lang="less">
-.@{ant-prefix}-empty-description {
-  color: #b3b3b3;
-  font-size: 14px;
-}
-</style>

package/src/Empty/image.ts

@@ -1,3 +0,0 @@
-const img =
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAuCAYAAABu3ppsAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAWUSURBVHgB7ZoLTuNIEIY7vN8k4iWE0Don2LnBZG/AnoDMCbJ7gpk9wbInGOYGszfw3IAbxAghhAAR3m/Y+hpX1DF24gerzIz4JctOu92u/6/qqnaDMT84SqYP2N7ebjw9PdXlslwqlfzHx8c/q9Vqy+TAkCkIMWZdjNnAGDl8uf4gxgTNZpPfnhzvnO7BwMDAr4ODgxtzc3NGrs3Z2Vldjm2598nkQCEPiJHe8PBwE2PGxsbM6empOT4+DkJDa2KoGRkZafe/v783Nzc3tm12dtZMTEzYtt3d3ZbneRWTA0U9sDY6OmqNv729RU0jv71yuezRloTz83OImqurK0vEPHsvF4oSKA8NDVmDTk5OTKVSsar2wtTUlD1arZbZ39+nKTA5MWCKISAkUHNhYSGV8S7EU2ZyctJeEo4mB4oS2Lq+vrbGu7GeBZCQMCIbfTY5UIiATNQGBnSL9zQIx6iJF/4wGZE7C2kGWlpaMsyDosCTMh9akoarWWpCbg+I+h/JQEWMlwJmU+/l5aX1ohxko3qWMTK/XZSvifHvRanazMxMxz1yOhMaw6gNvcjt7e3ZM6mUTMZZPNGQd7TEC5smBXqGUJgd1mSSvZdzTcKmTIHC2JWVlY6+R0dH1pDV1VVLBBJJgOTOzo4lifpUZQhIUbMJQYgE8s5N6feFym7SEgiXAKrympxtUWLQ8fFxI4PaAkTMLi4udjx7cHBgiSmWl5fb1xDjHvlfPQNJ2hiLvrRTF0jHIpQtjIRXSOSvOCIdBGRd8zeLLFRmEIxmoCgYGMXIHi4whoIWTa3hcsFeI4JLnAoO8MjFxYV9hrE58DTtkOCQa4j8I0S2XhDQrMLEpDjxMC+LK05xBHgRbXHg3uHhobm7uzPT09MmOnfAw8ODJe4C8fC4iGqJUrmlH5nqdyHh06c9y8gqOriyRk2Mxe2EEaRcYBB9ASFCVYVEtKjRhhAIw3UcWVUcb2GwjonhvAcy2CH9yhJ6H+W2b9QDqC9Mm0zKaOZgEA5erh7hJRz8dg1wf7tAOZ7XfnFZCvXpo3NFF4k6/5QwzxKO4okK9UJHWEO9uLSnCy+UIGeTaQBq0Y5auDlpKYFhGEFfDFNjaMfLJATGZjz6Qcw1OAra6SfzpS4/N6wHgiBAfS9NUcIIV1EGI/31epbnMJjnMF49pionGRwHvCRC+vIN8VtJwqcu7D+zFEaltHDnCcYRWnhRJ70aTPxyxkANC/pkMTju3XwESRhVdQ5QqBqiYg01sxAB7jzB/byAw1X4NdZLQOcK4SwEPnTUASGyKS9aJ6bzEKGyYjjGRqt0XqinMZpz2Ma3N4XNj8oSaCjAkPBISwQPaErlTAjlVV1V5swEJ4UyFmHOpJcJ/O1FHXBBRqAzxUWJQCIpUwGqKM/xDLGOWnEFKw5RlRmH9zBOL/G6ShQlgsp4iILnEkFtJiv3KHzMA5TqRiCqMs+oyoRwWqTycZQIhQRlNH3iIdRqDyptEHErLtc60TGaMQmNNCoXJhAlgrIuEQyan5+3YQRQkL4QA9zXIpZH5VcjEEcEo+PWSShLGKEy6TRuVfsaKJScMTopzjX//98ouq3Sd7wR6DfeCPQbPx8Byrq7NfK9I1oHNsM9ynVZ13jRNU+/wGcroiJu+CXY3jtNrOd8qUm5Z//TEnHXOklgecEaiGVFUbB2wtgwIthK2ZLjX7n11d3gSrO1aInIUsBj3dPtjxhFCERVFgKBGizHVtKOdeoVVUikIcuHdywf4ohkJeCqzEo3/NJ6oXI3ZF4SsjuNR4SI3Z12dxR6EYhRmdD4Yp43qfw8fysu9AcOOX3iG5ovNVacfE1FCXRR2Xf3OPOi8KJciYhX1vWTkg8dV2W591XOanSuv8gn4dX+1cAh8gu/ReVv5tlg37whGf8BDgTT6KlQOV4AAAAASUVORK5CYII=';
-export default img;

package/src/Empty/index.ts

@@ -1,2 +0,0 @@
-import Empty from './Empty.vue'
-export default Empty;

package/src/FullPage/FullPage.vue

@@ -1,30 +0,0 @@
-<template>
-  <div
-    class="full-page-warp"
-    ref="fullPage"
-    :style="{ minHeight: `calc(100vh - ${y + 24}px)` }"
-  >
-    <div class="full-page-warp-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" name="FullPage">
-import { ref } from 'vue'
-import { useElementBounding } from '@vueuse/core'
-
-const fullPage = ref(null)
-const { y } = useElementBounding(fullPage)
-</script>
-
-<style scoped lang="less">
-.full-page-warp {
-  background: #fff;
-  display: flex;
-
-  .full-page-warp-content {
-    width: 100%;
-  }
-}
-</style>

package/src/FullPage/index.ts

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

package/src/Icon/icon.tsx

@@ -1,40 +0,0 @@
-import { defineComponent, createVNode, watchEffect } from 'vue';
-import * as aIcon from '@ant-design/icons-vue';
-import { createFromIconfontCN } from '@ant-design/icons-vue';
-import { useIcon } from '@jetlinks-web/hooks'
-
-let MyIcon = createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/c/font_3183515_i7oma42he.js', // 在 iconfont.cn 上生成
-});
-
-const AntdIcon = (props: { type: string }) => createVNode(aIcon[props.type]);
-
-const Icon = (props: any) =>
-    Object.keys(aIcon).includes(props.type) ? (
-        <AntdIcon {...props} />
-    ) : (
-        <MyIcon {...props} />
-    );
-
-export default defineComponent({
-    name: 'AIcon',
-    // 传入组件配置
-    props: ['type', 'scriptUrl', 'class'],
-    emits: ['click'],
-    setup(props, {emit, attrs}) {
-        const config = useIcon()
-        watchEffect(() => {
-            const url = props.scriptUrl || config.scriptUrl
-            if (url) {
-                MyIcon = createFromIconfontCN({
-                    scriptUrl: url,
-                });
-            }
-        });
-
-        const click = () => {
-            emit('click');
-        };
-        return () => <Icon {...props} style={attrs.style} onClick={click}/>;
-    },
-});