@hoci/core 0.2.1

package/dist/index.mjs

@@ -0,0 +1,578 @@
+import { ref, inject, computed, watchPostEffect, nextTick, provide, reactive, watch, renderSlot } from 'vue';
+import { useElementVisibility, useEventListener, syncRef, toReactive, isDefined, tryOnScopeDispose, useVModel } from '@vueuse/core';
+import { defineHookProps, defineHookEmits, defineHookComponent, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType } from '@hoci/shared';
+export * from '@hoci/shared';
+import { cls } from '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 = 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 = defineHookEmits(["scroll", "change"]);
+const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
+function getTargetRect(target) {
+  return isWindow(target) ? {
+    top: 0,
+    bottom: window.innerHeight
+  } : target.getBoundingClientRect();
+}
+const useAffix = defineHookComponent({
+  props: affixProps,
+  setup(props, { emit }) {
+    const wrapperRef = ref(null);
+    const parentRef = inject(AFFIX_TARGET_KEY, window);
+    const targetRef = useElement(props.target, parentRef);
+    const isFixed = ref(false);
+    const placeholderStyle = ref({});
+    const fixedStyle = ref({});
+    const classNames = computed(() => {
+      return isFixed.value ? props.fixedClass : "";
+    });
+    const wrapperVisible = useElementVisibility(wrapperRef);
+    const container = computed(() => {
+      var _a;
+      if (!targetRef.value || !wrapperVisible.value) {
+        return null;
+      }
+      return (_a = targetRef.value) != null ? _a : window;
+    });
+    const updatePosition = throttleByRaf(() => __async(this, null, function* () {
+      if (!wrapperRef.value || !targetRef.value) {
+        return;
+      }
+      yield 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 : {});
+    }));
+    useEventListener(container, "scroll", () => {
+      emit("scroll");
+      updatePosition();
+    });
+    useEventListener(container, "resize", updatePosition);
+    watchPostEffect(updatePosition);
+    return {
+      classNames,
+      wrapperRef,
+      isFixed,
+      placeholderStyle,
+      fixedStyle,
+      updatePosition
+    };
+  }
+});
+function provideAffixTarget(target) {
+  provide(AFFIX_TARGET_KEY, target);
+}
+
+const selectionProps = defineHookProps({
+  modelValue: {
+    type: valuePropType,
+    default: () => null
+  },
+  /**
+   * 选中时的 class
+   */
+  activeClass: {
+    type: classPropType,
+    default: "active"
+  },
+  /**
+   *  每个选项的 class
+   */
+  itemClass: {
+    type: classPropType,
+    default: ""
+  },
+  disabledClass: {
+    type: classPropType,
+    default: "disabled"
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: ""
+  },
+  label: {
+    type: labelPropType
+  },
+  /**
+   *  多选模式
+   */
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  /**
+   * 可清除
+   */
+  clearable: {
+    type: Boolean
+  },
+  defaultValue: {
+    type: valuePropType,
+    default: () => null
+  },
+  activateEvent: {
+    type: String,
+    default: () => "click"
+  }
+});
+const selectionEmits = defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
+const HiSelectionContextSymbol = Symbol("[hi-selection]context");
+function useSelectionContext() {
+  return inject(HiSelectionContextSymbol, {
+    isActive: () => false,
+    changeActive: () => {
+    },
+    activeClass: "active",
+    unactiveClass: "unactive",
+    disabledClass: "disabled",
+    itemClass: "",
+    activateEvent: "click",
+    label: null,
+    multiple: false
+  });
+}
+const useSelectionList = defineHookComponent({
+  props: selectionProps,
+  emits: selectionEmits,
+  setup(props, { emit }) {
+    var _a;
+    const options = reactive([]);
+    function toArray(value) {
+      if (!isDefined(value)) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = reactive([
+      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+    ]);
+    const currentValue = computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        actives.splice(0, actives.length, ...toArray(val));
+      }
+    });
+    const modelValue = computed({
+      get() {
+        var _a2;
+        return (_a2 = props.modelValue) != null ? _a2 : props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    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;
+    };
+    provide(HiSelectionContextSymbol, toReactive({
+      activeClass: computed(() => cls(props.activeClass)),
+      unactiveClass: computed(() => cls(props.unactiveClass)),
+      disabledClass: computed(() => cls(props.disabledClass)),
+      itemClass: computed(() => cls(props.itemClass)),
+      label: computed(() => props.label),
+      multiple: computed(() => props.multiple),
+      clearable: computed(() => props.clearable),
+      defaultValue: computed(() => props.defaultValue),
+      activateEvent: 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 = defineHookProps({
+  value: {
+    type: 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 = defineHookComponent({
+  props: itemProps,
+  setup(props, { slots }) {
+    const context = useSelectionContext();
+    const activate = () => {
+      if (props.disabled) {
+        return;
+      }
+      context.changeActive(props.value);
+    };
+    function render() {
+      return 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) {
+      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 }
+      );
+      tryOnScopeDispose(remove);
+    }
+    const isActive = computed(() => context.isActive(props.value));
+    const isDisabled = computed(() => props.disabled);
+    const className = computed(() => {
+      const array = [context.itemClass];
+      if (!isDisabled.value) {
+        array.push(context.isActive(props.value) ? context.activeClass : context.unactiveClass);
+      } else {
+        array.push(context.disabledClass);
+      }
+      return cls(array);
+    });
+    const activateEvent = computed(() => context.activateEvent);
+    return {
+      activate,
+      render,
+      isActive,
+      isDisabled,
+      className,
+      activateEvent
+    };
+  }
+});
+
+const switchProps = defineHookProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  class: {
+    type: classPropType,
+    required: true
+  },
+  activeClass: {
+    type: classPropType,
+    default: "checked"
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: "unchecked"
+  },
+  activateEvent: {
+    type: String,
+    default: "click"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledClass: {
+    type: classPropType,
+    default: ""
+  }
+});
+const switchEmits = defineHookEmits(["update:modelValue", "change"]);
+const useSwitch = defineHookComponent({
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, context) {
+    const modelValue = 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 = computed(() => props.disabled);
+    const className = computed(() => {
+      return 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 = 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 = defineHookComponent({
+  props: iconProps,
+  setup(props, context) {
+    const style = 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
+    };
+  }
+});
+
+export { AFFIX_TARGET_KEY, affixEmits, affixProps, iconProps, itemProps, provideAffixTarget, selectionEmits, selectionProps, switchEmits, switchProps, useAffix, useIcon, useSelectionContext, useSelectionItem, useSelectionList, useSwitch };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@hoci/core",
+  "version": "0.2.1",
+  "description": "",
+  "author": "chizuki",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    },
+    "./*": "./dist/*"
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "peerDependencies": {
+    "@vueuse/core": ">=10",
+    "vue": "^3.3.4"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.4.1",
+    "maybe-types": "^0.0.3",
+    "tslx": "^0.1.0",
+    "@hoci/core": "0.2.1",
+    "@hoci/shared": "0.2.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub",
+    "prepublish": "pnpm build"
+  }
+}