@tmagic/tdesign-vue-next-adapter 1.3.15 → 1.4.0-beta.1

package/dist/tmagic-tdesign-vue-next-adapter.js

@@ -1,7 +1,7 @@
 import { defineComponent, computed, openBlock, createBlock, unref, createElementBlock, renderSlot, createSlots, withCtx, createElementVNode, ref, h } from 'vue';
-import { DateRangePicker, DatePicker, Textarea, Input, LoadingPlugin, Tree, MessagePlugin, DialogPlugin, Badge, Button, Card, Cascader, Checkbox, CheckboxGroup, Col, Collapse, CollapsePanel, ColorPicker, Dialog, Divider, Drawer, Dropdown, DropdownItem, Form, FormItem, InputNumber, Option, OptionGroup, Pagination, Popup, Radio, RadioButton, RadioGroup, Row, Select, StepItem, Steps, Switch, Table, TabPanel, Tabs, Tag, TimePicker, Tooltip, Upload } from 'tdesign-vue-next';
+import { DateRangePicker, DatePicker, Textarea, Input, Popup, Tree, MessagePlugin, DialogPlugin, Badge, Button, Card, Cascader, Checkbox, CheckboxGroup, Col, Collapse, CollapsePanel, ColorPicker, Dialog, Divider, Drawer, Dropdown, DropdownItem, Form, FormItem, InputNumber, Option, OptionGroup, Pagination, Radio, RadioButton, RadioGroup, Row, Select, StepItem, Steps, Switch, Table, TabPanel, Tabs, Tag, TimePicker, Tooltip, Upload } from 'tdesign-vue-next';
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     type: { default: "date" },
@@ -74,7 +74,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const _sfc_main$4 = {};
+const _sfc_main$5 = {};
 
 const _hoisted_1$1 = { style: {"width":"1em","height":"1em"} };
 
@@ -83,9 +83,9 @@ function _sfc_render$2(_ctx, _cache) {
     renderSlot(_ctx.$slots, "default")
   ]))
 }
-const Icon = /*#__PURE__*/_export_sfc(_sfc_main$4, [['render',_sfc_render$2]]);
+const Icon = /*#__PURE__*/_export_sfc(_sfc_main$5, [['render',_sfc_render$2]]);
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "Input",
   props: {
     modelValue: {},
@@ -147,35 +147,42 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const INSTANCE_KEY = Symbol("TdesignLoading");
-const createInstance = (el) => el[INSTANCE_KEY] = {
-  instance: LoadingPlugin({
-    attach: () => el,
-    showOverlay: true,
-    size: "20px"
-  })
-};
-const vLoading = {
-  mounted(el, binding) {
-    const { value } = binding;
-    if (value) {
-      createInstance(el);
-    }
-  },
-  updated(el, binding) {
-    const instance = el[INSTANCE_KEY];
-    if (binding.oldValue !== binding.value) {
-      if (binding.value && !binding.oldValue) {
-        createInstance(el);
-      } else {
-        instance?.instance.hide();
-      }
-    }
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Popover",
+  props: {
+    placement: {},
+    width: {},
+    title: {},
+    trigger: {},
+    effect: {},
+    content: {},
+    disabled: { type: Boolean },
+    popperClass: {},
+    visible: { type: [Boolean, null] }
   },
-  unmounted(el) {
-    el[INSTANCE_KEY]?.instance.hide();
+  setup(__props) {
+    const props = __props;
+    const placement = computed(() => props.placement);
+    const trigger = computed(() => props.trigger);
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Popup), {
+        placement: placement.value,
+        trigger: trigger.value,
+        disabled: _ctx.disabled,
+        visible: _ctx.visible,
+        overlayClassName: _ctx.popperClass
+      }, {
+        content: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "reference")
+        ]),
+        _: 3
+      }, 8, ["placement", "trigger", "disabled", "visible", "overlayClassName"]);
+    };
   }
-};
+});
 
 const _sfc_main$2 = {};
 
@@ -328,7 +335,6 @@ const adapter = {
       console.log(msg);
     }
   },
-  loading: vLoading,
   components: {
     badge: {
       component: Badge,
@@ -421,7 +427,7 @@ const adapter = {
       })
     },
     datePicker: {
-      component: _sfc_main$5,
+      component: _sfc_main$6,
       props: (props) => props
     },
     dialog: {
@@ -446,7 +452,7 @@ const adapter = {
       component: Drawer,
       props: (props) => ({
         visible: props.modelValue,
-        size: props.size,
+        size: typeof props.size === "number" ? `${props.size}px` : props.size,
         closeOnEscKeydown: props.closeOnPressEscape,
         closeOnOverlayClick: props.closeOnClickModal,
         attach: props.appendToBody ? "body" : void 0,
@@ -508,7 +514,7 @@ const adapter = {
       props: () => ({})
     },
     input: {
-      component: _sfc_main$3,
+      component: _sfc_main$4,
       props: (props) => props
     },
     inputNumber: {
@@ -546,19 +552,14 @@ const adapter = {
       })
     },
     popover: {
-      component: Popup,
-      props: (props) => ({
-        placement: props.placement,
-        trigger: props.trigger,
-        content: props.content,
-        disabled: props.disabled,
-        overlayClassName: props.popperClass
-      })
+      component: _sfc_main$3,
+      props: (props) => props
     },
     radio: {
       component: Radio,
       props: (props) => ({
-        label: props.label
+        label: props.label,
+        value: props.value
       })
     },
     radioButton: {
@@ -664,6 +665,7 @@ const adapter = {
     tooltip: {
       component: Tooltip,
       props: (props) => ({
+        ...props,
         placement: props.placement,
         content: props.content
       })

package/dist/tmagic-tdesign-vue-next-adapter.umd.cjs

@@ -4,7 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.TMagicTdesignVueNextAdapter = factory(global.vue, global.tdesignVueNext));
 })(this, (function (vue, tdesignVueNext) { 'use strict';
 
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "DatePicker",
     props: {
       type: { default: "date" },
@@ -77,7 +77,7 @@
     return target;
   };
 
-  const _sfc_main$4 = {};
+  const _sfc_main$5 = {};
 
   const _hoisted_1$1 = { style: {"width":"1em","height":"1em"} };
 
@@ -86,9 +86,9 @@
       vue.renderSlot(_ctx.$slots, "default")
     ]))
   }
-  const Icon = /*#__PURE__*/_export_sfc(_sfc_main$4, [['render',_sfc_render$2]]);
+  const Icon = /*#__PURE__*/_export_sfc(_sfc_main$5, [['render',_sfc_render$2]]);
 
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "Input",
     props: {
       modelValue: {},
@@ -150,35 +150,42 @@
     }
   });
 
-  const INSTANCE_KEY = Symbol("TdesignLoading");
-  const createInstance = (el) => el[INSTANCE_KEY] = {
-    instance: tdesignVueNext.LoadingPlugin({
-      attach: () => el,
-      showOverlay: true,
-      size: "20px"
-    })
-  };
-  const vLoading = {
-    mounted(el, binding) {
-      const { value } = binding;
-      if (value) {
-        createInstance(el);
-      }
-    },
-    updated(el, binding) {
-      const instance = el[INSTANCE_KEY];
-      if (binding.oldValue !== binding.value) {
-        if (binding.value && !binding.oldValue) {
-          createInstance(el);
-        } else {
-          instance?.instance.hide();
-        }
-      }
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+    __name: "Popover",
+    props: {
+      placement: {},
+      width: {},
+      title: {},
+      trigger: {},
+      effect: {},
+      content: {},
+      disabled: { type: Boolean },
+      popperClass: {},
+      visible: { type: [Boolean, null] }
     },
-    unmounted(el) {
-      el[INSTANCE_KEY]?.instance.hide();
+    setup(__props) {
+      const props = __props;
+      const placement = vue.computed(() => props.placement);
+      const trigger = vue.computed(() => props.trigger);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(tdesignVueNext.Popup), {
+          placement: placement.value,
+          trigger: trigger.value,
+          disabled: _ctx.disabled,
+          visible: _ctx.visible,
+          overlayClassName: _ctx.popperClass
+        }, {
+          content: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "reference")
+          ]),
+          _: 3
+        }, 8, ["placement", "trigger", "disabled", "visible", "overlayClassName"]);
+      };
     }
-  };
+  });
 
   const _sfc_main$2 = {};
 
@@ -331,7 +338,6 @@
         console.log(msg);
       }
     },
-    loading: vLoading,
     components: {
       badge: {
         component: tdesignVueNext.Badge,
@@ -424,7 +430,7 @@
         })
       },
       datePicker: {
-        component: _sfc_main$5,
+        component: _sfc_main$6,
         props: (props) => props
       },
       dialog: {
@@ -449,7 +455,7 @@
         component: tdesignVueNext.Drawer,
         props: (props) => ({
           visible: props.modelValue,
-          size: props.size,
+          size: typeof props.size === "number" ? `${props.size}px` : props.size,
           closeOnEscKeydown: props.closeOnPressEscape,
           closeOnOverlayClick: props.closeOnClickModal,
           attach: props.appendToBody ? "body" : void 0,
@@ -511,7 +517,7 @@
         props: () => ({})
       },
       input: {
-        component: _sfc_main$3,
+        component: _sfc_main$4,
         props: (props) => props
       },
       inputNumber: {
@@ -549,19 +555,14 @@
         })
       },
       popover: {
-        component: tdesignVueNext.Popup,
-        props: (props) => ({
-          placement: props.placement,
-          trigger: props.trigger,
-          content: props.content,
-          disabled: props.disabled,
-          overlayClassName: props.popperClass
-        })
+        component: _sfc_main$3,
+        props: (props) => props
       },
       radio: {
         component: tdesignVueNext.Radio,
         props: (props) => ({
-          label: props.label
+          label: props.label,
+          value: props.value
         })
       },
       radioButton: {
@@ -667,6 +668,7 @@
       tooltip: {
         component: tdesignVueNext.Tooltip,
         props: (props) => ({
+          ...props,
           placement: props.placement,
           content: props.content
         })

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.15",
+  "version": "1.4.0-beta.1",
   "name": "@tmagic/tdesign-vue-next-adapter",
   "type": "module",
   "sideEffects": [
@@ -32,26 +32,28 @@
     "typescript"
   ],
   "dependencies": {
-    "@tmagic/design": "1.3.15",
-    "tdesign-vue-next": "^1.3.4",
-    "vue": "^3.3.8"
+    "@tmagic/design": "1.4.0-beta.1",
+    "tdesign-vue-next": "^1.8.1",
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.15",
-    "tdesign-vue-next": "^1.3.4",
-    "vue": "^3.3.8"
+    "@tmagic/design": "1.4.0-beta.1",
+    "tdesign-vue-next": "^1.8.1",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.3.8",
+    "@vue/compiler-sfc": "^3.4.21",
     "@types/node": "^18.19.0",
     "rimraf": "^3.0.2",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
-    "clear:type": "rimraf ./types"
+    "clear:type": "rimraf ./types",
+    "type:check": "vue-tsc --noEmit"
   }
 }

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/index.ts

@@ -23,7 +23,6 @@ import {
   Option as TOption,
   OptionGroup as TOptionGroup,
   Pagination as TPagination,
-  Popup as TPopup,
   Radio as TRadio,
   RadioButton as TRadioButton,
   RadioGroup as TRadioGroup,
@@ -87,7 +86,7 @@ import type {
 import DatePicker from './DatePicker.vue';
 import Icon from './Icon.vue';
 import Input from './Input.vue';
-import { vLoading } from './loading';
+import Popover from './Popover.vue';
 import Scrollbar from './Scrollbar.vue';
 import TableColumn from './TableColumn.vue';
 import Tree from './Tree.vue';
@@ -109,7 +108,6 @@ const adapter: any = {
       console.log(msg);
     },
   },
-  loading: vLoading,
   components: {
     badge: {
       component: TBadge,
@@ -240,7 +238,7 @@ const adapter: any = {
       component: TDrawer,
       props: (props: DrawerProps) => ({
         visible: props.modelValue,
-        size: props.size,
+        size: typeof props.size === 'number' ? `${props.size}px` : props.size,
         closeOnEscKeydown: props.closeOnPressEscape,
         closeOnOverlayClick: props.closeOnClickModal,
         attach: props.appendToBody ? 'body' : undefined,
@@ -352,20 +350,15 @@ const adapter: any = {
     },
 
     popover: {
-      component: TPopup,
-      props: (props: PopoverProps) => ({
-        placement: props.placement,
-        trigger: props.trigger,
-        content: props.content,
-        disabled: props.disabled,
-        overlayClassName: props.popperClass,
-      }),
+      component: Popover,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
       component: TRadio,
       props: (props: RadioProps) => ({
         label: props.label,
+        value: props.value,
       }),
     },
 
@@ -486,6 +479,7 @@ const adapter: any = {
     tooltip: {
       component: TTooltip,
       props: (props: TooltipProps) => ({
+        ...props,
         placement: props.placement,
         content: props.content,
       }),

package/src/loading.ts

@@ -1,45 +0,0 @@
-import type { Directive } from 'vue';
-import { LoadingInstance, LoadingPlugin } from 'tdesign-vue-next';
-
-export type LoadingBinding = boolean;
-
-const INSTANCE_KEY = Symbol('TdesignLoading');
-
-export interface ElementLoading extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    instance: LoadingInstance;
-  };
-}
-
-const createInstance = (el: ElementLoading) =>
-  (el[INSTANCE_KEY] = {
-    instance: LoadingPlugin({
-      attach: () => el,
-      showOverlay: true,
-      size: '20px',
-    }),
-  });
-
-export const vLoading: Directive<ElementLoading, LoadingBinding> = {
-  mounted(el, binding) {
-    const { value } = binding;
-    if (value) {
-      createInstance(el);
-    }
-  },
-
-  updated(el, binding) {
-    const instance = el[INSTANCE_KEY];
-    if (binding.oldValue !== binding.value) {
-      if (binding.value && !binding.oldValue) {
-        createInstance(el);
-      } else {
-        instance?.instance.hide();
-      }
-    }
-  },
-
-  unmounted(el) {
-    el[INSTANCE_KEY]?.instance.hide();
-  },
-};

package/types/loading.d.ts

@@ -1,11 +0,0 @@
-import type { Directive } from 'vue';
-import { LoadingInstance } from 'tdesign-vue-next';
-export type LoadingBinding = boolean;
-declare const INSTANCE_KEY: unique symbol;
-export interface ElementLoading extends HTMLElement {
-    [INSTANCE_KEY]?: {
-        instance: LoadingInstance;
-    };
-}
-export declare const vLoading: Directive<ElementLoading, LoadingBinding>;
-export {};