hoci 0.0.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,371 @@
+'use strict';
+
+const core = require('@vueuse/core');
+const vue = require('vue');
+
+function defineHookProps(props) {
+  return props;
+}
+function defineHookEmits(emits) {
+  return emits;
+}
+function defineHookComponent(options) {
+  return (props, context) => {
+    const p = props instanceof Function ? core.reactiveComputed(() => props()) : props;
+    return options.setup(p, context);
+  };
+}
+
+const valuePropType = [String, Number, Object, Boolean, null];
+const classPropType = [String, Array];
+const labelPropType = [String, Function];
+
+const InitSymbol = Symbol("[hi-selection]init");
+const ActiveClassSymbol = Symbol("[hi-selection]active-class");
+const ItemClassSymbol = Symbol("[hi-selection]item-class");
+const UnactiveSymbol = Symbol("[hi-selection]unactive-class");
+const ItemLabelSymbol = Symbol("[hi-selection]label");
+const ActivateEventSymbol = Symbol("[hi-selection]activate-event");
+const ChangeActiveSymbol = Symbol("[hi-selection]change-active");
+const IsActiveSymbol = Symbol("[hi-selection]is-active");
+
+const selectionItemProps = 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
+  }
+});
+const useSelectionItem = defineHookComponent({
+  props: selectionItemProps,
+  setup(props, { slots }) {
+    const parentLabel = core.resolveRef(vue.inject(ItemLabelSymbol));
+    function render() {
+      return vue.renderSlot(slots, "default", {}, () => {
+        let label = props.label ?? parentLabel.value;
+        if (label) {
+          if (typeof label == "function") {
+            label = label(props.value);
+          }
+        }
+        return Array.isArray(label) ? label : [label];
+      });
+    }
+    let remove = () => {
+    };
+    const init = vue.inject(InitSymbol);
+    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 }
+      );
+      vue.onDeactivated(() => remove());
+    }
+    const isActive = vue.inject(IsActiveSymbol, () => false);
+    const changeActive = vue.inject(ChangeActiveSymbol, () => false);
+    const activeClass = vue.computed(() => vue.inject(ActiveClassSymbol)?.value ?? "active");
+    const unactiveClass = vue.computed(() => vue.inject(UnactiveSymbol)?.value ?? "unactive");
+    const itemClass = vue.computed(() => {
+      return [vue.inject(ItemClassSymbol)?.value ?? ""].concat(isActive(props.value) ? activeClass.value : unactiveClass.value);
+    });
+    const activateEvent = core.resolveRef(() => {
+      const event = vue.inject(ActivateEventSymbol);
+      return props.activateEvent ?? event?.value ?? "click";
+    });
+    return {
+      activate() {
+        changeActive(props.value);
+      },
+      render,
+      isActive,
+      activeClass,
+      unactiveClass,
+      itemClass,
+      activateEvent
+    };
+  }
+});
+const HiItem = vue.defineComponent({
+  name: "HiItem",
+  props: selectionItemProps,
+  setup(props, context) {
+    const { render, activate, itemClass, activateEvent } = useSelectionItem(props, context);
+    return () => vue.h("div", {
+      class: itemClass.value,
+      [`on${vue.capitalize(activateEvent.value)}`]: activate
+    }, render());
+  }
+});
+
+const selectionListProps = defineHookProps({
+  tag: {
+    type: String,
+    default: "div"
+  },
+  modelValue: {
+    type: valuePropType
+  },
+  activeClass: {
+    type: classPropType,
+    default: ""
+  },
+  itemClass: {
+    type: classPropType,
+    default: ""
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: ""
+  },
+  label: {
+    type: labelPropType
+  },
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  defaultValue: {
+    type: valuePropType
+  },
+  activateEvent: {
+    type: String,
+    default: () => "click"
+  }
+});
+const selectionListEmits = defineHookEmits(["update:modelValue", "change", "load", "unload"]);
+const useSelectionList = defineHookComponent({
+  props: selectionListProps,
+  emits: selectionListEmits,
+  setup(props, { slots, emit }) {
+    const options = vue.reactive([]);
+    function toArray(value) {
+      if (value === void 0) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = vue.reactive([...toArray(props.modelValue ?? props.defaultValue)]);
+    const currentValue = vue.computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        if (props.multiple) {
+          actives.splice(0, actives.length, ...toArray(val));
+        } else {
+          actives.splice(0, actives.length, val);
+        }
+      }
+    });
+    const modelValue = vue.computed({
+      get() {
+        return props.modelValue ?? props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    core.syncRef(currentValue, modelValue, { immediate: true, deep: true });
+    vue.watch(currentValue, (val) => {
+      emit("change", val);
+    }, { deep: true });
+    vue.provide(
+      ActiveClassSymbol,
+      vue.computed(() => props.activeClass)
+    );
+    vue.provide(
+      UnactiveSymbol,
+      vue.computed(() => props.unactiveClass)
+    );
+    vue.provide(
+      ItemClassSymbol,
+      vue.computed(() => props.itemClass)
+    );
+    vue.provide(ItemLabelSymbol, vue.computed(() => props.label));
+    vue.provide(ActivateEventSymbol, vue.computed(() => props.activateEvent));
+    function isActive(value) {
+      return actives.includes(value);
+    }
+    function changeActive(option) {
+      if (isActive(option)) {
+        if (props.multiple) {
+          actives.splice(actives.indexOf(option), 1);
+        }
+      } else {
+        if (props.multiple) {
+          const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
+          if (actives.length < limit) {
+            actives.push(option);
+          }
+        } else {
+          actives.splice(0, actives.length, option);
+        }
+      }
+    }
+    vue.provide(IsActiveSymbol, isActive);
+    vue.provide(ChangeActiveSymbol, changeActive);
+    vue.provide(InitSymbol, (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;
+    });
+    function renderItem() {
+      const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
+      return props.multiple ? children : children[0];
+    }
+    function render() {
+      return vue.h(props.tag, {}, vue.renderSlot(slots, "default", {}));
+    }
+    return {
+      options,
+      actives,
+      isActive,
+      changeActive,
+      renderItem,
+      render
+    };
+  }
+});
+const HiSelection = vue.defineComponent({
+  name: "HiSelection",
+  props: selectionListProps,
+  emits: selectionListEmits,
+  setup(props, context) {
+    const { render } = useSelectionList(props, context);
+    return () => render();
+  }
+});
+
+const switchProps = defineHookProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  class: {
+    type: classPropType,
+    default: ""
+  },
+  activeClass: {
+    type: classPropType,
+    default: "checked"
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: "unchecked"
+  },
+  activateEvent: {
+    type: String,
+    default: "click"
+  },
+  tag: {
+    type: String,
+    default: "div"
+  }
+});
+const switchEmits = defineHookEmits(["update:modelValue", "change"]);
+const useSwitch = defineHookComponent({
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, { emit }) {
+    const checked = vue.ref(!!props.modelValue);
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        checked.value = !!val;
+      }
+    );
+    const modelValue = vue.computed({
+      get() {
+        return !!(props.modelValue ?? checked.value);
+      },
+      set(val) {
+        checked.value = val;
+        emit("update:modelValue", val);
+        emit("change", val);
+      }
+    });
+    const toggle = function(value) {
+      if (typeof value === "boolean") {
+        modelValue.value = value;
+      } else {
+        modelValue.value = !modelValue.value;
+      }
+    };
+    const switchClass = vue.computed(() => {
+      return [props.class, modelValue.value ? props.activeClass : props.unactiveClass];
+    });
+    return {
+      toggle,
+      modelValue,
+      switchClass
+    };
+  }
+});
+const HiSwitch = vue.defineComponent({
+  name: "ISwitch",
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, context) {
+    const { slots } = context;
+    const { switchClass, toggle } = useSwitch(props, context);
+    return () => {
+      return vue.h(props.tag, {
+        class: switchClass.value,
+        [`on${vue.capitalize(props.activateEvent)}`]: toggle
+      }, vue.renderSlot(slots, "default"));
+    };
+  }
+});
+
+exports.HiItem = HiItem;
+exports.HiSelection = HiSelection;
+exports.HiSwitch = HiSwitch;
+exports.defineHookComponent = defineHookComponent;
+exports.defineHookEmits = defineHookEmits;
+exports.defineHookProps = defineHookProps;
+exports.selectionItemProps = selectionItemProps;
+exports.selectionListEmits = selectionListEmits;
+exports.selectionListProps = selectionListProps;
+exports.switchProps = switchProps;
+exports.useSelectionItem = useSelectionItem;
+exports.useSelectionList = useSelectionList;
+exports.useSwitch = useSwitch;

package/dist/index.d.ts

@@ -0,0 +1,491 @@
+import * as vue from 'vue';
+import { EmitsOptions, ComponentPropsOptions, ExtractPropTypes, SetupContext, PropType } from 'vue';
+import { MaybeFunction } from 'maybe-types';
+
+interface HookComponentOptions<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>> {
+    props?: P;
+    emits?: E | EE[];
+    setup: (props: D, context: SetupContext<E>) => R;
+}
+type HookComponent<R, E = EmitsOptions, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>> = (props: MaybeFunction<D>, context: SetupContext<E>) => R;
+declare function defineHookProps<P = ComponentPropsOptions>(props: P): P;
+declare function defineHookEmits<E, EE extends string = string>(emits: E | EE[]): E | EE[];
+declare function defineHookComponent<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>>(options: HookComponentOptions<R, E, EE, P, D>): HookComponent<R, E, P, D>;
+
+type ClassType = string | string[];
+type ActivateEvent = "click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu" | "touchstart" | "touchend";
+type ElementLike = JSX.Element | string | ElementLike[];
+
+declare const selectionItemProps: {
+    value: {
+        type: PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+    };
+};
+declare const useSelectionItem: HookComponent<{
+    activate(): void;
+    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+    isActive: (_: any) => boolean;
+    activeClass: vue.ComputedRef<ClassType>;
+    unactiveClass: vue.ComputedRef<ClassType>;
+    itemClass: vue.ComputedRef<ClassType[]>;
+    activateEvent: vue.ComputedRef<ActivateEvent>;
+}, vue.EmitsOptions, {
+    value: {
+        type: PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+    };
+}, vue.ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+    };
+}>>;
+declare const HiItem: vue.DefineComponent<{
+    value: {
+        type: PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: PropType<ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+    };
+}>>, {
+    keepAlive: boolean;
+    value: any;
+}>;
+
+declare const selectionListProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    itemClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | ((val?: any) => string) | null>;
+    };
+    /**
+     *  多选模式
+     */
+    multiple: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: () => false;
+    };
+    defaultValue: {
+        type: PropType<any>;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: () => "click";
+    };
+};
+declare const selectionListEmits: ("update:modelValue" | "change" | "load" | "unload")[];
+declare const useSelectionList: HookComponent<{
+    options: {
+        id?: string | undefined;
+        label?: string | undefined;
+        value: any;
+        render: () => ElementLike;
+    }[];
+    actives: any[];
+    isActive: (value: any) => boolean;
+    changeActive: (option: any) => void;
+    renderItem: () => ElementLike;
+    render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>;
+}, ("update:modelValue" | "change" | "load" | "unload")[], {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    itemClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | ((val?: any) => string) | null>;
+    };
+    /**
+     *  多选模式
+     */
+    multiple: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: () => false;
+    };
+    defaultValue: {
+        type: PropType<any>;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: () => "click";
+    };
+}, vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    itemClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | ((val?: any) => string) | null>;
+    };
+    /**
+     *  多选模式
+     */
+    multiple: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: () => false;
+    };
+    defaultValue: {
+        type: PropType<any>;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: () => "click";
+    };
+}>>;
+declare const HiSelection: vue.DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    itemClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | ((val?: any) => string) | null>;
+    };
+    /**
+     *  多选模式
+     */
+    multiple: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: () => false;
+    };
+    defaultValue: {
+        type: PropType<any>;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: () => "click";
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "change" | "load" | "unload")[], "update:modelValue" | "change" | "load" | "unload", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: PropType<any>;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    itemClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    label: {
+        type: PropType<string | ((val?: any) => string) | null>;
+    };
+    /**
+     *  多选模式
+     */
+    multiple: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: () => false;
+    };
+    defaultValue: {
+        type: PropType<any>;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: () => "click";
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onUnload?: ((...args: any[]) => any) | undefined;
+}, {
+    activateEvent: ActivateEvent;
+    itemClass: string | string[];
+    multiple: number | boolean;
+    tag: string;
+    activeClass: string | string[];
+    unactiveClass: string | string[];
+}>;
+
+declare const switchProps: {
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+declare const useSwitch: HookComponent<{
+    toggle: (value?: any) => void;
+    modelValue: vue.WritableComputedRef<boolean>;
+    switchClass: vue.ComputedRef<(string | string[])[]>;
+}, ("update:modelValue" | "change")[], {
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, vue.ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>;
+declare const HiSwitch: vue.DefineComponent<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activeClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    unactiveClass: {
+        type: PropType<string | string[]>;
+        default: string;
+    };
+    activateEvent: {
+        type: PropType<ActivateEvent>;
+        default: string;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    activateEvent: ActivateEvent;
+    class: string | string[];
+    tag: string;
+    modelValue: boolean;
+    activeClass: string | string[];
+    unactiveClass: string | string[];
+}>;
+
+export { HiItem, HiSelection, HiSwitch, HookComponent, HookComponentOptions, defineHookComponent, defineHookEmits, defineHookProps, selectionItemProps, selectionListEmits, selectionListProps, switchProps, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.mjs

@@ -0,0 +1,357 @@
+import { reactiveComputed, resolveRef, syncRef } from '@vueuse/core';
+import { defineComponent, h, capitalize, inject, watch, onDeactivated, computed, renderSlot, reactive, provide, ref } from 'vue';
+
+function defineHookProps(props) {
+  return props;
+}
+function defineHookEmits(emits) {
+  return emits;
+}
+function defineHookComponent(options) {
+  return (props, context) => {
+    const p = props instanceof Function ? reactiveComputed(() => props()) : props;
+    return options.setup(p, context);
+  };
+}
+
+const valuePropType = [String, Number, Object, Boolean, null];
+const classPropType = [String, Array];
+const labelPropType = [String, Function];
+
+const InitSymbol = Symbol("[hi-selection]init");
+const ActiveClassSymbol = Symbol("[hi-selection]active-class");
+const ItemClassSymbol = Symbol("[hi-selection]item-class");
+const UnactiveSymbol = Symbol("[hi-selection]unactive-class");
+const ItemLabelSymbol = Symbol("[hi-selection]label");
+const ActivateEventSymbol = Symbol("[hi-selection]activate-event");
+const ChangeActiveSymbol = Symbol("[hi-selection]change-active");
+const IsActiveSymbol = Symbol("[hi-selection]is-active");
+
+const selectionItemProps = 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
+  }
+});
+const useSelectionItem = defineHookComponent({
+  props: selectionItemProps,
+  setup(props, { slots }) {
+    const parentLabel = resolveRef(inject(ItemLabelSymbol));
+    function render() {
+      return renderSlot(slots, "default", {}, () => {
+        let label = props.label ?? parentLabel.value;
+        if (label) {
+          if (typeof label == "function") {
+            label = label(props.value);
+          }
+        }
+        return Array.isArray(label) ? label : [label];
+      });
+    }
+    let remove = () => {
+    };
+    const init = inject(InitSymbol);
+    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 }
+      );
+      onDeactivated(() => remove());
+    }
+    const isActive = inject(IsActiveSymbol, () => false);
+    const changeActive = inject(ChangeActiveSymbol, () => false);
+    const activeClass = computed(() => inject(ActiveClassSymbol)?.value ?? "active");
+    const unactiveClass = computed(() => inject(UnactiveSymbol)?.value ?? "unactive");
+    const itemClass = computed(() => {
+      return [inject(ItemClassSymbol)?.value ?? ""].concat(isActive(props.value) ? activeClass.value : unactiveClass.value);
+    });
+    const activateEvent = resolveRef(() => {
+      const event = inject(ActivateEventSymbol);
+      return props.activateEvent ?? event?.value ?? "click";
+    });
+    return {
+      activate() {
+        changeActive(props.value);
+      },
+      render,
+      isActive,
+      activeClass,
+      unactiveClass,
+      itemClass,
+      activateEvent
+    };
+  }
+});
+const HiItem = defineComponent({
+  name: "HiItem",
+  props: selectionItemProps,
+  setup(props, context) {
+    const { render, activate, itemClass, activateEvent } = useSelectionItem(props, context);
+    return () => h("div", {
+      class: itemClass.value,
+      [`on${capitalize(activateEvent.value)}`]: activate
+    }, render());
+  }
+});
+
+const selectionListProps = defineHookProps({
+  tag: {
+    type: String,
+    default: "div"
+  },
+  modelValue: {
+    type: valuePropType
+  },
+  activeClass: {
+    type: classPropType,
+    default: ""
+  },
+  itemClass: {
+    type: classPropType,
+    default: ""
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: ""
+  },
+  label: {
+    type: labelPropType
+  },
+  multiple: {
+    type: [Boolean, Number],
+    default: () => false
+  },
+  defaultValue: {
+    type: valuePropType
+  },
+  activateEvent: {
+    type: String,
+    default: () => "click"
+  }
+});
+const selectionListEmits = defineHookEmits(["update:modelValue", "change", "load", "unload"]);
+const useSelectionList = defineHookComponent({
+  props: selectionListProps,
+  emits: selectionListEmits,
+  setup(props, { slots, emit }) {
+    const options = reactive([]);
+    function toArray(value) {
+      if (value === void 0) {
+        return [];
+      }
+      if (props.multiple && Array.isArray(value)) {
+        return value.filter((v) => v != null || v !== void 0);
+      }
+      return [value];
+    }
+    const actives = reactive([...toArray(props.modelValue ?? props.defaultValue)]);
+    const currentValue = computed({
+      get() {
+        return props.multiple ? actives : actives[0];
+      },
+      set(val) {
+        if (props.multiple) {
+          actives.splice(0, actives.length, ...toArray(val));
+        } else {
+          actives.splice(0, actives.length, val);
+        }
+      }
+    });
+    const modelValue = computed({
+      get() {
+        return props.modelValue ?? props.defaultValue;
+      },
+      set(val) {
+        emit("update:modelValue", val);
+      }
+    });
+    syncRef(currentValue, modelValue, { immediate: true, deep: true });
+    watch(currentValue, (val) => {
+      emit("change", val);
+    }, { deep: true });
+    provide(
+      ActiveClassSymbol,
+      computed(() => props.activeClass)
+    );
+    provide(
+      UnactiveSymbol,
+      computed(() => props.unactiveClass)
+    );
+    provide(
+      ItemClassSymbol,
+      computed(() => props.itemClass)
+    );
+    provide(ItemLabelSymbol, computed(() => props.label));
+    provide(ActivateEventSymbol, computed(() => props.activateEvent));
+    function isActive(value) {
+      return actives.includes(value);
+    }
+    function changeActive(option) {
+      if (isActive(option)) {
+        if (props.multiple) {
+          actives.splice(actives.indexOf(option), 1);
+        }
+      } else {
+        if (props.multiple) {
+          const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
+          if (actives.length < limit) {
+            actives.push(option);
+          }
+        } else {
+          actives.splice(0, actives.length, option);
+        }
+      }
+    }
+    provide(IsActiveSymbol, isActive);
+    provide(ChangeActiveSymbol, changeActive);
+    provide(InitSymbol, (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;
+    });
+    function renderItem() {
+      const children = options.filter((e) => actives.includes(e.value)).map((e) => e.render());
+      return props.multiple ? children : children[0];
+    }
+    function render() {
+      return h(props.tag, {}, renderSlot(slots, "default", {}));
+    }
+    return {
+      options,
+      actives,
+      isActive,
+      changeActive,
+      renderItem,
+      render
+    };
+  }
+});
+const HiSelection = defineComponent({
+  name: "HiSelection",
+  props: selectionListProps,
+  emits: selectionListEmits,
+  setup(props, context) {
+    const { render } = useSelectionList(props, context);
+    return () => render();
+  }
+});
+
+const switchProps = defineHookProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  class: {
+    type: classPropType,
+    default: ""
+  },
+  activeClass: {
+    type: classPropType,
+    default: "checked"
+  },
+  unactiveClass: {
+    type: classPropType,
+    default: "unchecked"
+  },
+  activateEvent: {
+    type: String,
+    default: "click"
+  },
+  tag: {
+    type: String,
+    default: "div"
+  }
+});
+const switchEmits = defineHookEmits(["update:modelValue", "change"]);
+const useSwitch = defineHookComponent({
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, { emit }) {
+    const checked = ref(!!props.modelValue);
+    watch(
+      () => props.modelValue,
+      (val) => {
+        checked.value = !!val;
+      }
+    );
+    const modelValue = computed({
+      get() {
+        return !!(props.modelValue ?? checked.value);
+      },
+      set(val) {
+        checked.value = val;
+        emit("update:modelValue", val);
+        emit("change", val);
+      }
+    });
+    const toggle = function(value) {
+      if (typeof value === "boolean") {
+        modelValue.value = value;
+      } else {
+        modelValue.value = !modelValue.value;
+      }
+    };
+    const switchClass = computed(() => {
+      return [props.class, modelValue.value ? props.activeClass : props.unactiveClass];
+    });
+    return {
+      toggle,
+      modelValue,
+      switchClass
+    };
+  }
+});
+const HiSwitch = defineComponent({
+  name: "ISwitch",
+  props: switchProps,
+  emits: switchEmits,
+  setup(props, context) {
+    const { slots } = context;
+    const { switchClass, toggle } = useSwitch(props, context);
+    return () => {
+      return h(props.tag, {
+        class: switchClass.value,
+        [`on${capitalize(props.activateEvent)}`]: toggle
+      }, renderSlot(slots, "default"));
+    };
+  }
+});
+
+export { HiItem, HiSelection, HiSwitch, defineHookComponent, defineHookEmits, defineHookProps, selectionItemProps, selectionListEmits, selectionListProps, switchProps, useSelectionItem, useSelectionList, useSwitch };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "hoci",
+  "version": "0.0.1",
+  "description": "",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "author": "chizuki",
+  "license": "MIT",
+  "dependencies": {
+    "@vueuse/core": "^9.5.0",
+    "maybe-types": "^0.0.3",
+    "vue": "^3.2.45"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  }
+}