@ynetlabo/ui-vue 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yuuki.U (ynetlabo) https://ynetlabo.net
+
+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/README.md

@@ -0,0 +1,70 @@
+# @ynetlabo/ui-vue
+
+[ui-labo](https://github.com/yuuint/ui-labo) の Vue 3 向けラッパー。
+[`@ynetlabo/ui-core`](https://www.npmjs.com/package/@ynetlabo/ui-core) のカスタム要素を、
+`v-model` と型付きの props で使えるようにします。
+
+**[デモとドキュメント](https://ui.ynetlabo.net/)**
+
+```sh
+npm install @ynetlabo/ui-vue
+```
+
+```vue
+<script setup>
+import { ref } from "vue";
+import { YnPrefecturePicker } from "@ynetlabo/ui-vue";
+import "@ynetlabo/ui-tokens/dist/tokens.css";
+
+const pref = ref(null);
+</script>
+
+<template>
+  <YnPrefecturePicker v-model="pref" name="pref" code-format="jis" />
+</template>
+```
+
+`app.use()` でまとめて登録もできます。
+
+```js
+import YnLaboUi from "@ynetlabo/ui-vue";
+app.use(YnLaboUi);
+```
+
+## 使い勝手のためにしていること
+
+- **`isCustomElement` の設定が要りません。** レンダー関数で書いているため、
+  テンプレートコンパイラを通りません
+- **SSR を通せます。** 要素の登録は `onMounted` の動的 import に寄せてあるので、
+  サーバでは空の要素が出るだけです。`<client-only>` で囲む必要はありません
+- **指定しなかった prop は既定を倒しません。** 例えば `searchable` は既定が真ですが、
+  書かなければ真のままです
+
+## props
+
+`modelValue`（`v-model`）のほか、core と同じ指定が使えます。
+
+`selectionLevel` / `multiple` / `codeFormat` / `grouping` / `layout` / `display` /
+`searchable` / `placeholder` / `disabled` / `required` / `invalid` / `name` /
+`transition` / `mode` / `footer` / `items`
+
+意味と取りうる値は[コンポーネントのページ](https://ui.ynetlabo.net/prefecture-picker.html)にあります。
+
+## イベント
+
+| | |
+|---|---|
+| `update:modelValue` | 選択が変わったとき。値は `codeFormat` に従う（複数選択では配列） |
+| `change` | 下地のカスタム要素の `CustomEvent` をそのまま渡す |
+
+## 下地の要素に触る
+
+```vue
+<YnPrefecturePicker ref="picker" />
+```
+
+```js
+picker.value.element   // <yn-prefecture-picker>
+```
+
+MIT © Yuuki.U ([ynetlabo](https://ynetlabo.net))

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@ynetlabo/ui-vue",
+  "version": "0.1.4",
+  "description": "ui-labo の Vue 向けラッパー。core のカスタム要素を v-model と型付きの props で使えるようにする",
+  "type": "module",
+  "license": "MIT",
+  "author": {
+    "name": "ynetlabo",
+    "url": "https://ynetlabo.net"
+  },
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@ynetlabo/ui-core": "^0.1.4"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/server-renderer": "^3.5.0",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "test": "node --test test/*.test.mjs"
+  },
+  "keywords": [
+    "vue",
+    "web-components",
+    "japan",
+    "prefecture",
+    "ui-labo",
+    "ynetlabo"
+  ],
+  "homepage": "https://ui.ynetlabo.net/",
+  "bugs": {
+    "url": "https://github.com/yuuint/ui-labo/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yuuint/ui-labo.git",
+    "directory": "packages/vue"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,60 @@
+import type { DefineComponent, Plugin } from "vue";
+
+/** codeFormat に応じた値の表現。詳細は spec `prefecture-picker` */
+export type PrefectureValue = string | number;
+
+export interface YnPrefecturePickerProps {
+  /** 選択中の値。multiple のときは配列 */
+  modelValue?: PrefectureValue | PrefectureValue[] | null;
+  /** 選ぶ単位 */
+  selectionLevel?: "prefecture" | "area";
+  multiple?: boolean;
+  /** value と change の表現 */
+  codeFormat?: "jis" | "jisNumber" | "ynetlabo" | "iso" | "name" | "shortName";
+  /** 区切り。カスタム定義はオブジェクトで渡す */
+  grouping?: "region9" | "region8" | "region11" | "kana" | "none" | object;
+  layout?: "list" | "map";
+  /** トリガへ表示する表記 */
+  display?: "name" | "shortName";
+  searchable?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  /** フォーム送信時のフィールド名 */
+  name?: string;
+  transition?: "auto" | "fade" | "slide" | "none";
+  /** dropdown は押して開く、inline は常に表示 */
+  mode?: "dropdown" | "inline";
+  /** フッタに出す部品。"auto" | "none" か count / clear / done の並び */
+  footer?: string;
+  /** 都道府県データの差し替え */
+  items?: unknown[];
+}
+
+export interface YnPrefecturePickerEmits {
+  (e: "update:modelValue", value: PrefectureValue | PrefectureValue[] | null): void;
+  (e: "change", event: CustomEvent): void;
+}
+
+export interface YnPrefecturePickerExposed {
+  /** 下地のカスタム要素 */
+  readonly element: HTMLElement | null;
+}
+
+export declare const YnPrefecturePicker: DefineComponent<
+  YnPrefecturePickerProps,
+  YnPrefecturePickerExposed,
+  {},
+  {},
+  {},
+  {},
+  {},
+  YnPrefecturePickerEmits
+>;
+
+export declare const TAG: "yn-prefecture-picker";
+export declare const PROP_MAP: Record<keyof YnPrefecturePickerProps, string>;
+
+declare const plugin: Plugin;
+export default plugin;

package/src/index.js

@@ -0,0 +1,11 @@
+/** ui-labo の Vue 向け入口。core のカスタム要素を Vue から使えるようにする */
+import { YnPrefecturePicker } from "./prefecture-picker.js";
+
+export { YnPrefecturePicker, TAG, PROP_MAP } from "./prefecture-picker.js";
+
+/** app.use() でまとめて登録したいとき */
+export default {
+  install(app) {
+    app.component("YnPrefecturePicker", YnPrefecturePicker);
+  },
+};

package/src/prefecture-picker.js

@@ -0,0 +1,107 @@
+/**
+ * <YnPrefecturePicker> — core のカスタム要素を Vue から自然に使うための薄い覆い。
+ *
+ * 振る舞いは core にしかない（ADR `vue-wraps-custom-element`）。ここでやるのは 3 つだけ。
+ *   1. v-model を仲介する
+ *   2. 値をプロパティとして入れる（属性は文字列しか運べない）
+ *   3. カスタム要素の登録をクライアントに寄せ、SSR を素通りさせる
+ */
+import { defineComponent, h, onBeforeUnmount, onMounted, shallowRef, watchEffect } from "vue";
+
+export const TAG = "yn-prefecture-picker";
+
+/**
+ * Vue の prop 名 → カスタム要素のプロパティ名。
+ * core の `static props` と 1 対 1 で対応する（ずれたら test が落ちる）。
+ *
+ * **並び順に意味がある。value は必ず最後。**
+ * 値の解釈は codeFormat と selectionLevel に依るので、設定より先に value を
+ * 入れると別の表現として読まれ、正しい値が捨てられる。
+ */
+export const PROP_MAP = {
+  selectionLevel: "selectionLevel",
+  multiple: "multiple",
+  codeFormat: "codeFormat",
+  grouping: "grouping",
+  layout: "layout",
+  display: "display",
+  searchable: "searchable",
+  placeholder: "placeholder",
+  disabled: "disabled",
+  required: "required",
+  invalid: "invalid",
+  name: "name",
+  transition: "transition",
+  mode: "mode",
+  footer: "footer",
+  items: "items",
+  modelValue: "value",
+};
+
+// 既定値は core が持っている。ここで false を補うと searchable のように
+// 既定が真のものを黙って倒してしまうので、指定が無ければ undefined のままにする
+const opt = (type) => ({ type, default: undefined });
+
+export const YnPrefecturePicker = defineComponent({
+  name: "YnPrefecturePicker",
+
+  props: {
+    modelValue: opt([String, Number, Array]),
+    selectionLevel: opt(String),
+    multiple: opt(Boolean),
+    codeFormat: opt(String),
+    grouping: opt([String, Object]),
+    layout: opt(String),
+    display: opt(String),
+    searchable: opt(Boolean),
+    placeholder: opt(String),
+    disabled: opt(Boolean),
+    required: opt(Boolean),
+    invalid: opt(Boolean),
+    name: opt(String),
+    transition: opt(String),
+    mode: opt(String),
+    footer: opt(String),
+    items: opt(Array),
+  },
+
+  // ここで宣言しておくと、Vue が同名の native リスナを重ねて付けない
+  emits: ["update:modelValue", "change"],
+
+  setup(props, { emit, expose }) {
+    const el = shallowRef(null);
+
+    const onChange = (e) => {
+      emit("update:modelValue", e.detail.value);
+      emit("change", e);
+    };
+
+    // 描画の後に流す。要素が出来ていないと入れる先が無い
+    watchEffect(() => {
+      const node = el.value;
+      if (!node) return;
+      for (const [from, to] of Object.entries(PROP_MAP)) {
+        const v = props[from];
+        if (v === undefined) continue;      // 指定が無いものは core の既定に任せる
+        if (node[to] !== v) node[to] = v;
+      }
+    }, { flush: "post" });
+
+    onMounted(async () => {
+      el.value?.addEventListener("change", onChange);
+      // 定義前に入れたプロパティは、昇格のときに core の基底クラスが拾い直す
+      if (!customElements.get(TAG)) await import("@ynetlabo/ui-core");
+    });
+
+    onBeforeUnmount(() => el.value?.removeEventListener("change", onChange));
+
+    expose({
+      /** 下地のカスタム要素。フォーム検証など core 側の API を直に触りたいとき */
+      get element() { return el.value; },
+    });
+
+    // テンプレートを通さないので、利用側に isCustomElement の設定が要らない。
+    // サーバでは空の要素になるだけで、DOM にも触れない
+    return () => h(TAG, { ref: el });
+  },
+});