@hoci/core 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Chizuki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,597 @@
+'use strict';
+
+const vue = require('vue');
+const core = require('@vueuse/core');
+const shared = require('@hoci/shared');
+const tslx = require('tslx');
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const affixProps = shared.defineHookProps(
+  {
+    fixedClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 距离窗口顶部达到指定偏移量后触发
+     * @en Triggered when the specified offset is reached from the top of the window
+     */
+    offset: {
+      type: Number,
+      default: 0
+    },
+    offsetType: {
+      type: String,
+      default: "top"
+    },
+    /**
+     * @zh 滚动容器，默认是 `window`
+     * @en Scroll container, default is `window`
+     */
+    target: {
+      type: [String, Object, Function]
+    },
+    /**
+    * @zh z-index 值
+    * @en Z index value
+    */
+    zIndex: {
+      type: Number,
+      default: 998
+    }
+  }
+);
+const affixEmits = shared.defineHookEmits(["scroll", "change"]);
+const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
+function getTargetRect(target) {
+  return shared.isWindow(target) ? {
+    top: 0,
+    bottom: window.innerHeight
+  } : target.getBoundingClientRect();
+}
+const useAffix = shared.defineHookComponent({
+  props: affixProps,
+  setup(props, { emit }) {
+    const wrapperRef = vue.ref(null);
+    const parentRef = vue.inject(AFFIX_TARGET_KEY, window);
+    const targetRef = shared.useElement(props.target, parentRef);
+    const isFixed = vue.ref(false);
+    const placeholderStyle = vue.ref({});
+    const fixedStyle = vue.ref({});
+    const classNames = vue.computed(() => {
+      return isFixed.value ? props.fixedClass : "";
+    });
+    const wrapperVisible = core.useElementVisibility(wrapperRef);
+    const container = vue.computed(() => {
+      var _a;
+      if (!targetRef.value || !wrapperVisible.value) {
+        return null;
+      }
+      return (_a = targetRef.value) != null ? _a : window;
+    });
+    const updatePosition = shared.throttleByRaf(() => __async(this, null, function* () {
+      if (!wrapperRef.value || !targetRef.value) {
+        return;
+      }
+      yield vue.nextTick();
+      const wrapperRect = wrapperRef.value.getBoundingClientRect();
+      const targetRect = getTargetRect(targetRef.value);
+      let newIsFixed = false;
+      let newFixedStyles = {};
+      const newPlaceholderStyles = {
+        width: `${wrapperRef.value.offsetWidth}px`,
+        height: `${wrapperRef.value.offsetHeight}px`
+      };
+      const offset = props.offset;
+      if (props.offsetType === "top") {
+        newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          zIndex: props.zIndex,
+          top: `${targetRect.top + (offset || 0)}px`
+        } : {};
+      } else {
+        newIsFixed = targetRect.bottom - wrapperRect.bottom < (offset || 0);
+        newFixedStyles = newIsFixed ? {
+          position: "fixed",
+          bottom: `${window.innerHeight - targetRect.bottom + (offset || 0)}px`
+        } : {};
+      }
+      if (newIsFixed !== isFixed.value) {
+        isFixed.value = newIsFixed;
+        emit("change", newIsFixed);
+      }
+      placeholderStyle.value = newPlaceholderStyles;
+      fixedStyle.value = __spreadValues$1(__spreadValues$1({}, newFixedStyles), newIsFixed ? newPlaceholderStyles : {});
+    }));
+    core.useEventListener(container, "scroll", () => {
+      emit("scroll");
+      updatePosition();
+    });
+    core.useEventListener(container, "resize", updatePosition);
+    vue.watchPostEffect(updatePosition);
+    return {
+      classNames,
+      wrapperRef,
+      isFixed,
+      placeholderStyle,
+      fixedStyle,
+      updatePosition
+    };
+  }
+});
+function provideAffixTarget(target) {
+  vue.provide(AFFIX_TARGET_KEY, target);
+}
+
+const selectionProps = shared.defineHookProps({
+  modelValue: {
+    type: shared.valuePropType,
+    default: () => null
+  },
+  /**
+   * 选中时的 class
+   */
+  activeClass: {
+    type: shared.classPropType,
+    default: "active"
+  },
+  /**
+   *  每个选项的 class
+   */
+  itemClass: {
+    type: shared.classPropType,
+    default: ""
+  },
+  disabledClass: {
+    type: shared.classPropType,
+    default: "disabled"
+  },
+  unactiveClass: {
+    type: shared.classPropType,
+    default: ""
+  },
+  label: {
+    type: shared.labelPropType
+  },
+  /**
+   *  多选模式
+   */
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  /**
+   * 可清除
+   */
+  clearable: {
+    type: Boolean
+  },
+  defaultValue: {
+    type: shared.valuePropType,
+    default: () => null
+  },
+  activateEvent: {
+    type: String,
+    default: () => "click"
+  }
+});
+const selectionEmits = shared.defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
+const HiSelectionContextSymbol = Symbol("[hi-selection]context");
+function useSelectionContext() {
+  return vue.inject(HiSelectionContextSymbol, {
+    isActive: () => false,
+    changeActive: () => {
+    },
+    activeClass: "active",
+    unactiveClass: "unactive",
+    disabledClass: "disabled",
+    itemClass: "",
+    activateEvent: "click",
+    label: null,
+    multiple: false
+  });
+}
+const useSelectionList = shared.defineHookComponent({
+  props: selectionProps,
+  emits: selectionEmits,
+  setup(props, { emit }) {
+    var _a;
+    const options = vue.reactive([]);
+    function toArray(value) {
+      if (!core.isDefined(value)) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = vue.reactive([
+      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+    ]);
+    const currentValue = vue.computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        actives.splice(0, actives.length, ...toArray(val));
+      }
+    });
+    const modelValue = vue.computed({
+      get() {
+        var _a2;
+        return (_a2 = props.modelValue) != null ? _a2 : props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    core.syncRef(currentValue, modelValue, { immediate: true, deep: true });
+    const emitChange = () => emit("change", currentValue.value);
+    function isActive(value) {
+      return actives.includes(value);
+    }
+    function changeActive(value) {
+      if (isActive(value)) {
+        if (props.multiple || props.clearable) {
+          actives.splice(actives.indexOf(value), 1);
+          emitChange();
+        }
+      } else {
+        if (props.multiple) {
+          const limit = typeof props.multiple === "number" ? props.multiple : Number.POSITIVE_INFINITY;
+          if (actives.length < limit) {
+            actives.push(value);
+            emitChange();
+          }
+        } else {
+          actives.splice(0, actives.length, value);
+          emitChange();
+        }
+      }
+    }
+    const init = (option) => {
+      function remove() {
+        const index = options.findIndex((e) => e.id === option.id);
+        if (index > -1) {
+          options.splice(index, 1);
+          emit("unload", option);
+        }
+      }
+      for (let i = 0; i < options.length; i++) {
+        if (options[i].value === option.value) {
+          options.splice(i, 1);
+          i--;
+        }
+      }
+      options.push(option);
+      emit("load", option);
+      return remove;
+    };
+    vue.provide(HiSelectionContextSymbol, core.toReactive({
+      activeClass: vue.computed(() => tslx.cls(props.activeClass)),
+      unactiveClass: vue.computed(() => tslx.cls(props.unactiveClass)),
+      disabledClass: vue.computed(() => tslx.cls(props.disabledClass)),
+      itemClass: vue.computed(() => tslx.cls(props.itemClass)),
+      label: vue.computed(() => props.label),
+      multiple: vue.computed(() => props.multiple),
+      clearable: vue.computed(() => props.clearable),
+      defaultValue: vue.computed(() => props.defaultValue),
+      activateEvent: vue.computed(() => props.activateEvent),
+      active: currentValue,
+      changeActive,
+      isActive,
+      init
+    }));
+    function renderItem() {
+      const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
+      return props.multiple ? children : children[0];
+    }
+    return {
+      options,
+      actives,
+      isActive,
+      changeActive,
+      renderItem
+    };
+  }
+});
+
+const itemProps = shared.defineHookProps({
+  value: {
+    type: shared.valuePropType,
+    default() {
+      return Math.random().toString(16).slice(2);
+    }
+  },
+  label: {
+    type: [Function, String]
+  },
+  keepAlive: {
+    type: Boolean,
+    default: () => true
+  },
+  key: {
+    type: [String, Number, Symbol]
+  },
+  activateEvent: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+const useSelectionItem = shared.defineHookComponent({
+  props: itemProps,
+  setup(props, { slots }) {
+    const context = useSelectionContext();
+    const activate = () => {
+      if (props.disabled) {
+        return;
+      }
+      context.changeActive(props.value);
+    };
+    function render() {
+      return vue.renderSlot(slots, "default", {
+        active: context.isActive(props.value),
+        activate
+      }, () => {
+        var _a;
+        let label = (_a = props.label) != null ? _a : context.label;
+        if (label && typeof label == "function") {
+          label = label(props.value);
+        }
+        return Array.isArray(label) ? label : [label];
+      });
+    }
+    let remove = () => {
+    };
+    const init = context.init;
+    if (init) {
+      vue.watch(
+        () => props.value,
+        (value) => {
+          remove();
+          remove = init({
+            id: Math.random().toString(16).slice(2),
+            label: typeof props.label == "string" ? props.label : void 0,
+            value,
+            render
+          });
+        },
+        { immediate: true }
+      );
+      core.tryOnScopeDispose(remove);
+    }
+    const isActive = vue.computed(() => context.isActive(props.value));
+    const isDisabled = vue.computed(() => props.disabled);
+    const className = vue.computed(() => {
+      const array = [context.itemClass];
+      if (!isDisabled.value) {
+        array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
+      } else {
+        array.push(context.disabledClass);
+      }
+      return tslx.cls(array);
+    });
+    const activateEvent = vue.computed(() => context.activateEvent);
+    return {
+      activate,
+      render,
+      isActive,
+      isDisabled,
+      className,
+      activateEvent
+    };
+  }
+});
+
+const switchProps = shared.defineHookProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  class: {
+    type: shared.classPropType,
+    required: true
+  },
+  activeClass: {
+    type: shared.classPropType,
+    default: "checked"
+  },
+  unactiveClass: {
+    type: shared.classPropType,
+    default: "unchecked"
+  },
+  activateEvent: {
+    type: String,
+    default: "click"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledClass: {
+    type: shared.classPropType,
+    default: ""
+  }
+});
+const switchEmits = shared.defineHookEmits(["update:modelValue", "change"]);
+const useSwitch = shared.defineHookComponent({
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, context) {
+    const modelValue = core.useVModel(props, "modelValue", context.emit, {
+      passive: true,
+      defaultValue: false
+    });
+    const toggle = function(value) {
+      if (props.disabled) {
+        return;
+      }
+      const oldValue = modelValue.value;
+      const newValue = typeof value === "boolean" ? value : !oldValue;
+      if (newValue !== oldValue) {
+        modelValue.value = newValue;
+        context.emit("change", newValue);
+      }
+    };
+    const isDisabled = vue.computed(() => props.disabled);
+    const className = vue.computed(() => {
+      return tslx.cls([
+        props.class,
+        modelValue.value ? props.activeClass : props.unactiveClass,
+        isDisabled.value ? props.disabledClass : ""
+      ]);
+    });
+    return {
+      toggle,
+      modelValue,
+      className,
+      isDisabled
+    };
+  }
+});
+
+var __defProp = Object.defineProperty;
+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;
+};
+const iconProps = shared.defineHookProps({
+  src: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: [Number, String],
+    default: "1rem"
+  },
+  width: {
+    type: [Number, String]
+  },
+  height: {
+    type: [Number, String]
+  },
+  color: {
+    type: String
+  },
+  mask: {
+    type: [Boolean, String],
+    default: () => "auto"
+  }
+});
+const useIcon = shared.defineHookComponent({
+  props: iconProps,
+  setup(props, context) {
+    const style = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      const icon = props.src;
+      const propSize = (_a = props.size) != null ? _a : "16px";
+      const size = typeof propSize === "number" ? `${propSize}px` : propSize;
+      const propWidth = (_b = props.width) != null ? _b : size;
+      const width = typeof propWidth === "number" ? `${propWidth}px` : propWidth;
+      const propHeight = (_c = props.height) != null ? _c : size;
+      const height = typeof propHeight === "number" ? `${propHeight}px` : propHeight;
+      const color = (_d = props.color) != null ? _d : "currentColor";
+      const mask = props.mask === "auto" ? icon.endsWith(".svg") : props.mask;
+      if (!mask) {
+        return __spreadValues({
+          "--icon-url": `url('${icon}')`,
+          "background-image": "var(--icon-url)",
+          "background-size": "100% 100%",
+          "height": height,
+          "width": width,
+          "display": "inline-block"
+        }, (_e = context.attrs.style) != null ? _e : {});
+      }
+      return __spreadValues({
+        "--icon-url": `url('${icon}')`,
+        "mask": "var(--icon-url) no-repeat",
+        "mask-size": "100% 100%",
+        "-webkit-mask": "var(--icon-url) no-repeat",
+        "-webkit-mask-size": "100% 100%",
+        "background-color": color,
+        "display": "inline-block",
+        "width": width,
+        "height": height
+      }, (_f = context.attrs.style) != null ? _f : {});
+    });
+    return {
+      style
+    };
+  }
+});
+
+exports.AFFIX_TARGET_KEY = AFFIX_TARGET_KEY;
+exports.affixEmits = affixEmits;
+exports.affixProps = affixProps;
+exports.iconProps = iconProps;
+exports.itemProps = itemProps;
+exports.provideAffixTarget = provideAffixTarget;
+exports.selectionEmits = selectionEmits;
+exports.selectionProps = selectionProps;
+exports.switchEmits = switchEmits;
+exports.switchProps = switchProps;
+exports.useAffix = useAffix;
+exports.useIcon = useIcon;
+exports.useSelectionContext = useSelectionContext;
+exports.useSelectionItem = useSelectionItem;
+exports.useSelectionList = useSelectionList;
+exports.useSwitch = useSwitch;
+Object.keys(shared).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) exports[k] = shared[k];
+});