@jetlinks-web/components 1.0.5 → 2.0.0

package/src/CheckButton/CheckButton.vue

@@ -0,0 +1,146 @@
+<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

@@ -0,0 +1,27 @@
+---
+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

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

package/src/ConfigProvider/context.ts

@@ -0,0 +1,17 @@
+import type {PropType} from "vue";
+import { configProviderProps } from 'ant-design-vue/lib/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

@@ -0,0 +1,42 @@
+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 +1,43 @@
-<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(
-  () => props.options,
-  () => {
-    if (props.options) {
-      nextTick(() => {
-        setOptions(props.options)
-      })
-    }
-  },
-  { immediate: true, deep: true },
-)
-</script>
-
-<style scoped>
-.echarts-warp {
-  width: 100%;
-  height: 100%;
-}
-</style>
+<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/Ellipsis/Ellipsis.vue

@@ -0,0 +1,182 @@
+<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

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

package/src/Empty/Empty.vue

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,3 @@
+const img =
+    'data:image/png;base64,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';
+export default img;

package/src/Empty/index.ts

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

package/src/FullPage/{index.vue → FullPage.vue}

@@ -1,27 +1,30 @@
-<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>
+<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

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

package/src/Icon/icon.tsx

@@ -0,0 +1,40 @@
+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}/>;
+    },
+});

package/src/Icon/index.ts

@@ -0,0 +1,3 @@
+import AIcon from './icon';
+
+export default AIcon;