chore: first version.

.editorconfig

@@ -0,0 +1,18 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+indent_style = space
+indent_size = 2
+insert_final_newline = false
+trim_trailing_whitespace = false
+
+[test/assets/*.css]
+insert_final_newline = false

.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+test
+playground

.eslintrc

@@ -0,0 +1,3 @@
+{
+    "extends": ["@curev"]
+}

.github/workflows/dependency-review.yml

@@ -0,0 +1,20 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v3
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v2

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: Release
+
+on:
+    push:
+        tags:
+            - "v*"
+
+jobs:
+    release:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v3
+              with:
+                  fetch-depth: 0
+            - name: Set node
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16.x
+                  registry-url: "https://registry.npmjs.org"
+
+            - name: Set up pnpm
+              uses: pnpm/[email protected]
+              with:
+                  version: 7.12.2
+
+            - run: npx changelogithub
+              continue-on-error: true
+              env:
+                  GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,58 @@
+stats.html
+
+# Dependencies
+node_modules
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+
+# Nuxt
+.nuxt
+.output
+.vercel_build_output
+.build-*
+.env
+.netlify
+.nitro
+.cache
+.output
+
+# Env
+.env
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+

.npmrc

@@ -0,0 +1,3 @@
+ignore-workspace-root-check=true
+shamefully-hoist=true
+strict-peer-dependencies=false

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@hookui/monorepo",
+  "private": true,
+  "version": "0.0.0",
+  "description": "hook ui .",
+  "files": [
+    "dist/*"
+  ],
+  "keywords": [
+    "vue",
+    "hooks"
+  ],
+  "scripts": {
+    "build": "pnpm -r --parallel --filter=./packages/** build",
+    "stub": "pnpm -r --parallel --filter=./packages/**  run stub",
+    "lint": "eslint ./packages/ --ext .ts",
+    "test": "pnpm stub && vitest",
+    "dev":"vite playground",
+    "bump": "bumpp package.json packages/*/package.json --commit --push --tag",
+    "pub":"pnpm -r publish --access public ",
+    "preinstall": "npx only-allow pnpm",
+    "postinstall": "husky install",
+    "regit": "git fetch --all && git reset --hard origin/main && git pull && git remote prune origin"
+  },
+  "author": "chizuki",
+  "license": "MIT",
+  "lint-staged": {
+    "*.{js,ts}": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
+  "devDependencies": {
+    "@curev/eslint-config": "^0.0.4",
+    "@types/node": "^18.6.0",
+    "bumpp": "^8.2.1",
+    "chokidar": "^3.5.3",
+    "eslint": "^8.27.0",
+    "esno": "^0.16.3",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.8.4",
+    "unbuild": "^0.9.4",
+    "vitest": "^0.24.0"
+  }
+}

packages/hookui/package.json

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

packages/hookui/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./selection";
+export * from "./switch";

packages/hookui/src/components/selection/constants.ts

@@ -0,0 +1,31 @@
+import type { MaybeRef } from "@vueuse/core";
+import type { InjectionKey, Ref } from "vue";
+import type { ActivateEvent, ClassType, ElementLike } from "../../types";
+
+export type InitFunction = (option: Option) => () => void;
+
+export const ActiveSymbol = Symbol("[hi-selection]active");
+
+export const InitSymbol: InjectionKey<InitFunction> = Symbol("[hi-selection]init");
+
+export const ModelValueSymbol = Symbol("[hi-selection]model-value");
+
+export const ActiveClassSymbol: InjectionKey<Ref<ClassType>> = Symbol("[hi-selection]active-class");
+export const ItemClassSymbol: InjectionKey<Ref<ClassType>> = Symbol("[hi-selection]item-class");
+export const UnactiveSymbol: InjectionKey<Ref<ClassType>> = Symbol("[hi-selection]unactive-class");
+
+export const ItemLabelSymbol: InjectionKey<MaybeRef<string | ((_: any) => ElementLike | null | undefined) | null | undefined>> = Symbol("[hi-selection]label");
+export const ItemOptionsSymbol = Symbol("[hi-selection]options");
+
+export const ActivateEventSymbol: InjectionKey<Ref<ActivateEvent>> = Symbol("[hi-selection]activate-event");
+
+export const ChangeActiveSymbol: InjectionKey<(_: any) => boolean> = Symbol("[hi-selection]change-active");
+
+export const IsActiveSymbol: InjectionKey<(_: any) => boolean> = Symbol("[hi-selection]is-active");
+
+export interface Option {
+  id?: string
+  label?: string
+  value: any | null
+  render(): ElementLike
+}

packages/hookui/src/components/selection/index.ts

@@ -0,0 +1,2 @@
+export * from "./item";
+export * from "./list";

packages/hookui/src/components/selection/item.ts

@@ -0,0 +1,109 @@
+import { resolveRef } from "@vueuse/core";
+import type { PropType } from "vue";
+import { capitalize, computed, defineComponent, h, inject, onDeactivated, renderSlot, watch } from "vue";
+import { defineHookComponent, defineHookProps } from "../../shared";
+import type { ElementLike } from "../../types";
+import { valuePropType } from "../../constants";
+import { ActivateEventSymbol, ActiveClassSymbol, ChangeActiveSymbol, InitSymbol, IsActiveSymbol, ItemClassSymbol, ItemLabelSymbol, UnactiveSymbol } from "./constants";
+
+export const selectionItemProps = defineHookProps({
+  value: {
+    type: valuePropType,
+    default() {
+      return Math.random().toString(16).slice(2);
+    }
+  },
+  label: {
+    type: [Function, String] as PropType<string | ((val: any) => string) | ElementLike | null>
+  },
+  keepAlive: {
+    type: Boolean,
+    default: () => true
+  },
+  key: {
+    type: [String, Number, Symbol] as PropType<string | number | symbol>
+  },
+  activateEvent: {
+    type: String as PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">
+  }
+});
+
+export 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 : undefined,
+            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
+    };
+  }
+});
+
+export 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());
+  }
+});