jky-component-lib 0.0.142 → 0.0.144

package/dist/es/amap/AClusterMarker/AClusterMarker.vue.js

@@ -17,14 +17,13 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, useModel, watch, onUnmounted, renderSlot, mergeModels } from "vue";
+import { defineComponent, useModel, inject, onMounted, watch, onUnmounted, renderSlot, mergeModels } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
   name: "JkyAClusterMarker",
   inheritAttrs: false
 }), {
   __name: "AClusterMarker",
   props: /* @__PURE__ */ mergeModels({
-    map: {},
     points: {},
     gridSize: { default: 60 },
     styles: {},
@@ -45,8 +44,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     const props = __props;
     const emit = __emit;
     const modelValue = useModel(__props, "modelValue");
+    const amapContext = inject("amapContext");
     let clusterInstance = null;
     let mapInstance = null;
+    onMounted(() => {
+      if ((amapContext == null ? void 0 : amapContext.map) && props.enable) {
+        initCluster(amapContext.map);
+      }
+    });
     function initCluster(map) {
       if (!map || !window.AMap)
         return;
@@ -129,15 +134,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
       destroy,
       getClusterInstance: () => clusterInstance
     });
-    watch(
-      () => props.map,
-      (newMap) => {
-        if (newMap && props.enable) {
-          initCluster(newMap);
-        }
-      },
-      { immediate: true }
-    );
     watch(
       () => props.points,
       (newPoints) => {

package/dist/es/amap/style.css

@@ -1,7 +1,3 @@
 
-/* JkyAMarker 组件样式 - 参考高德官方示例 */
-.amap-icon img,
-.amap-marker-content img {
-  width: 25px;
-  height: 34px;
-}
+/* 轨迹回放组件不需要额外样式 */
+/* 所有样式通过 TailwindCSS 工具类或外部组件控制 */

package/dist/es/amap/style3.css

@@ -1,3 +1,7 @@
 
-/* 轨迹回放组件不需要额外样式 */
-/* 所有样式通过 TailwindCSS 工具类或外部组件控制 */
+/* JkyAMarker 组件样式 - 参考高德官方示例 */
+.amap-icon img,
+.amap-marker-content img {
+  width: 25px;
+  height: 34px;
+}

package/dist/es/animated/AnimatedTransition.vue.d.ts

@@ -0,0 +1,44 @@
+import { AnimatedTransitionProps, AnimatedTransitionSlots } from './types';
+type __VLS_Props = AnimatedTransitionProps;
+type __VLS_PublicProps = {
+    'visible'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<AnimatedTransitionSlots> & AnimatedTransitionSlots;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (value: boolean) => any;
+} & {
+    afterEnter: () => any;
+    afterLeave: () => any;
+    beforeEnter: () => any;
+    enterCancelled: () => any;
+    beforeLeave: () => any;
+    leaveCancelled: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onAfterEnter?: (() => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onBeforeEnter?: (() => any) | undefined;
+    onEnterCancelled?: (() => any) | undefined;
+    onBeforeLeave?: (() => any) | undefined;
+    onLeaveCancelled?: (() => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    name: import('./types').AnimationName | string;
+    visible: boolean;
+    duration: number;
+    mode: "if" | "show";
+    direction: import('./types').AnimationDirection;
+    enabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/animated/AnimatedTransition.vue.js

@@ -0,0 +1,99 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, useModel, computed, openBlock, createBlock, Transition, withCtx, withDirectives, createElementBlock, normalizeStyle, renderSlot, vShow, createCommentVNode, mergeModels } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyAnimatedTransition"
+}), {
+  __name: "AnimatedTransition",
+  props: /* @__PURE__ */ mergeModels({
+    name: { default: "fade" },
+    duration: { default: 300 },
+    direction: { default: "right" },
+    enabled: { type: Boolean, default: true },
+    visible: { type: Boolean, default: true },
+    mode: { default: "if" }
+  }, {
+    "visible": __spreadValues({ type: Boolean }, { default: true }),
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["beforeEnter", "afterEnter", "enterCancelled", "beforeLeave", "afterLeave", "leaveCancelled"], ["update:visible"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = useModel(__props, "visible");
+    function capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    const activeClass = computed(() => {
+      const { name, direction } = props;
+      return {
+        enterActiveClass: `animate__animated animate__${name}In${capitalize(direction)}`,
+        leaveActiveClass: `animate__animated animate__${name}Out${capitalize(direction)}`
+      };
+    });
+    function handleBeforeEnter() {
+      emit("beforeEnter");
+    }
+    function handleAfterEnter() {
+      emit("afterEnter");
+    }
+    function handleEnterCancelled() {
+      emit("enterCancelled");
+    }
+    function handleBeforeLeave() {
+      emit("beforeLeave");
+    }
+    function handleAfterLeave() {
+      emit("afterLeave");
+    }
+    function handleLeaveCancelled() {
+      emit("leaveCancelled");
+    }
+    return (_ctx, _cache) => {
+      return __props.enabled && __props.direction ? (openBlock(), createBlock(Transition, {
+        key: 0,
+        name: "custom-classes",
+        "enter-active-class": activeClass.value.enterActiveClass,
+        "leave-active-class": activeClass.value.leaveActiveClass,
+        onBeforeEnter: handleBeforeEnter,
+        onAfterEnter: handleAfterEnter,
+        onEnterCancelled: handleEnterCancelled,
+        onBeforeLeave: handleBeforeLeave,
+        onAfterLeave: handleAfterLeave,
+        onLeaveCancelled: handleLeaveCancelled
+      }, {
+        default: withCtx(() => [
+          (__props.mode === "if" ? visible.value : true) ? withDirectives((openBlock(), createElementBlock("div", {
+            key: 0,
+            style: normalizeStyle({ "--animate-duration": `${__props.duration}ms` })
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 4)), [
+            [vShow, __props.mode === "show" ? visible.value : true]
+          ]) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["enter-active-class", "leave-active-class"])) : renderSlot(_ctx.$slots, "default", { key: 1 });
+    };
+  }
+}));
+export {
+  _sfc_main as default
+};

package/dist/es/animated/AnimatedTransition.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./AnimatedTransition.vue.js";
+/* empty css                        */
+export {
+  _sfc_main as default
+};

package/dist/es/animated/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as AnimatedTransition } from './AnimatedTransition.vue';
+export declare const JkyAnimatedTransition: InstallWithSFC<typeof AnimatedTransition>;
+export default JkyAnimatedTransition;

package/dist/es/animated/index.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./AnimatedTransition.vue.js";
+/* empty css                        */
+import { installWithSFC } from "../utils/with-install.js";
+const JkyAnimatedTransition = installWithSFC(_sfc_main);
+export {
+  JkyAnimatedTransition,
+  JkyAnimatedTransition as default
+};

package/dist/es/animated/style.css

@@ -0,0 +1,6 @@
+
+/* 禁止使用 @apply，所有 TailwindCSS 工具类直接写在 class 中 */
+/* 样式文件仅用于定义组件特定的自定义纯 CSS 样式 */
+.jky-animated-transition {
+  /* 动画组件不需要额外样式，所有样式由 animate.css 提供 */
+}

package/dist/es/components.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue';
 export * from './add-input';
 export * from './amap';
+export * from './animated';
 export * from './button';
 export * from './button-nav';
 export * from './code-mirror-editor';

package/dist/es/components.js

@@ -1,6 +1,7 @@
 import { JkyAddInput } from "./add-input/index.js";
 import { JkyAMap, JkyAMapPicker } from "./amap/index.js";
 import { JkyAClusterMarker, JkyAMarker, JkyATrackPlayback } from "./amap/index.js";
+import { JkyAnimatedTransition } from "./animated/index.js";
 import { JkyButton } from "./button/index.js";
 import { JkyButtonNav } from "./button-nav/index.js";
 import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
@@ -35,7 +36,8 @@ const components = [
   JkyModal,
   JkyAMap,
   JkyAMapPicker,
-  JkyDraggable
+  JkyDraggable,
+  JkyAnimatedTransition
 ];
 export {
   JkyAClusterMarker,
@@ -46,6 +48,7 @@ export {
   JkyATrackPlayback,
   JkyActionColumn,
   JkyAddInput,
+  JkyAnimatedTransition,
   JkyButton,
   JkyButtonNav,
   JkyCodeMirrorEditor,

package/dist/es/index.js

@@ -12,6 +12,7 @@ import { JkyAClusterMarker as JkyAClusterMarker2, JkyAMap, JkyAMapPicker, JkyAMa
 import { JkyAMapPickerItem, JkyForm, JkyFormItem } from "./form/index.js";
 import { JkyActionColumn, JkyPageTable, JkyPageTableColumn } from "./page-table/index.js";
 import { JkyAddInput } from "./add-input/index.js";
+import { JkyAnimatedTransition } from "./animated/index.js";
 import { JkyButton } from "./button/index.js";
 import { JkyButtonNav } from "./button-nav/index.js";
 import { JkyCodeMirrorEditor } from "./code-mirror-editor/index.js";
@@ -42,6 +43,7 @@ export {
   JkyATrackPlayback,
   JkyActionColumn,
   JkyAddInput,
+  JkyAnimatedTransition,
   JkyButton,
   JkyButtonNav,
   JkyCodeMirrorEditor,

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.142";
+const version = "0.0.144";
 export {
   version
 };

package/dist/es/resolver.d.ts

@@ -1,2 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
-export declare function JkyComponentLibResolver(): ComponentResolver;
+export interface JkyComponentLibResolverOptions {
+    /** 不自动加载样式的组件白名单（组件名，不带 Jky 前缀） */
+    excludeStyleList?: string[];
+}
+export declare function JkyComponentLibResolver(options?: JkyComponentLibResolverOptions): ComponentResolver;

package/dist/es/resolver.js

@@ -1,13 +1,34 @@
-function JkyComponentLibResolver() {
+const defaultExcludeStyleList = [
+  // AMap 相关子组件，共用 amap 目录的样式
+  "AMapPicker",
+  "AClusterMarker",
+  "AMarker",
+  "ATrackPlayback",
+  // Form 相关子组件，共用 form 目录的样式
+  "FormItem",
+  "AMapPickerItem"
+];
+function JkyComponentLibResolver(options = {}) {
+  const { excludeStyleList = [] } = options;
+  const excludeStyleSet = /* @__PURE__ */ new Set([...defaultExcludeStyleList, ...excludeStyleList]);
   return {
     type: "component",
     resolve: (name) => {
       if (name.match(/^Jky[A-Z]/)) {
+        const componentName = name.replace("Jky", "");
+        const kebabName = componentName.replace(/([A-Z])/g, "-$1").replace(/^-/, "").toLowerCase();
+        if (excludeStyleSet.has(componentName)) {
+          return {
+            name,
+            from: "jky-component-lib"
+            // 白名单中的组件不自动加载样式
+          };
+        }
         return {
           name,
           from: "jky-component-lib",
           sideEffects: [
-            `jky-component-lib/dist/es/${name.replace("Jky", "").replace(/([A-Z])/g, "-$1").replace(/^-/, "").toLowerCase()}/style.css`
+            `jky-component-lib/dist/es/${kebabName}/style.css`
           ]
         };
       }

package/dist/es/style.css

@@ -91,6 +91,7 @@
     --color-yellow-50: oklch(98.7% .026 102.212);
     --color-yellow-100: oklch(97.3% .071 103.193);
     --color-yellow-200: oklch(94.5% .129 101.54);
+    --color-yellow-400: oklch(85.2% .199 91.936);
     --color-yellow-500: oklch(79.5% .184 86.047);
     --color-yellow-600: oklch(68.1% .162 75.834);
     --color-yellow-700: oklch(55.4% .135 66.442);
@@ -1826,6 +1827,14 @@
     height: calc(var(--spacing) * 20);
   }
 
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
+
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -1898,6 +1907,14 @@
     width: calc(var(--spacing) * 20);
   }
 
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
@@ -2570,6 +2587,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .from-yellow-400 {
+    --tw-gradient-from: var(--color-yellow-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .via-blue-700 {
     --tw-gradient-via: var(--color-blue-700);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -2617,11 +2639,21 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .to-orange-500 {
+    --tw-gradient-to: var(--color-orange-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .to-pink-500 {
     --tw-gradient-to: var(--color-pink-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .to-purple-500 {
+    --tw-gradient-to: var(--color-purple-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .to-purple-600 {
     --tw-gradient-to: var(--color-purple-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

package/dist/lib/amap/AClusterMarker/AClusterMarker.vue.js

@@ -26,7 +26,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
 }), {
   __name: "AClusterMarker",
   props: /* @__PURE__ */ vue.mergeModels({
-    map: {},
     points: {},
     gridSize: { default: 60 },
     styles: {},
@@ -47,8 +46,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     const props = __props;
     const emit = __emit;
     const modelValue = vue.useModel(__props, "modelValue");
+    const amapContext = vue.inject("amapContext");
     let clusterInstance = null;
     let mapInstance = null;
+    vue.onMounted(() => {
+      if ((amapContext == null ? void 0 : amapContext.map) && props.enable) {
+        initCluster(amapContext.map);
+      }
+    });
     function initCluster(map) {
       if (!map || !window.AMap)
         return;
@@ -131,15 +136,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
       destroy,
       getClusterInstance: () => clusterInstance
     });
-    vue.watch(
-      () => props.map,
-      (newMap) => {
-        if (newMap && props.enable) {
-          initCluster(newMap);
-        }
-      },
-      { immediate: true }
-    );
     vue.watch(
       () => props.points,
       (newPoints) => {

package/dist/lib/amap/style.css

@@ -1,7 +1,3 @@
 
-/* JkyAMarker 组件样式 - 参考高德官方示例 */
-.amap-icon img,
-.amap-marker-content img {
-  width: 25px;
-  height: 34px;
-}
+/* 轨迹回放组件不需要额外样式 */
+/* 所有样式通过 TailwindCSS 工具类或外部组件控制 */

package/dist/lib/amap/style3.css

@@ -1,3 +1,7 @@
 
-/* 轨迹回放组件不需要额外样式 */
-/* 所有样式通过 TailwindCSS 工具类或外部组件控制 */
+/* JkyAMarker 组件样式 - 参考高德官方示例 */
+.amap-icon img,
+.amap-marker-content img {
+  width: 25px;
+  height: 34px;
+}

package/dist/lib/animated/AnimatedTransition.vue.d.ts

@@ -0,0 +1,44 @@
+import { AnimatedTransitionProps, AnimatedTransitionSlots } from './types';
+type __VLS_Props = AnimatedTransitionProps;
+type __VLS_PublicProps = {
+    'visible'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<AnimatedTransitionSlots> & AnimatedTransitionSlots;
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:visible": (value: boolean) => any;
+} & {
+    afterEnter: () => any;
+    afterLeave: () => any;
+    beforeEnter: () => any;
+    enterCancelled: () => any;
+    beforeLeave: () => any;
+    leaveCancelled: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onAfterEnter?: (() => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onBeforeEnter?: (() => any) | undefined;
+    onEnterCancelled?: (() => any) | undefined;
+    onBeforeLeave?: (() => any) | undefined;
+    onLeaveCancelled?: (() => any) | undefined;
+    "onUpdate:visible"?: ((value: boolean) => any) | undefined;
+}>, {
+    name: import('./types').AnimationName | string;
+    visible: boolean;
+    duration: number;
+    mode: "if" | "show";
+    direction: import('./types').AnimationDirection;
+    enabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/lib/animated/AnimatedTransition.vue.js

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
+  name: "JkyAnimatedTransition"
+}), {
+  __name: "AnimatedTransition",
+  props: /* @__PURE__ */ vue.mergeModels({
+    name: { default: "fade" },
+    duration: { default: 300 },
+    direction: { default: "right" },
+    enabled: { type: Boolean, default: true },
+    visible: { type: Boolean, default: true },
+    mode: { default: "if" }
+  }, {
+    "visible": __spreadValues({ type: Boolean }, { default: true }),
+    "visibleModifiers": {}
+  }),
+  emits: /* @__PURE__ */ vue.mergeModels(["beforeEnter", "afterEnter", "enterCancelled", "beforeLeave", "afterLeave", "leaveCancelled"], ["update:visible"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const visible = vue.useModel(__props, "visible");
+    function capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+    const activeClass = vue.computed(() => {
+      const { name, direction } = props;
+      return {
+        enterActiveClass: `animate__animated animate__${name}In${capitalize(direction)}`,
+        leaveActiveClass: `animate__animated animate__${name}Out${capitalize(direction)}`
+      };
+    });
+    function handleBeforeEnter() {
+      emit("beforeEnter");
+    }
+    function handleAfterEnter() {
+      emit("afterEnter");
+    }
+    function handleEnterCancelled() {
+      emit("enterCancelled");
+    }
+    function handleBeforeLeave() {
+      emit("beforeLeave");
+    }
+    function handleAfterLeave() {
+      emit("afterLeave");
+    }
+    function handleLeaveCancelled() {
+      emit("leaveCancelled");
+    }
+    return (_ctx, _cache) => {
+      return __props.enabled && __props.direction ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+        key: 0,
+        name: "custom-classes",
+        "enter-active-class": activeClass.value.enterActiveClass,
+        "leave-active-class": activeClass.value.leaveActiveClass,
+        onBeforeEnter: handleBeforeEnter,
+        onAfterEnter: handleAfterEnter,
+        onEnterCancelled: handleEnterCancelled,
+        onBeforeLeave: handleBeforeLeave,
+        onAfterLeave: handleAfterLeave,
+        onLeaveCancelled: handleLeaveCancelled
+      }, {
+        default: vue.withCtx(() => [
+          (__props.mode === "if" ? visible.value : true) ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            style: vue.normalizeStyle({ "--animate-duration": `${__props.duration}ms` })
+          }, [
+            vue.renderSlot(_ctx.$slots, "default")
+          ], 4)), [
+            [vue.vShow, __props.mode === "show" ? visible.value : true]
+          ]) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["enter-active-class", "leave-active-class"])) : vue.renderSlot(_ctx.$slots, "default", { key: 1 });
+    };
+  }
+}));
+exports.default = _sfc_main;

package/dist/lib/animated/AnimatedTransition.vue3.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const AnimatedTransition_vue_vue_type_script_setup_true_lang = require("./AnimatedTransition.vue.js");
+;/* empty css                         */
+exports.default = AnimatedTransition_vue_vue_type_script_setup_true_lang.default;

package/dist/lib/animated/index.d.ts

@@ -0,0 +1,4 @@
+import { InstallWithSFC } from '../utils';
+import { default as AnimatedTransition } from './AnimatedTransition.vue';
+export declare const JkyAnimatedTransition: InstallWithSFC<typeof AnimatedTransition>;
+export default JkyAnimatedTransition;

package/dist/lib/animated/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const AnimatedTransition_vue_vue_type_script_setup_true_lang = require("./AnimatedTransition.vue.js");
+;/* empty css                         */
+const withInstall = require("../utils/with-install.js");
+const JkyAnimatedTransition = withInstall.installWithSFC(AnimatedTransition_vue_vue_type_script_setup_true_lang.default);
+exports.JkyAnimatedTransition = JkyAnimatedTransition;
+exports.default = JkyAnimatedTransition;

package/dist/lib/animated/style.css

@@ -0,0 +1,6 @@
+
+/* 禁止使用 @apply，所有 TailwindCSS 工具类直接写在 class 中 */
+/* 样式文件仅用于定义组件特定的自定义纯 CSS 样式 */
+.jky-animated-transition {
+  /* 动画组件不需要额外样式，所有样式由 animate.css 提供 */
+}

package/dist/lib/components.d.ts

@@ -1,6 +1,7 @@
 import { Plugin } from 'vue';
 export * from './add-input';
 export * from './amap';
+export * from './animated';
 export * from './button';
 export * from './button-nav';
 export * from './code-mirror-editor';

package/dist/lib/components.js

@@ -2,40 +2,42 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const index$4 = require("./add-input/index.js");
 const index$1 = require("./amap/index.js");
-const index$5 = require("./button/index.js");
-const index$6 = require("./button-nav/index.js");
-const index$7 = require("./code-mirror-editor/index.js");
-const index$8 = require("./draggable/index.js");
+const index$5 = require("./animated/index.js");
+const index$6 = require("./button/index.js");
+const index$7 = require("./button-nav/index.js");
+const index$8 = require("./code-mirror-editor/index.js");
+const index$9 = require("./draggable/index.js");
 const index$2 = require("./form/index.js");
-const index$9 = require("./menu/index.js");
-const index$a = require("./modal/index.js");
-const index$b = require("./page-header/index.js");
-const index$c = require("./page-layout/index.js");
+const index$a = require("./menu/index.js");
+const index$b = require("./modal/index.js");
+const index$c = require("./page-header/index.js");
+const index$d = require("./page-layout/index.js");
 const index$3 = require("./page-table/index.js");
-const index$d = require("./page-table-v2/index.js");
-const index$e = require("./rich-editor/index.js");
-const index$f = require("./say-hello/index.js");
-const index$g = require("./tabs/index.js");
+const index$e = require("./page-table-v2/index.js");
+const index$f = require("./rich-editor/index.js");
+const index$g = require("./say-hello/index.js");
+const index$h = require("./tabs/index.js");
 const components = [
-  index$f.JkySayHello,
-  index$5.JkyButton,
-  index$6.JkyButtonNav,
-  index$b.JkyPageHeader,
-  index$9.JkyMenu,
+  index$g.JkySayHello,
+  index$6.JkyButton,
+  index$7.JkyButtonNav,
+  index$c.JkyPageHeader,
+  index$a.JkyMenu,
   index$2.JkyForm,
   index$2.JkyFormItem,
   index$2.JkyAMapPickerItem,
-  index$7.JkyCodeMirrorEditor,
+  index$8.JkyCodeMirrorEditor,
   index$4.JkyAddInput,
-  index$e.JkyRichEditor,
+  index$f.JkyRichEditor,
   index$3.JkyPageTable,
-  index$d.JkyPageTableV2,
-  index$c.JkyPageLayout,
-  index$g.JkyTabs,
-  index$a.JkyModal,
+  index$e.JkyPageTableV2,
+  index$d.JkyPageLayout,
+  index$h.JkyTabs,
+  index$b.JkyModal,
   index$1.JkyAMap,
   index$1.JkyAMapPicker,
-  index$8.JkyDraggable
+  index$9.JkyDraggable,
+  index$5.JkyAnimatedTransition
 ];
 exports.JkyAddInput = index$4.JkyAddInput;
 exports.JkyAClusterMarker = index$1.JkyAClusterMarker;
@@ -43,22 +45,23 @@ exports.JkyAMap = index$1.JkyAMap;
 exports.JkyAMapPicker = index$1.JkyAMapPicker;
 exports.JkyAMarker = index$1.JkyAMarker;
 exports.JkyATrackPlayback = index$1.JkyATrackPlayback;
-exports.JkyButton = index$5.JkyButton;
-exports.JkyButtonNav = index$6.JkyButtonNav;
-exports.JkyCodeMirrorEditor = index$7.JkyCodeMirrorEditor;
-exports.JkyDraggable = index$8.JkyDraggable;
+exports.JkyAnimatedTransition = index$5.JkyAnimatedTransition;
+exports.JkyButton = index$6.JkyButton;
+exports.JkyButtonNav = index$7.JkyButtonNav;
+exports.JkyCodeMirrorEditor = index$8.JkyCodeMirrorEditor;
+exports.JkyDraggable = index$9.JkyDraggable;
 exports.JkyAMapPickerItem = index$2.JkyAMapPickerItem;
 exports.JkyForm = index$2.JkyForm;
 exports.JkyFormItem = index$2.JkyFormItem;
-exports.JkyMenu = index$9.JkyMenu;
-exports.JkyModal = index$a.JkyModal;
-exports.JkyPageHeader = index$b.JkyPageHeader;
-exports.JkyPageLayout = index$c.JkyPageLayout;
+exports.JkyMenu = index$a.JkyMenu;
+exports.JkyModal = index$b.JkyModal;
+exports.JkyPageHeader = index$c.JkyPageHeader;
+exports.JkyPageLayout = index$d.JkyPageLayout;
 exports.JkyActionColumn = index$3.JkyActionColumn;
 exports.JkyPageTable = index$3.JkyPageTable;
 exports.JkyPageTableColumn = index$3.JkyPageTableColumn;
-exports.JkyPageTableV2 = index$d.JkyPageTableV2;
-exports.JkyRichEditor = index$e.JkyRichEditor;
-exports.JkySayHello = index$f.JkySayHello;
-exports.JkyTabs = index$g.JkyTabs;
+exports.JkyPageTableV2 = index$e.JkyPageTableV2;
+exports.JkyRichEditor = index$f.JkyRichEditor;
+exports.JkySayHello = index$g.JkySayHello;
+exports.JkyTabs = index$h.JkyTabs;
 exports.components = components;

package/dist/lib/index.js

@@ -14,18 +14,19 @@ const index$1 = require("./amap/index.js");
 const index$2 = require("./form/index.js");
 const index$3 = require("./page-table/index.js");
 const index$4 = require("./add-input/index.js");
-const index$5 = require("./button/index.js");
-const index$6 = require("./button-nav/index.js");
-const index$7 = require("./code-mirror-editor/index.js");
-const index$8 = require("./draggable/index.js");
-const index$9 = require("./menu/index.js");
-const index$a = require("./modal/index.js");
-const index$b = require("./page-header/index.js");
-const index$c = require("./page-layout/index.js");
-const index$d = require("./page-table-v2/index.js");
-const index$e = require("./rich-editor/index.js");
-const index$f = require("./say-hello/index.js");
-const index$g = require("./tabs/index.js");
+const index$5 = require("./animated/index.js");
+const index$6 = require("./button/index.js");
+const index$7 = require("./button-nav/index.js");
+const index$8 = require("./code-mirror-editor/index.js");
+const index$9 = require("./draggable/index.js");
+const index$a = require("./menu/index.js");
+const index$b = require("./modal/index.js");
+const index$c = require("./page-header/index.js");
+const index$d = require("./page-layout/index.js");
+const index$e = require("./page-table-v2/index.js");
+const index$f = require("./rich-editor/index.js");
+const index$g = require("./say-hello/index.js");
+const index$h = require("./tabs/index.js");
 const createTabsGuard = require("./tabs/createTabsGuard.js");
 const useTabsStore = require("./tabs/useTabsStore.js");
 const installer = installer$1.createInstaller(components.components);
@@ -49,18 +50,19 @@ exports.JkyActionColumn = index$3.JkyActionColumn;
 exports.JkyPageTable = index$3.JkyPageTable;
 exports.JkyPageTableColumn = index$3.JkyPageTableColumn;
 exports.JkyAddInput = index$4.JkyAddInput;
-exports.JkyButton = index$5.JkyButton;
-exports.JkyButtonNav = index$6.JkyButtonNav;
-exports.JkyCodeMirrorEditor = index$7.JkyCodeMirrorEditor;
-exports.JkyDraggable = index$8.JkyDraggable;
-exports.JkyMenu = index$9.JkyMenu;
-exports.JkyModal = index$a.JkyModal;
-exports.JkyPageHeader = index$b.JkyPageHeader;
-exports.JkyPageLayout = index$c.JkyPageLayout;
-exports.JkyPageTableV2 = index$d.JkyPageTableV2;
-exports.JkyRichEditor = index$e.JkyRichEditor;
-exports.JkySayHello = index$f.JkySayHello;
-exports.JkyTabs = index$g.JkyTabs;
+exports.JkyAnimatedTransition = index$5.JkyAnimatedTransition;
+exports.JkyButton = index$6.JkyButton;
+exports.JkyButtonNav = index$7.JkyButtonNav;
+exports.JkyCodeMirrorEditor = index$8.JkyCodeMirrorEditor;
+exports.JkyDraggable = index$9.JkyDraggable;
+exports.JkyMenu = index$a.JkyMenu;
+exports.JkyModal = index$b.JkyModal;
+exports.JkyPageHeader = index$c.JkyPageHeader;
+exports.JkyPageLayout = index$d.JkyPageLayout;
+exports.JkyPageTableV2 = index$e.JkyPageTableV2;
+exports.JkyRichEditor = index$f.JkyRichEditor;
+exports.JkySayHello = index$g.JkySayHello;
+exports.JkyTabs = index$h.JkyTabs;
 exports.createTabsGuard = createTabsGuard.createTabsGuard;
 exports.createTabsStore = useTabsStore.createTabsStore;
 exports.default = installer;

package/dist/lib/package.json.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "0.0.142";
+const version = "0.0.144";
 exports.version = version;

package/dist/lib/resolver.d.ts

@@ -1,2 +1,6 @@
 import { ComponentResolver } from 'unplugin-vue-components';
-export declare function JkyComponentLibResolver(): ComponentResolver;
+export interface JkyComponentLibResolverOptions {
+    /** 不自动加载样式的组件白名单（组件名，不带 Jky 前缀） */
+    excludeStyleList?: string[];
+}
+export declare function JkyComponentLibResolver(options?: JkyComponentLibResolverOptions): ComponentResolver;

package/dist/lib/resolver.js

@@ -1,15 +1,36 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-function JkyComponentLibResolver() {
+const defaultExcludeStyleList = [
+  // AMap 相关子组件，共用 amap 目录的样式
+  "AMapPicker",
+  "AClusterMarker",
+  "AMarker",
+  "ATrackPlayback",
+  // Form 相关子组件，共用 form 目录的样式
+  "FormItem",
+  "AMapPickerItem"
+];
+function JkyComponentLibResolver(options = {}) {
+  const { excludeStyleList = [] } = options;
+  const excludeStyleSet = /* @__PURE__ */ new Set([...defaultExcludeStyleList, ...excludeStyleList]);
   return {
     type: "component",
     resolve: (name) => {
       if (name.match(/^Jky[A-Z]/)) {
+        const componentName = name.replace("Jky", "");
+        const kebabName = componentName.replace(/([A-Z])/g, "-$1").replace(/^-/, "").toLowerCase();
+        if (excludeStyleSet.has(componentName)) {
+          return {
+            name,
+            from: "jky-component-lib"
+            // 白名单中的组件不自动加载样式
+          };
+        }
         return {
           name,
           from: "jky-component-lib",
           sideEffects: [
-            `jky-component-lib/dist/es/${name.replace("Jky", "").replace(/([A-Z])/g, "-$1").replace(/^-/, "").toLowerCase()}/style.css`
+            `jky-component-lib/dist/es/${kebabName}/style.css`
           ]
         };
       }

package/dist/lib/style.css

@@ -91,6 +91,7 @@
     --color-yellow-50: oklch(98.7% .026 102.212);
     --color-yellow-100: oklch(97.3% .071 103.193);
     --color-yellow-200: oklch(94.5% .129 101.54);
+    --color-yellow-400: oklch(85.2% .199 91.936);
     --color-yellow-500: oklch(79.5% .184 86.047);
     --color-yellow-600: oklch(68.1% .162 75.834);
     --color-yellow-700: oklch(55.4% .135 66.442);
@@ -1826,6 +1827,14 @@
     height: calc(var(--spacing) * 20);
   }
 
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
+
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -1898,6 +1907,14 @@
     width: calc(var(--spacing) * 20);
   }
 
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
@@ -2570,6 +2587,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .from-yellow-400 {
+    --tw-gradient-from: var(--color-yellow-400);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .via-blue-700 {
     --tw-gradient-via: var(--color-blue-700);
     --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -2617,11 +2639,21 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .to-orange-500 {
+    --tw-gradient-to: var(--color-orange-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .to-pink-500 {
     --tw-gradient-to: var(--color-pink-500);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
 
+  .to-purple-500 {
+    --tw-gradient-to: var(--color-purple-500);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+
   .to-purple-600 {
     --tw-gradient-to: var(--color-purple-600);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jky-component-lib",
   "type": "module",
-  "version": "0.0.142",
+  "version": "0.0.144",
   "publishConfig": {
     "access": "public"
   },
@@ -88,6 +88,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@tinymce/tinymce-vue": "^6.0.0",
     "@vueuse/core": "^14.2.1",
+    "animate.css": "^4.1.1",
     "codemirror": "^6.0.0",
     "element-plus": "^2.13.6",
     "entities": "^6.0.0",
@@ -125,6 +126,7 @@
     "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "^14.2.1",
     "ajv": "^8.18.0",
+    "animate.css": "^4.1.1",
     "bumpp": "^10.1.0",
     "bun": "^1.3.11",
     "codemirror": "^6.0.2",