yc-design-vue 1.5.1 → 1.5.3

package/es/Calendar/Calendar.vue.d.ts

@@ -20,8 +20,8 @@ declare const __VLS_component: import('vue').DefineComponent<CalendarProps, {},
     mode: CalendarMode;
     modelValue: Date;
     defaultValue: Date;
-    modes: CalendarMode[];
     defaultMode: CalendarMode;
+    modes: CalendarMode[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/es/Calendar/index.d.ts

@@ -17,8 +17,8 @@ declare const Calendar: {
         mode: import('./type').CalendarMode;
         modelValue: Date;
         defaultValue: Date;
-        modes: import('./type').CalendarMode[];
         defaultMode: import('./type').CalendarMode;
+        modes: import('./type').CalendarMode[];
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -35,8 +35,8 @@ declare const Calendar: {
         mode: import('./type').CalendarMode;
         modelValue: Date;
         defaultValue: Date;
-        modes: import('./type').CalendarMode[];
         defaultMode: import('./type').CalendarMode;
+        modes: import('./type').CalendarMode[];
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -55,8 +55,8 @@ declare const Calendar: {
     mode: import('./type').CalendarMode;
     modelValue: Date;
     defaultValue: Date;
-    modes: import('./type').CalendarMode[];
     defaultMode: import('./type').CalendarMode;
+    modes: import('./type').CalendarMode[];
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: Readonly<import('./type').CalendarSlots> & import('./type').CalendarSlots;
 }) & {

package/es/Layout/hooks/useSiderContext.d.ts

@@ -3,7 +3,7 @@ import { Props, Theme } from '../../_shared/type';
 import { LayoutSiderEmits } from '../type';
 export declare const LAYOUT_CONTEXT_KEY = "LAYOUT-CONTEXT";
 export type LayoutContext = {
-    theme: Ref<Theme>;
+    theme: Ref<Theme | undefined>;
     collapsed: Ref<boolean>;
 };
 declare const _default: () => {

package/es/Layout/hooks/useSiderContext.js

@@ -1,27 +1,16 @@
 import { toRefs, computed, provide, inject, ref } from "vue";
 import "../../node_modules/tinycolor2/esm/tinycolor.js";
 import "../../_shared/utils/dom.js";
-import { isUndefined } from "../../_shared/utils/is.js";
 import "../../_shared/utils/time.js";
 import "../../Empty/index.js";
 /* empty css                                */
 import useControlValue from "../../_shared/utils/control.js";
-import { useDark } from "../../node_modules/@vueuse/core/index.js";
 const LAYOUT_CONTEXT_KEY = "LAYOUT-CONTEXT";
 const useSiderContext = () => {
-  const isDark = useDark({
-    selector: "body",
-    attribute: "yc-design-theme",
-    valueDark: "dark",
-    valueLight: "light",
-    initialValue: "light"
-  });
   const provide$1 = (props, emits) => {
-    const {
-      theme: _theme,
-      collapsed,
-      defaultCollapsed
-    } = toRefs(props);
+    const { collapsed, defaultCollapsed, theme } = toRefs(
+      props
+    );
     const computedCollapsed = useControlValue(
       collapsed,
       defaultCollapsed.value,
@@ -29,24 +18,19 @@ const useSiderContext = () => {
         emits("update:collapsed", val);
       }
     );
-    const theme = computed(() => {
-      if (!isUndefined(_theme.value)) {
-        return _theme.value;
-      }
-      return isDark.value ? "dark" : "light";
-    });
+    const mergeTheme = computed(() => theme.value || "light");
     provide(LAYOUT_CONTEXT_KEY, {
       theme,
       collapsed: computedCollapsed
     });
     return {
-      theme,
+      theme: mergeTheme,
       computedCollapsed
     };
   };
   const inject$1 = () => {
     return inject(LAYOUT_CONTEXT_KEY, {
-      theme: computed(() => isDark.value ? "dark" : "light"),
+      theme: ref(void 0),
       collapsed: ref(false)
     });
   };

package/es/Layout/hooks/useTheme.d.ts

@@ -0,0 +1,4 @@
+declare const _default: () => {
+    theme: import('vue').Ref<"light" | "dark", "light" | "dark">;
+};
+export default _default;

package/es/Layout/hooks/useTheme.js

@@ -0,0 +1,34 @@
+import { ref, onMounted } from "vue";
+import { useMutationObserver } from "../../node_modules/@vueuse/core/index.js";
+const useTheme = () => {
+  const theme = ref("light");
+  onMounted(() => {
+    const value = document.body.getAttribute("yc-design-theme");
+    theme.value = value === "dark" ? "dark" : "light";
+  });
+  useMutationObserver(
+    document.body,
+    (mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "attributes" && mutation.attributeName === "yc-design-theme") {
+          const value = mutation.target.getAttribute(
+            "yc-design-theme"
+          );
+          theme.value = value === "dark" ? "dark" : "light";
+          console.log(theme.value, "theme");
+        }
+      }
+    },
+    {
+      attributes: true,
+      // 明确告诉 MutationObserver 我们要监听属性的变化
+      attributeFilter: ["yc-design-theme"]
+    }
+  );
+  return {
+    theme
+  };
+};
+export {
+  useTheme as default
+};

package/es/Menu/hooks/useContext.js

@@ -8,8 +8,9 @@ import "../../Empty/index.js";
 import useControlValue from "../../_shared/utils/control.js";
 import "../index.js";
 import { nanoid } from "../../node_modules/nanoid/index.browser.js";
-import { useResizeObserver, useDark } from "../../node_modules/@vueuse/core/index.js";
+import { useResizeObserver } from "../../node_modules/@vueuse/core/index.js";
 import useSiderContext from "../../Layout/hooks/useSiderContext.js";
+import useTheme from "../../Layout/hooks/useTheme.js";
 import SubMenu from "../SubMenu.vue.js";
 import MenuItem from "../MenuItem.vue.js";
 const MENU_CONTEXT_KEY = "menu-context";
@@ -115,6 +116,7 @@ const getPopupMaxHeight = (popupMaxHeight) => {
   }
 };
 const useMenuContext = () => {
+  const { theme: sysTheme } = useTheme();
   const provide$1 = (props, emits, menuRef) => {
     const {
       selectedKeys,
@@ -137,7 +139,7 @@ const useMenuContext = () => {
       theme: _theme,
       popupMaxHeight: _popupMaxHeight
     } = toRefs(props);
-    const { theme: injectTheme, collapsed: injectCollapsed } = useSiderContext().inject();
+    const { theme: siderTheme, collapsed: injectCollapsed } = useSiderContext().inject();
     const computedSelectedKeys = useControlValue(
       selectedKeys,
       defaultSelectedKeys.value,
@@ -179,7 +181,9 @@ const useMenuContext = () => {
     const menuItemWidths = ref([]);
     const menuTree = computed(() => buildMenuTree(menuTreeNodes.value));
     const max = ref(1e6);
-    const theme = computed(() => _theme.value || injectTheme.value);
+    const theme = computed(() => {
+      return _theme.value || siderTheme.value || sysTheme.value;
+    });
     if (mode.value == "horizontal") {
       useResizeObserver(
         menuRef,
@@ -231,14 +235,6 @@ const useMenuContext = () => {
     };
   };
   const inject$1 = () => {
-    const isDark = useDark({
-      selector: "body",
-      attribute: "yc-design-theme",
-      valueDark: "dark",
-      valueLight: "light",
-      initialValue: "light"
-    });
-    console.log(isDark.value, "isDark");
     return inject(MENU_CONTEXT_KEY, {
       computedSelectedKeys: ref(""),
       computedOpenKeys: ref([]),
@@ -250,7 +246,7 @@ const useMenuContext = () => {
       triggerProps: ref({}),
       autoOpenSelected: ref(false),
       mode: ref("vertical"),
-      theme: computed(() => isDark.value ? "dark" : "light"),
+      theme: sysTheme,
       popupMaxHeight: ref(),
       autoScrollIntoView: ref(false),
       scrollConfig: ref({}),

package/es/node_modules/@vueuse/core/index.js

@@ -1,6 +1,6 @@
-import { tryOnScopeDispose, toArray, watchImmediate, isClient, isObject, makeDestructurable, camelize, tryOnMounted, toRefs, noop, isIOS, notNullish, useThrottleFn, useDebounceFn, pxValue, toRef, injectLocal, pausableWatch as watchPausable, useTimeoutFn, createSingletonPromise } from "../shared/index.js";
-import { bypassFilter, createFilterWrapper, debounceFilter, getLifeCycleTarget, pausableFilter, throttleFilter, watchWithFilter } from "../shared/index.js";
-import { computed, toValue, watch, shallowRef, getCurrentInstance, onMounted, unref, defineComponent, ref, reactive, watchEffect, hasInjectionContext, nextTick, toRaw } from "vue";
+import { tryOnScopeDispose, toArray, watchImmediate, isClient, isObject, makeDestructurable, camelize, tryOnMounted, toRefs, noop, isIOS, notNullish, useThrottleFn, useDebounceFn, pxValue, injectLocal, useTimeoutFn, createSingletonPromise } from "../shared/index.js";
+import { createFilterWrapper, debounceFilter, getLifeCycleTarget, throttleFilter } from "../shared/index.js";
+import { computed, toValue, watch, shallowRef, getCurrentInstance, onMounted, unref, defineComponent, ref, reactive, watchEffect, hasInjectionContext, toRaw } from "vue";
 function createReusableTemplate(options = {}) {
   const {
     inheritAttrs = true
@@ -439,308 +439,6 @@ function useClipboard(options = {}) {
     copy
   };
 }
-const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
-const globalKey = "__vueuse_ssr_handlers__";
-const handlers = /* @__PURE__ */ getHandlers();
-function getHandlers() {
-  if (!(globalKey in _global))
-    _global[globalKey] = _global[globalKey] || {};
-  return _global[globalKey];
-}
-function getSSRHandler(key, fallback) {
-  return handlers[key] || fallback;
-}
-function usePreferredDark(options) {
-  return useMediaQuery("(prefers-color-scheme: dark)", options);
-}
-function guessSerializerType(rawInit) {
-  return rawInit == null ? "any" : rawInit instanceof Set ? "set" : rawInit instanceof Map ? "map" : rawInit instanceof Date ? "date" : typeof rawInit === "boolean" ? "boolean" : typeof rawInit === "string" ? "string" : typeof rawInit === "object" ? "object" : !Number.isNaN(rawInit) ? "number" : "any";
-}
-const StorageSerializers = {
-  boolean: {
-    read: (v) => v === "true",
-    write: (v) => String(v)
-  },
-  object: {
-    read: (v) => JSON.parse(v),
-    write: (v) => JSON.stringify(v)
-  },
-  number: {
-    read: (v) => Number.parseFloat(v),
-    write: (v) => String(v)
-  },
-  any: {
-    read: (v) => v,
-    write: (v) => String(v)
-  },
-  string: {
-    read: (v) => v,
-    write: (v) => String(v)
-  },
-  map: {
-    read: (v) => new Map(JSON.parse(v)),
-    write: (v) => JSON.stringify(Array.from(v.entries()))
-  },
-  set: {
-    read: (v) => new Set(JSON.parse(v)),
-    write: (v) => JSON.stringify(Array.from(v))
-  },
-  date: {
-    read: (v) => new Date(v),
-    write: (v) => v.toISOString()
-  }
-};
-const customStorageEventName = "vueuse-storage";
-function useStorage(key, defaults, storage, options = {}) {
-  var _a;
-  const {
-    flush = "pre",
-    deep = true,
-    listenToStorageChanges = true,
-    writeDefaults = true,
-    mergeDefaults = false,
-    shallow,
-    window: window2 = defaultWindow,
-    eventFilter,
-    onError = (e) => {
-      console.error(e);
-    },
-    initOnMounted
-  } = options;
-  const data = (shallow ? shallowRef : ref)(typeof defaults === "function" ? defaults() : defaults);
-  const keyComputed = computed(() => toValue(key));
-  if (!storage) {
-    try {
-      storage = getSSRHandler("getDefaultStorage", () => {
-        var _a2;
-        return (_a2 = defaultWindow) == null ? void 0 : _a2.localStorage;
-      })();
-    } catch (e) {
-      onError(e);
-    }
-  }
-  if (!storage)
-    return data;
-  const rawInit = toValue(defaults);
-  const type = guessSerializerType(rawInit);
-  const serializer = (_a = options.serializer) != null ? _a : StorageSerializers[type];
-  const { pause: pauseWatch, resume: resumeWatch } = watchPausable(
-    data,
-    () => write(data.value),
-    { flush, deep, eventFilter }
-  );
-  watch(keyComputed, () => update(), { flush });
-  if (window2 && listenToStorageChanges) {
-    tryOnMounted(() => {
-      if (storage instanceof Storage)
-        useEventListener(window2, "storage", update, { passive: true });
-      else
-        useEventListener(window2, customStorageEventName, updateFromCustomEvent);
-      if (initOnMounted)
-        update();
-    });
-  }
-  if (!initOnMounted)
-    update();
-  function dispatchWriteEvent(oldValue, newValue) {
-    if (window2) {
-      const payload = {
-        key: keyComputed.value,
-        oldValue,
-        newValue,
-        storageArea: storage
-      };
-      window2.dispatchEvent(storage instanceof Storage ? new StorageEvent("storage", payload) : new CustomEvent(customStorageEventName, {
-        detail: payload
-      }));
-    }
-  }
-  function write(v) {
-    try {
-      const oldValue = storage.getItem(keyComputed.value);
-      if (v == null) {
-        dispatchWriteEvent(oldValue, null);
-        storage.removeItem(keyComputed.value);
-      } else {
-        const serialized = serializer.write(v);
-        if (oldValue !== serialized) {
-          storage.setItem(keyComputed.value, serialized);
-          dispatchWriteEvent(oldValue, serialized);
-        }
-      }
-    } catch (e) {
-      onError(e);
-    }
-  }
-  function read(event) {
-    const rawValue = event ? event.newValue : storage.getItem(keyComputed.value);
-    if (rawValue == null) {
-      if (writeDefaults && rawInit != null)
-        storage.setItem(keyComputed.value, serializer.write(rawInit));
-      return rawInit;
-    } else if (!event && mergeDefaults) {
-      const value = serializer.read(rawValue);
-      if (typeof mergeDefaults === "function")
-        return mergeDefaults(value, rawInit);
-      else if (type === "object" && !Array.isArray(value))
-        return { ...rawInit, ...value };
-      return value;
-    } else if (typeof rawValue !== "string") {
-      return rawValue;
-    } else {
-      return serializer.read(rawValue);
-    }
-  }
-  function update(event) {
-    if (event && event.storageArea !== storage)
-      return;
-    if (event && event.key == null) {
-      data.value = rawInit;
-      return;
-    }
-    if (event && event.key !== keyComputed.value)
-      return;
-    pauseWatch();
-    try {
-      if ((event == null ? void 0 : event.newValue) !== serializer.write(data.value))
-        data.value = read(event);
-    } catch (e) {
-      onError(e);
-    } finally {
-      if (event)
-        nextTick(resumeWatch);
-      else
-        resumeWatch();
-    }
-  }
-  function updateFromCustomEvent(event) {
-    update(event.detail);
-  }
-  return data;
-}
-const CSS_DISABLE_TRANS = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
-function useColorMode(options = {}) {
-  const {
-    selector = "html",
-    attribute = "class",
-    initialValue = "auto",
-    window: window2 = defaultWindow,
-    storage,
-    storageKey = "vueuse-color-scheme",
-    listenToStorageChanges = true,
-    storageRef,
-    emitAuto,
-    disableTransition = true
-  } = options;
-  const modes = {
-    auto: "",
-    light: "light",
-    dark: "dark",
-    ...options.modes || {}
-  };
-  const preferredDark = usePreferredDark({ window: window2 });
-  const system = computed(() => preferredDark.value ? "dark" : "light");
-  const store = storageRef || (storageKey == null ? toRef(initialValue) : useStorage(storageKey, initialValue, storage, { window: window2, listenToStorageChanges }));
-  const state = computed(() => store.value === "auto" ? system.value : store.value);
-  const updateHTMLAttrs = getSSRHandler(
-    "updateHTMLAttrs",
-    (selector2, attribute2, value) => {
-      const el = typeof selector2 === "string" ? window2 == null ? void 0 : window2.document.querySelector(selector2) : unrefElement(selector2);
-      if (!el)
-        return;
-      const classesToAdd = /* @__PURE__ */ new Set();
-      const classesToRemove = /* @__PURE__ */ new Set();
-      let attributeToChange = null;
-      if (attribute2 === "class") {
-        const current = value.split(/\s/g);
-        Object.values(modes).flatMap((i) => (i || "").split(/\s/g)).filter(Boolean).forEach((v) => {
-          if (current.includes(v))
-            classesToAdd.add(v);
-          else
-            classesToRemove.add(v);
-        });
-      } else {
-        attributeToChange = { key: attribute2, value };
-      }
-      if (classesToAdd.size === 0 && classesToRemove.size === 0 && attributeToChange === null)
-        return;
-      let style;
-      if (disableTransition) {
-        style = window2.document.createElement("style");
-        style.appendChild(document.createTextNode(CSS_DISABLE_TRANS));
-        window2.document.head.appendChild(style);
-      }
-      for (const c of classesToAdd) {
-        el.classList.add(c);
-      }
-      for (const c of classesToRemove) {
-        el.classList.remove(c);
-      }
-      if (attributeToChange) {
-        el.setAttribute(attributeToChange.key, attributeToChange.value);
-      }
-      if (disableTransition) {
-        window2.getComputedStyle(style).opacity;
-        document.head.removeChild(style);
-      }
-    }
-  );
-  function defaultOnChanged(mode) {
-    var _a;
-    updateHTMLAttrs(selector, attribute, (_a = modes[mode]) != null ? _a : mode);
-  }
-  function onChanged(mode) {
-    if (options.onChanged)
-      options.onChanged(mode, defaultOnChanged);
-    else
-      defaultOnChanged(mode);
-  }
-  watch(state, onChanged, { flush: "post", immediate: true });
-  tryOnMounted(() => onChanged(state.value));
-  const auto = computed({
-    get() {
-      return emitAuto ? store.value : state.value;
-    },
-    set(v) {
-      store.value = v;
-    }
-  });
-  return Object.assign(auto, { store, system, state });
-}
-function useDark(options = {}) {
-  const {
-    valueDark = "dark",
-    valueLight = ""
-  } = options;
-  const mode = useColorMode({
-    ...options,
-    onChanged: (mode2, defaultHandler) => {
-      var _a;
-      if (options.onChanged)
-        (_a = options.onChanged) == null ? void 0 : _a.call(options, mode2 === "dark", defaultHandler, mode2);
-      else
-        defaultHandler(mode2);
-    },
-    modes: {
-      dark: valueDark,
-      light: valueLight
-    }
-  });
-  const system = computed(() => mode.system.value);
-  const isDark = computed({
-    get() {
-      return mode.value === "dark";
-    },
-    set(v) {
-      const modeVal = v ? "dark" : "light";
-      if (system.value === modeVal)
-        mode.value = "auto";
-      else
-        mode.value = modeVal;
-    }
-  });
-  return isDark;
-}
 function useDraggable(target, options = {}) {
   var _a;
   const {
@@ -1352,18 +1050,14 @@ function useVerticalVirtualList(options, list) {
   };
 }
 export {
-  StorageSerializers,
-  bypassFilter,
   camelize,
   createFilterWrapper,
   createReusableTemplate,
   createSingletonPromise,
-  customStorageEventName,
   debounceFilter,
   defaultNavigator,
   defaultWindow,
   getLifeCycleTarget,
-  getSSRHandler,
   injectLocal,
   isClient,
   isIOS,
@@ -1373,19 +1067,14 @@ export {
   notNullish,
   onClickOutside,
   onKeyStroke,
-  pausableFilter,
-  watchPausable as pausableWatch,
   pxValue,
   throttleFilter,
   toArray,
-  toRef,
   toRefs,
   tryOnMounted,
   tryOnScopeDispose,
   unrefElement,
   useClipboard,
-  useColorMode,
-  useDark,
   useDebounceFn,
   useDraggable,
   useElementBounding,
@@ -1395,16 +1084,12 @@ export {
   useMounted,
   useMutationObserver,
   usePermission,
-  usePreferredDark,
   useResizeObserver,
   useSSRWidth,
   useScroll,
-  useStorage,
   useSupported,
   useThrottleFn,
   useTimeoutFn,
   useVirtualList,
-  watchImmediate,
-  watchPausable,
-  watchWithFilter
+  watchImmediate
 };