@tmagic/tdesign-vue-next-adapter 1.4.8 → 1.4.9

package/package.json

@@ -1,10 +1,7 @@
 {
-  "version": "1.4.8",
+  "version": "1.4.9",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
-  "sideEffects": [
-    "dist/*"
-  ],
   "main": "dist/tmagic-tdesign-vue-next-adapter.umd.cjs",
   "module": "dist/tmagic-tdesign-vue-next-adapter.js",
   "types": "types/index.d.ts",
@@ -18,7 +15,8 @@
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "src"
   ],
   "license": "Apache-2.0",
   "engines": {
@@ -47,7 +45,7 @@
     "tdesign-vue-next": "^1.8.1",
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.8"
+    "@tmagic/design": "1.4.9"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/DatePicker.vue

@@ -0,0 +1,66 @@
+<template>
+  <TDateRangePicker
+    v-if="type.endsWith('range')"
+    :modelValue="modelValue"
+    :mode="mode"
+    :placeholder="[startPlaceholder || '', endPlaceholder || '']"
+    :disabled="disabled"
+    :size="size === 'default' ? 'medium' : size"
+    :separator="rangeSeparator"
+    :format="format"
+    :valueType="valueFormat === 's' ? 'time-stamp' : valueFormat"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  />
+  <TDatePicker
+    v-else
+    :modelValue="modelValue"
+    :mode="mode"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :size="size === 'default' ? 'medium' : size"
+    :format="format"
+    :enableTimePicker="type.includes('time')"
+    :valueType="valueFormat === 's' ? 'time-stamp' : valueFormat"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { DatePicker as TDatePicker, DateRangePicker as TDateRangePicker } from 'tdesign-vue-next';
+
+import type { DatePickerProps } from '@tmagic/design';
+
+const props = withDefaults(
+  defineProps<
+    DatePickerProps & {
+      valueFormat: any;
+    }
+  >(),
+  {
+    type: 'date',
+  },
+);
+
+const mode = computed(() => {
+  const map: any = {
+    datetime: 'date',
+    daterange: 'date',
+    monthrange: 'month',
+    datetimerange: 'date',
+  };
+  return map[props.type] || props.type;
+});
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+</script>

package/src/Icon.vue

@@ -0,0 +1,7 @@
+<template>
+  <i>
+    <slot></slot>
+  </i>
+</template>
+
+<script setup lang="ts"></script>

package/src/Input.vue

@@ -0,0 +1,55 @@
+<template>
+  <TTextarea
+    v-if="type === 'textarea'"
+    :modelValue="modelValue"
+    :size="size === 'default' ? 'medium' : size"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    @keypress="inputHandler"
+    @change="changeHandler"
+  ></TTextarea>
+  <TInput
+    v-else
+    :modelValue="modelValue"
+    :size="size === 'default' ? 'medium' : size"
+    :clearable="clearable"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    @keypress="inputHandler"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
+    <template #prefix-icon v-if="$slots.prefix">
+      <slot name="prefix"></slot>
+    </template>
+    <template #suffix v-if="$slots.suffix">
+      <slot name="suffix"></slot>
+    </template>
+  </TInput>
+</template>
+
+<script lang="ts" setup>
+import { Input as TInput, Textarea as TTextarea } from 'tdesign-vue-next';
+
+import type { InputProps } from '@tmagic/design';
+
+defineProps<
+  InputProps & {
+    modelValue: string;
+  }
+>();
+
+const emit = defineEmits(['change', 'input', 'update:modelValue']);
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+
+const inputHandler = (...args: any[]) => {
+  emit('input', ...args);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+</script>

package/src/Popover.vue

@@ -0,0 +1,27 @@
+<template>
+  <TPopup
+    :placement="placement"
+    :trigger="trigger"
+    :disabled="disabled"
+    :visible="visible"
+    :overlayClassName="popperClass"
+  >
+    <slot name="reference"></slot>
+
+    <template #content>
+      <slot></slot>
+    </template>
+  </TPopup>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Popup as TPopup, type PopupPlacement } from 'tdesign-vue-next';
+
+import type { PopoverProps } from '@tmagic/design';
+
+const props = defineProps<PopoverProps>();
+
+const placement = computed(() => props.placement as PopupPlacement);
+const trigger = computed(() => props.trigger as 'click' | 'focus' | 'mousedown' | 'context-menu' | 'hover');
+</script>

package/src/Scrollbar.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="tdesign-scrollbar" style="overflow: hidden; position: relative; height: 100%">
+    <div class="tdesign-scrollbar-wrap" style="overflow: auto; height: 100%">
+      <div class="tdesign-scrollbar-view">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

package/src/TableColumn.vue

@@ -0,0 +1,5 @@
+<template>
+  <div></div>
+</template>
+
+<script setup lang="ts"></script>

package/src/Tree.vue

@@ -0,0 +1,103 @@
+<template>
+  <TTree
+    ref="tree"
+    :data="data"
+    :empty="emptyText"
+    :keys="nodeKeys"
+    :load="loadChildren"
+    :activable="highlightCurrent"
+    :expandAll="defaultExpandAll"
+    :expandParent="autoExpandParent"
+    :defaultExpanded="defaultExpandedKeys"
+    :actived="currentNodeKey"
+    :filter="filterNode"
+    :expandMutex="accordion"
+    :draggable="draggable"
+    :icon="iconRender"
+    :lazy="lazy"
+    :allowDrag="allowDrag"
+    :allowDrop="allowDrop"
+    :onClick="nodeClickHandler"
+    :onExpand="handleExpand"
+    @contextmenu="contextmenu"
+  ></TTree>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, ref } from 'vue';
+import { Tree as TTree, TreeNodeModel, TreeNodeValue } from 'tdesign-vue-next';
+
+import type { TreeProps } from '@tmagic/design';
+
+const props = defineProps<TreeProps>();
+
+const nodeKeys = computed(() => ({
+  value: props.props?.value || 'value',
+  label: props.props?.label || 'label',
+  children: props.props?.children || 'children',
+}));
+
+const loadChildren = (node: TreeNodeModel<any>) =>
+  props.load
+    ? new Promise((resolve) => {
+        props.load(node, resolve);
+      })
+    : undefined;
+
+let filterValue: any;
+
+const filterNode = (node: TreeNodeModel<any>) => props.filterNodeMethod?.(filterValue, node.data, node);
+
+const iconRender = () => props.icon && h(props.icon);
+
+const emit = defineEmits([
+  'node-click',
+  'node-contextmenu',
+  'node-drag-end',
+  'node-collapse',
+  'node-expand',
+  'check',
+  'mousedown',
+  'mouseup',
+]);
+
+const nodeClickHandler = (context: { node: TreeNodeModel<any>; e: MouseEvent }) => {
+  emit('node-click', context.node.data, context.node, context, context.e);
+};
+
+const contextmenu = (...args: any[]) => {
+  emit('node-contextmenu', ...args);
+};
+
+const handleExpand = (value: Array<TreeNodeValue>, context: { node: TreeNodeModel<any>; e: MouseEvent }) => {
+  emit('node-expand', context.node.data, context.node);
+};
+
+const tree = ref<InstanceType<typeof TTree>>();
+
+defineExpose({
+  getData() {
+    return tree.value?.data;
+  },
+
+  getStore() {
+    return tree.value?.store;
+  },
+
+  filter(value: any) {
+    filterValue = value;
+  },
+
+  getNode(...args: any[]) {
+    return tree.value?.getNode(...args);
+  },
+
+  setCheckedKeys(...args: any[]) {
+    console.log(args);
+  },
+
+  setCurrentKey(...args: any[]) {
+    console.log(args);
+  },
+});
+</script>

package/src/index.ts

@@ -0,0 +1,527 @@
+import { h } from 'vue';
+import {
+  Badge as TBadge,
+  Button as TButton,
+  Card as TCard,
+  Cascader as TCascader,
+  Checkbox as TCheckbox,
+  CheckboxGroup as TCheckboxGroup,
+  Col as TCol,
+  Collapse as TCollapse,
+  CollapsePanel as TCollapsePanel,
+  ColorPicker as TColorPicker,
+  Dialog as TDialog,
+  DialogPlugin,
+  Divider as TDivider,
+  Drawer as TDrawer,
+  Dropdown as TDropdown,
+  DropdownItem as TDropdownItem,
+  Form as TForm,
+  FormItem as TFormItem,
+  InputNumber as TInputNumber,
+  MessagePlugin,
+  Option as TOption,
+  OptionGroup as TOptionGroup,
+  Pagination as TPagination,
+  Radio as TRadio,
+  RadioButton as TRadioButton,
+  RadioGroup as TRadioGroup,
+  Row as TRow,
+  Select as TSelect,
+  StepItem as TStepItem,
+  Steps as TSteps,
+  Switch as TSwitch,
+  Table as TTable,
+  TabPanel as TTabPanel,
+  Tabs as TTabs,
+  Tag as TTag,
+  TimePicker as TTimePicker,
+  Tooltip as TTooltip,
+  TreeNodeModel,
+  Upload as TUpload,
+} from 'tdesign-vue-next';
+
+import type {
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  IconProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from '@tmagic/design';
+
+import DatePicker from './DatePicker.vue';
+import Icon from './Icon.vue';
+import Input from './Input.vue';
+import Popover from './Popover.vue';
+import Scrollbar from './Scrollbar.vue';
+import TableColumn from './TableColumn.vue';
+import Tree from './Tree.vue';
+
+const adapter: any = {
+  message: MessagePlugin,
+  messageBox: {
+    alert: (msg: string) => {
+      DialogPlugin.alert({
+        body: msg,
+      });
+    },
+    confirm: (msg: string) => {
+      DialogPlugin.confirm({
+        body: msg,
+      });
+    },
+    close: (msg: string) => {
+      console.log(msg);
+    },
+  },
+  components: {
+    badge: {
+      component: TBadge,
+      props: (props: BadgeProps) => ({
+        count: props.value,
+        dot: props.isDot,
+        maxCount: props.max,
+      }),
+    },
+
+    button: {
+      component: TButton,
+      props: (props: ButtonProps) => ({
+        theme: props.type,
+        size: props.size === 'default' ? 'medium' : props.size,
+        icon: () => (props.icon ? h(props.icon) : null),
+        variant: props.link || props.text ? 'text' : 'base',
+        shape: props.circle ? 'circle' : 'rectangle',
+      }),
+    },
+
+    card: {
+      component: TCard,
+      props: (props: CardProps) => ({
+        shadow: props.shadow !== 'never',
+        hoverShadow: props.shadow === 'hover',
+        header: props.header,
+      }),
+    },
+
+    cascader: {
+      component: TCascader,
+      props: (props: CascaderProps) => ({
+        modelValue: props.modelValue,
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        clearable: props.clearable,
+        filterable: props.filterable,
+        options: props.options,
+        size: props.size === 'default' ? 'medium' : props.size,
+        trigger: props.props.expandTrigger,
+        multiple: props.props.multiple,
+        checkStrictly: props.props.checkStrictly,
+        valueType: typeof props.props.emitPath === 'undefined' || props.props.emitPath === true ? 'full' : 'single',
+        lazy: props.props.lazy,
+      }),
+    },
+
+    checkbox: {
+      component: TCheckbox,
+      props: (props: CheckboxProps) => ({
+        modelValue: props.modelValue,
+        label: props.label,
+        value: props.value,
+        disabled: props.disabled,
+      }),
+    },
+
+    checkboxGroup: {
+      component: TCheckboxGroup,
+      props: (props: CheckboxGroupProps) => ({
+        modelValue: props.modelValue,
+        label: props.label,
+        disabled: props.disabled,
+      }),
+    },
+
+    col: {
+      component: TCol,
+      props: (props: ColProps) => ({
+        span: props.span,
+      }),
+    },
+
+    collapse: {
+      component: TCollapse,
+      props: (props: CollapseProps) => ({
+        value: props.modelValue,
+        expandIconPlacement: 'right',
+      }),
+    },
+
+    collapseItem: {
+      component: TCollapsePanel,
+      props: (props: CollapseItemProps) => ({
+        value: props.name,
+        header: props.title,
+        disabled: props.disabled,
+      }),
+    },
+
+    colorPicker: {
+      component: TColorPicker,
+      props: (props: ColorPickerProps) => ({
+        modelValue: props.modelValue,
+        disabled: props.disabled,
+        size: props.size === 'default' ? 'medium' : props.size,
+        enableAlpha: props.showAlpha,
+        formate: props.showAlpha ? 'RGBA' : 'RGB',
+      }),
+    },
+
+    datePicker: {
+      component: DatePicker,
+      props: (props: DatePickerProps) => props,
+    },
+
+    dialog: {
+      component: TDialog,
+      props: (props: DialogProps) => ({
+        visible: props.modelValue,
+        attach: props.appendToBody ? 'body' : '',
+        header: props.title,
+        width: props.width,
+        mode: props.fullscreen ? 'full-screen' : 'modal',
+        closeOnOverlayClick: props.closeOnClickModal,
+      }),
+    },
+
+    divider: {
+      component: TDivider,
+      props: (props: any) => ({
+        layout: props.direction,
+        content: props.contentPosition,
+      }),
+    },
+
+    drawer: {
+      component: TDrawer,
+      props: (props: DrawerProps) => ({
+        visible: props.modelValue,
+        size: typeof props.size === 'number' ? `${props.size}px` : props.size,
+        closeOnEscKeydown: props.closeOnPressEscape,
+        closeOnOverlayClick: props.closeOnClickModal,
+        attach: props.appendToBody ? 'body' : undefined,
+        placement: {
+          rtl: 'right',
+          ltr: 'left',
+          ttb: 'top',
+          bt: 'bottom',
+        }[props.direction as string],
+      }),
+    },
+
+    dropdown: {
+      component: TDropdown,
+      props: (props: DropdownProps) => ({
+        maxHeight: props.maxHeight,
+        disabled: props.disable,
+        direction: props.placement,
+        trigger: props.trigger,
+        hideAfterItemClick: props.hideOnClick,
+        popupProps: {
+          overlayClassName: props.popperClass,
+          ...(props.popperOptions || {}),
+        },
+      }),
+    },
+
+    dropdownItem: {
+      component: TDropdownItem,
+      props: (props: DropdownItemProps) => ({
+        disabled: props.disabled,
+        divider: props.divided,
+        prefixIcon: props.icon && (() => h(props.icon)),
+        onClick: props.command?.(),
+      }),
+    },
+
+    dropdownMenu: {
+      component: TDropdown,
+      props: () => ({}),
+    },
+
+    form: {
+      component: TForm,
+      props: (props: FormProps) => ({
+        data: props.model,
+        labelWidth: props.labelWidth,
+        disabled: props.disabled,
+        labelAlign: props.labelPosition,
+        layout: props.inline ? 'inline' : 'vertical',
+      }),
+    },
+
+    formItem: {
+      component: TFormItem,
+      props: (props: FormItemProps) => ({
+        labelWidth: props.labelWidth,
+        name: props.prop,
+        rules: props.rules,
+      }),
+    },
+
+    icon: {
+      component: Icon,
+      props: (props: IconProps) => props,
+    },
+
+    input: {
+      component: Input,
+      props: (props: InputProps) => props,
+    },
+
+    inputNumber: {
+      component: TInputNumber,
+      props: (props: InputNumberProps) => ({
+        modelValue: props.modelValue,
+        align: props.controlsPosition,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        step: props.step,
+        min: props.min,
+        max: props.max,
+        size: props.size === 'default' ? 'medium' : props.size,
+      }),
+    },
+
+    option: {
+      component: TOption,
+      props: (props: OptionProps) => ({
+        value: props.value,
+        label: props.label,
+        disabled: props.disabled,
+      }),
+    },
+
+    optionGroup: {
+      component: TOptionGroup,
+      props: (props: OptionGroupProps) => props,
+    },
+
+    pagination: {
+      component: TPagination,
+      props: (props: PaginationProps) => ({
+        current: props.curPage,
+        pageSizeOptions: props.pageSizes,
+        pageSize: props.pagesize,
+        total: props.total,
+      }),
+    },
+
+    popover: {
+      component: Popover,
+      props: (props: PopoverProps) => props,
+    },
+
+    radio: {
+      component: TRadio,
+      props: (props: RadioProps) => ({
+        label: props.label,
+        value: props.value,
+      }),
+    },
+
+    radioButton: {
+      component: TRadioButton,
+      props: (props: RadioButtonProps) => ({
+        label: props.label,
+      }),
+    },
+
+    radioGroup: {
+      component: TRadioGroup,
+      props: (props: RadioGroupProps) => ({
+        modelValue: props.modelValue,
+        disabled: props.disabled,
+        size: props.size === 'default' ? 'medium' : props.size,
+      }),
+    },
+
+    row: {
+      component: TRow,
+    },
+
+    scrollbar: {
+      component: Scrollbar,
+      props: () => ({}),
+    },
+
+    select: {
+      component: TSelect,
+      props: (props: SelectProps) => ({
+        modelValue: props.modelValue,
+        clearable: props.clearable,
+        filterable: props.filterable,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        multiple: props.multiple,
+        valueType: props.valueKey,
+        remoteMethod: props.onSearch,
+        size: props.size === 'default' ? 'medium' : props.size,
+        popupProps: {
+          overlayClassName: props.popperClass,
+        },
+      }),
+    },
+
+    step: {
+      component: TStepItem,
+      props: (props: StepProps) => ({
+        title: props.props,
+        value: props.status,
+      }),
+    },
+
+    steps: {
+      component: TSteps,
+      props: (props: StepsProps) => ({
+        current: props.active,
+      }),
+    },
+
+    switch: {
+      component: TSwitch,
+      props: (props: SwitchProps) => ({
+        modelValue: props.modelValue,
+        disabled: props.disabled,
+        label: props.label,
+        customValue: [props.activeValue ?? true, props.inactiveValue ?? false],
+        size: props.size === 'default' ? 'medium' : props.size,
+      }),
+    },
+
+    table: {
+      component: TTable,
+      props: (props: TableProps) => props,
+    },
+
+    tableColumn: {
+      component: TableColumn,
+      props: (props: TableColumnProps) => props,
+    },
+
+    tabPane: {
+      component: TTabPanel,
+      props: (props: TabPaneProps) => ({
+        label: props.label,
+        value: props.name,
+      }),
+    },
+
+    tabs: {
+      component: TTabs,
+      props: (props: TabsProps) => ({
+        addable: props.editable,
+        theme: props.type === 'card' ? 'card' : 'normal',
+        placement: props.tabPosition,
+        value: props.modelValue,
+      }),
+    },
+
+    tag: {
+      component: TTag,
+      props: (props: TagProps) => ({
+        theme: props.type ? props.type : 'default',
+      }),
+    },
+
+    timePicker: {
+      component: TTimePicker,
+      props: (props: TimePickerProps) => ({
+        modelValue: props.modelValue,
+        disabled: props.disabled,
+        size: props.size === 'default' ? 'medium' : props.size,
+        placeholder: props.placeholder,
+      }),
+    },
+
+    tooltip: {
+      component: TTooltip,
+      props: (props: TooltipProps) => ({
+        ...props,
+        placement: props.placement,
+        content: props.content,
+      }),
+    },
+
+    tree: {
+      component: Tree,
+      props: (props: TreeProps) => ({
+        ...props,
+        data: props.data,
+        draggable: props.draggable,
+        activable: props.highlightCurrent,
+        activeMultiple: props.highlightCurrent,
+        defaultActived: props.defaultCheckedKeys,
+        checkable: props.showCheckbox,
+        empty: props.emptyText,
+        expandAll: props.defaultExpandAll,
+        checkStrictly: props.checkStrictly,
+        load: props.load,
+        keys: props.props,
+      }),
+      listeners: {
+        click(context: { node: TreeNodeModel<any>; e: MouseEvent }) {
+          return {
+            node: context.node,
+            data: context.node.data,
+          };
+        },
+      },
+    },
+
+    upload: {
+      component: TUpload,
+      props: (props: UploadProps) => ({
+        action: props.action,
+        disabled: props.disabled,
+        autoUpload: props.autoUpload,
+      }),
+    },
+  },
+};
+
+export default adapter;

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}