@hoci/components 0.2.1

package/dist/index.d.ts

@@ -0,0 +1,379 @@
+import * as vue from 'vue';
+import * as _hoci_core from '@hoci/core';
+
+declare const HiAffix: vue.DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    wrapperAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    fixedClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetType: {
+        type: vue.PropType<"top" | "bottom">;
+        default: string;
+    };
+    target: {
+        type: vue.PropType<string | Window | HTMLElement>;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    wrapperAs: {
+        type: StringConstructor;
+        default: string;
+    };
+    fixedClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    offset: {
+        type: NumberConstructor;
+        default: number;
+    };
+    offsetType: {
+        type: vue.PropType<"top" | "bottom">;
+        default: string;
+    };
+    target: {
+        type: vue.PropType<string | Window | HTMLElement>;
+    };
+    zIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    fixedClass: string;
+    offset: number;
+    offsetType: "top" | "bottom";
+    zIndex: number;
+    as: string;
+    wrapperAs: string;
+}, {}>;
+
+declare const HiSelection: vue.DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    itemClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    label: {
+        type: vue.PropType<string | ((val?: any) => string) | null>;
+    };
+    multiple: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: () => false;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    defaultValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+        default: () => "click";
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue")[], "change" | "load" | "unload" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    itemClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    label: {
+        type: vue.PropType<string | ((val?: any) => string) | null>;
+    };
+    multiple: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: () => false;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    defaultValue: {
+        type: vue.PropType<any>;
+        default: () => null;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+        default: () => "click";
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onUnload?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    multiple: number | boolean;
+    modelValue: any;
+    activeClass: string | string[] | Record<string, boolean>;
+    itemClass: string | string[] | Record<string, boolean>;
+    disabledClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    clearable: boolean;
+    defaultValue: any;
+    activateEvent: _hoci_core.ActivateEvent;
+    as: string;
+}, {}>;
+
+declare const HiItem: vue.DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: vue.PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    value: {
+        type: vue.PropType<any>;
+        default(): string;
+    };
+    label: {
+        type: vue.PropType<_hoci_core.ElementLike | ((val: any) => string) | null>;
+    };
+    keepAlive: {
+        type: BooleanConstructor;
+        default: () => true;
+    };
+    key: {
+        type: vue.PropType<string | number | symbol>;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    value: any;
+    disabled: boolean;
+    keepAlive: boolean;
+    as: string;
+}, {}>;
+
+declare const HiIcon: vue.DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    color: {
+        type: StringConstructor;
+    };
+    mask: {
+        type: vue.PropType<boolean | "auto">;
+        default: () => "auto";
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    width: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    height: {
+        type: (StringConstructor | NumberConstructor)[];
+    };
+    color: {
+        type: StringConstructor;
+    };
+    mask: {
+        type: vue.PropType<boolean | "auto">;
+        default: () => "auto";
+    };
+}>>, {
+    mask: boolean | "auto";
+    size: string | number;
+    as: string;
+}, {}>;
+
+declare const HiSwitch: vue.DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        required: true;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    modelValue: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        required: true;
+    };
+    activeClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    unactiveClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+    activateEvent: {
+        type: vue.PropType<_hoci_core.ActivateEvent>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: vue.PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+}>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    modelValue: boolean;
+    activeClass: string | string[] | Record<string, boolean>;
+    disabledClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    activateEvent: _hoci_core.ActivateEvent;
+    as: string;
+}, {}>;
+
+export { HiAffix, HiIcon, HiItem, HiSelection, HiSwitch };

package/dist/index.mjs

@@ -0,0 +1,216 @@
+import { defineComponent, h, renderSlot, capitalize } from 'vue';
+import { useAffix, affixProps, selectionEmits, useSelectionList, selectionProps, useSelectionItem, itemProps, useIcon, iconProps, switchEmits, useSwitch, switchProps } from '@hoci/core';
+import { capitalize as capitalize$1 } from 'tslx';
+
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+const HiAffix = defineComponent({
+  name: "HiAffix",
+  props: __spreadProps$4(__spreadValues$4({}, affixProps), {
+    as: {
+      type: String,
+      default: "div"
+    },
+    wrapperAs: {
+      type: String,
+      default: "div"
+    }
+  }),
+  setup(props, context) {
+    const { classNames, wrapperRef, isFixed, placeholderStyle, fixedStyle } = useAffix(props, context);
+    return () => h(
+      props.as,
+      { ref: wrapperRef },
+      [
+        isFixed.value && h("div", { style: placeholderStyle.value }),
+        h("div", { class: classNames.value, style: fixedStyle.value }, renderSlot(context.slots, "default"))
+      ]
+    );
+  }
+});
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+const HiSelection = defineComponent({
+  name: "HiSelection",
+  props: __spreadProps$3(__spreadValues$3({}, selectionProps), {
+    as: {
+      type: String,
+      default: "div"
+    }
+  }),
+  emits: selectionEmits,
+  setup(props, context) {
+    const { isActive, changeActive, renderItem } = useSelectionList(props, context);
+    const { slots } = context;
+    const slotData = {
+      isActive,
+      changeActive,
+      renderItem
+    };
+    return () => h(props.as, {}, renderSlot(slots, "default", slotData));
+  }
+});
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const HiItem = defineComponent({
+  name: "HiItem",
+  props: __spreadProps$2(__spreadValues$2({}, itemProps), {
+    as: {
+      type: String,
+      default: "div"
+    }
+  }),
+  setup(props, context) {
+    const { render, activate, className, isDisabled, activateEvent } = useSelectionItem(
+      props,
+      context
+    );
+    return () => h(
+      props.as,
+      {
+        class: className.value,
+        [`on${capitalize(activateEvent.value)}`]: activate,
+        disabled: isDisabled.value
+      },
+      render()
+    );
+  }
+});
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+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 __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const HiIcon = defineComponent({
+  props: __spreadProps$1(__spreadValues$1({}, iconProps), {
+    as: {
+      type: String,
+      default: "i"
+    }
+  }),
+  setup(props, context) {
+    const { style } = useIcon(props, context);
+    return () => {
+      return h(props.as, {
+        style: style.value
+      });
+    };
+  }
+});
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const HiSwitch = defineComponent({
+  name: "HiSwitch",
+  props: __spreadProps(__spreadValues({}, switchProps), {
+    as: {
+      type: String,
+      default: "div"
+    }
+  }),
+  emits: switchEmits,
+  setup(props, context) {
+    const { slots } = context;
+    const { className, toggle, modelValue, isDisabled } = useSwitch(props, context);
+    return () => {
+      return h(
+        props.as,
+        {
+          class: className.value,
+          [`on${capitalize$1(props.activateEvent)}`]: toggle
+        },
+        renderSlot(slots, "default", {
+          active: modelValue.value,
+          isDisabled: isDisabled.value
+        })
+      );
+    };
+  }
+});
+
+export { HiAffix, HiIcon, HiItem, HiSelection, HiSwitch };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@hoci/components",
+  "version": "0.2.1",
+  "description": "",
+  "author": "chizuki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chizukicn/hoci.git",
+    "directory": "packages/components"
+  },
+  "sideEffects": false,
+  "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"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub",
+    "prepublish": "pnpm build"
+  }
+}