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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.7",
+  "version": "1.4.8",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "sideEffects": [
@@ -16,6 +16,10 @@
     },
     "./*": "./*"
   },
+  "files": [
+    "dist",
+    "types"
+  ],
   "license": "Apache-2.0",
   "engines": {
     "node": ">=18"
@@ -36,14 +40,14 @@
     "@vue/compiler-sfc": "^3.4.27",
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
-    "vite": "^5.2.11",
-    "vue-tsc": "^2.0.16"
+    "vite": "^5.3.1",
+    "vue-tsc": "^2.0.19"
   },
   "peerDependencies": {
     "tdesign-vue-next": "^1.8.1",
     "vue": "^3.4.27",
     "typescript": "*",
-    "@tmagic/design": "1.4.7"
+    "@tmagic/design": "1.4.8"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/DatePicker.vue

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

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

package/src/Input.vue

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

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

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

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

package/src/Tree.vue

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

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

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

package/tsconfig.build.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
-    "declarationDir": "types",
-    "forceConsistentCasingInFileNames": true,
-    "paths": {},
-  },
-  "include": [
-		"src"
-	],
-}