@geckou/ui-vue 0.3.0

package/dist/components/ToggleButton.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import type {
+  StateVariation,
+  BaseStyle,
+} from '../types'
+import { computed } from 'vue'
+import { COLOR } from '../const'
+
+const emit = defineEmits<{ (e: 'update:modelValue', newValue: boolean): void }>()
+
+const props = withDefaults(defineProps<{
+  name: string
+  label?: Record<'on' | 'off', string>
+  modelValue?: boolean
+  isDisabled?: boolean
+  cssStyle?: Record<StateVariation, {
+    on: BaseStyle
+    off: BaseStyle
+  }>
+}>(), {
+  label   : () => ({ on: 'ON', off: 'OFF' }),
+  cssStyle: undefined,
+})
+
+const isChecked = computed<boolean>({
+  get: () => props.modelValue ?? false,
+  set: (newValue: boolean) => emit('update:modelValue', newValue),
+})
+
+const maxTextLength = computed<number>(() => {
+  const onLength = props.label.on.length
+  const offLength = props.label.off.length
+
+  return onLength > offLength ? onLength : offLength
+})
+
+const currentCssStyle = computed(() => {
+  const cssStyle = props.isDisabled ? props.cssStyle?.disabled : props.cssStyle?.default
+
+  return {
+    on: {
+      ...{
+        textColor      : props.isDisabled ? COLOR.lightGray : COLOR.white,
+        backgroundColor: props.isDisabled ? COLOR.gray : COLOR.blue,
+        border         : {
+          color : props.isDisabled ? COLOR.gray : COLOR.blue,
+          size  : '1px',
+          radius: '.25rem',
+        },
+        boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
+      },
+      ...cssStyle?.on,
+    },
+    off: {
+      ...{
+        textColor      : props.isDisabled ? COLOR.gray : COLOR.white,
+        backgroundColor: props.isDisabled ? COLOR.lightGray : COLOR.darkGray,
+        border         : {
+          color : props.isDisabled ? COLOR.gray : COLOR.darkGray,
+          size  : '1px',
+          radius: '.25rem',
+        },
+        boxShadow: '0 0 0 0 rgba(0, 0, 0, 0)',
+      },
+      ...cssStyle?.off,
+    },
+  }[isChecked.value ? 'on' : 'off']
+})
+</script>
+
+<template>
+  <button
+    :class="$style.toggle_button"
+    :style="{
+      '--text-color': currentCssStyle?.textColor,
+      '--border-color': currentCssStyle?.border?.color,
+      '--border-size' : currentCssStyle?.border?.size,
+      '--radius-size': currentCssStyle?.border?.radius,
+      '--background-color': currentCssStyle?.backgroundColor,
+      '--box-shadow': currentCssStyle?.boxShadow,
+      '--inline-size': `${maxTextLength * 2}ch`,
+    }"
+    type="button"
+    :disabled="isDisabled"
+    @click.stop="!isDisabled ? isChecked = !isChecked : null"
+  >
+    <input 
+      v-model="isChecked"
+      type="checkbox"
+      :name="name"
+      :disabled="isDisabled"
+    >
+    <div
+      :class="[$style.text, {[$style.on]: isChecked}]"
+      :data-on="label.on"
+      :data-off="label.off"
+    />
+    <div :class="$style.handle" />
+  </button>
+</template>
+
+<style lang="scss" module>
+:is(.toggle_button) {
+  --handle-size: 1.5rem;
+  --padding-size: calc(var(--border-size) + 2px);
+  --duration: .15s;
+  inline-size: calc(var(--inline-size) + var(--handle-size) + (var(--padding-size) * 2));
+  position: relative;
+  display: inline-block;
+  padding: var(--padding-size);
+  background-color: var(--background-color);
+  box-shadow:
+    0 0 0 var(--border-size) var(--border-color) inset,
+    var(--box-shadow)
+  ;
+  border: none;
+  border-radius: var(--radius-size);
+  cursor: pointer;
+
+  > input {
+    display: none;
+  }
+}
+
+:is(.text) {
+  position: absolute;
+  inline-size: 100%;
+  block-size: 100%;
+  text-transform: uppercase;
+  color: var(--text-color);
+  top: 0;
+  left: 0;
+
+  &::before,
+  &::after {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    block-size: 100%;
+    inline-size: calc(100% - var(--handle-size) - var(--padding-size));
+    margin: auto;
+    line-height: 1;
+    position: absolute;
+    transition: opacity var(--duration) ease-out;
+  }
+
+  &::before {
+    content: attr(data-off);
+    right: 0;
+  }
+
+  &::after {
+    content: attr(data-on);
+    left: 0;
+    opacity: 0;
+  }
+
+  &.on {
+    &:before { opacity: 0; }
+    &:after { opacity: 1; }
+
+    + .handle {
+      left: calc(100% - var(--handle-size));
+    }
+  }
+}
+
+:is(.handle) {
+  inline-size: var(--handle-size);
+  aspect-ratio: 1 / 1;
+  margin: 0;
+  background-color: var(--text-color);
+  border-radius: calc(var(--radius-size) - (var(--padding-size) / 2));
+  box-shadow: var(--box-shadow);
+  position: relative;
+  left: 0;
+  transition: left var(--duration) ease-out;
+}
+</style>

package/dist/const/index.ts

@@ -0,0 +1,2 @@
+// 配色は @geckou/ui-core が正。Vue / React で共通のため再エクスポートのみ行う
+export { COLOR, BORDER, MESSAGES, INPUT_BOX_DEFAULT_STYLES } from '@geckou/ui-core'

package/dist/const/list-theme.ts

@@ -0,0 +1,62 @@
+export const LIST_THEME = {
+  standard: {
+    jaName      : 'スタンダード',
+    enName      : 'Standard',
+    columnNumber: 3,
+    name        : 'Standard',
+  },
+  rounded: {
+    jaName      : 'ポップ',
+    enName      : 'Rounded',
+    columnNumber: 3,
+    name        : 'Rounded',
+  },
+  artistic: {
+    jaName      : 'アート',
+    enName      : 'Artistic',
+    columnNumber: 3,
+    name        : 'Artistic',
+  },
+  tile: {
+    jaName      : 'タイル',
+    enName      : 'Tile',
+    columnNumber: 3,
+    name        : 'Tile',
+  },
+  simple: {
+    jaName      : 'シンプル',
+    enName      : 'Simple',
+    columnNumber: 3,
+    name        : 'Simple',
+  },
+  row: {
+    jaName      : 'ワイド',
+    enName      : 'Row',
+    columnNumber: 1,
+    name        : 'Row',
+  },
+  news: {
+    jaName      : 'ニュース',
+    enName      : 'News',
+    columnNumber: 1,
+    name        : 'News',
+  },
+  grid: {
+    jaName      : 'グリッド',
+    enName      : 'Grid',
+    columnNumber: 4,
+    name        : 'Grid',
+  },
+  gallery: {
+    jaName      : 'ギャラリー',
+    enName      : 'Gallery',
+    columnNumber: 3,
+    name        : 'Gallery',
+  },
+  entertainment: {
+    jaName      : 'エンタテインメント',
+    enName      : 'Entertainment',
+    columnNumber: 3,
+    name        : 'Entertainment',
+  },
+}

package/dist/index.ts

@@ -0,0 +1,126 @@
+import { App } from 'vue'
+
+// Form / UI components
+import TextBox from './components/TextBox.vue'
+import TextArea from './components/TextArea.vue'
+import BasicButton from './components/BasicButton.vue'
+import SelectBox from './components/SelectBox.vue'
+import CheckBox from './components/CheckBox.vue'
+import CheckBoxes from './components/CheckBoxes.vue'
+import CheckButton from './components/CheckButton.vue'
+import LabeledCheckbox from './components/LabeledCheckbox.vue'
+import LabeledFieldset from './components/LabeledFieldset.vue'
+import RadioButtons from './components/RadioButtons.vue'
+import ToggleButton from './components/ToggleButton.vue'
+import InputBox from './components/InputBox.vue'
+import InputGroup from './components/InputGroup.vue'
+import TextButton from './components/TextButton.vue'
+import DatePicker from './components/DatePicker.vue'
+import DateRangePicker from './components/DateRangePicker.vue'
+import DateSelector from './components/DateSelector.vue'
+import DropdownUi from './components/DropdownUi.vue'
+import ModalBox from './components/ModalBox.vue'
+import PopupBox from './components/PopupBox.vue'
+import SlideDownUi from './components/SlideDownUi.vue'
+import TabUI from './components/TabUI.vue'
+import LoadingSpinner from './components/LoadingSpinner.vue'
+import ErrorMessage from './components/ErrorMessage.vue'
+
+// ArticleList components
+import StandardList from './components/ArticleList/List/Standard.vue'
+import RoundedList from './components/ArticleList/List/Rounded.vue'
+import ArtisticList from './components/ArticleList/List/Artistic.vue'
+import TileList from './components/ArticleList/List/Tile.vue'
+import SimpleList from './components/ArticleList/List/Simple.vue'
+import RowList from './components/ArticleList/List/Row.vue'
+import NewsList from './components/ArticleList/List/News.vue'
+import EntertainmentList from './components/ArticleList/List/Entertainment.vue'
+import GalleryList from './components/ArticleList/List/Gallery.vue'
+import GridList from './components/ArticleList/List/Grid.vue'
+
+const components = {
+  TextBox,
+  TextArea,
+  BasicButton,
+  SelectBox,
+  CheckBox,
+  CheckBoxes,
+  CheckButton,
+  LabeledCheckbox,
+  LabeledFieldset,
+  RadioButtons,
+  ToggleButton,
+  InputBox,
+  InputGroup,
+  TextButton,
+  DatePicker,
+  DateRangePicker,
+  DateSelector,
+  DropdownUi,
+  ModalBox,
+  PopupBox,
+  SlideDownUi,
+  TabUI,
+  LoadingSpinner,
+  ErrorMessage,
+
+  StandardList,
+  RoundedList,
+  ArtisticList,
+  TileList,
+  SimpleList,
+  RowList,
+  NewsList,
+  EntertainmentList,
+  GalleryList,
+  GridList,
+}
+
+export default {
+  install(app: App) {
+    Object.entries(components).forEach(([name, component]) => {
+      app.component(name, component)
+    })
+  },
+}
+
+export {
+  TextBox,
+  TextArea,
+  BasicButton,
+  SelectBox,
+  CheckBox,
+  CheckBoxes,
+  CheckButton,
+  LabeledCheckbox,
+  LabeledFieldset,
+  RadioButtons,
+  ToggleButton,
+  InputBox,
+  InputGroup,
+  TextButton,
+  DatePicker,
+  DateRangePicker,
+  DateSelector,
+  DropdownUi,
+  ModalBox,
+  PopupBox,
+  SlideDownUi,
+  TabUI,
+  LoadingSpinner,
+  ErrorMessage,
+
+  StandardList,
+  RoundedList,
+  ArtisticList,
+  TileList,
+  SimpleList,
+  RowList,
+  NewsList,
+  EntertainmentList,
+  GalleryList,
+  GridList,
+}
+
+export { LIST_THEME } from './const/list-theme'
+export { FormValidationManager } from './scripts/form-validation-manager'

package/dist/scripts/form-validation-manager.ts

@@ -0,0 +1,63 @@
+import { computed, onScopeDispose, shallowRef } from 'vue'
+import type { ComputedRef } from 'vue'
+import { createFormValidationStore } from '@geckou/ui-core'
+import type { FormValidationStore } from '@geckou/ui-core'
+
+/**
+ * フォーム内の各入力コンポーネントのバリデーション状態をまとめて管理する。
+ *
+ * 状態そのものは @geckou/ui-core の createFormValidationStore が持つ。
+ * このクラスは Vue のリアクティビティへ繋ぐ薄いラッパーで、
+ * 判定ロジックは React 実装（@geckou/ui-react）と共有される。
+ *
+ * ```ts
+ * const manager = new FormValidationManager()
+ * // <DatePicker name="startedOn" :formValidationManager="manager" />
+ * const canSubmit = manager.isAllValid
+ * ```
+ */
+export class FormValidationManager {
+  private readonly store: FormValidationStore
+
+  /** 登録済みの入力がすべて有効かどうか */
+  readonly isAllValid: ComputedRef<boolean>
+
+  /** 無効になっている入力の name 一覧 */
+  readonly invalidNames: ComputedRef<string[]>
+
+  constructor() {
+    this.store = createFormValidationStore()
+
+    const snapshot = shallowRef(this.store.getSnapshot())
+    const unsubscribe = this.store.subscribe(() => {
+      snapshot.value = this.store.getSnapshot()
+    })
+
+    // インスタンスを生成した effect scope の破棄時に購読を解除する
+    // （scope の外で生成された場合は何もしない）
+    onScopeDispose(unsubscribe, true)
+
+    this.isAllValid = computed(() => snapshot.value.isAllValid)
+    this.invalidNames = computed(() => snapshot.value.invalidNames)
+  }
+
+  /** 入力の状態を登録・更新する */
+  setValid(name: string, isValid: boolean): void {
+    this.store.setValid(name, isValid)
+  }
+
+  /** 個別の入力が有効かどうか（未登録なら true） */
+  isValid(name: string): boolean {
+    return this.store.isValid(name)
+  }
+
+  /** 管理対象から外す（コンポーネントのアンマウント時など） */
+  remove(name: string): void {
+    this.store.remove(name)
+  }
+
+  /** すべての状態を破棄する */
+  reset(): void {
+    this.store.reset()
+  }
+}

package/dist/scripts/utils.ts

@@ -0,0 +1,36 @@
+import type { Article, PostConfig, WpTerm } from '../types'
+
+export const generateQueryObject = (url: string): Record<string, string> => {
+  const regex = /[?&]([^=#]+)=([^&#]*)/g
+  const queryObject: Record<string, string> = {}
+
+  for (let match; (match = regex.exec(url)) !== null; ) {
+    queryObject[match[1]] = match[2]
+  }
+
+  return queryObject
+}
+
+export const returnTagList = (articleObject: Article): string[] => {
+  const terms = articleObject?.['_embedded']?.['wp:term']?.[1] ?? []
+  return terms.map((tag: WpTerm) => tag.name)
+}
+
+export const returnArticlePath = (postConfig: PostConfig, domain: string, articleId: string) => {
+  // ドメイン末尾とパス先頭のスラッシュが重ならないようにする
+  const base = String(domain).replace(/\/+$/, '')
+  const path = String(postConfig.article_page_path ?? '').replace(/^\/+/, '')
+
+  return `https://${base}/${path}?${postConfig.query_key_name}=${articleId}`
+}
+
+/**
+ * 各カードは postConfig.author / category / tag を参照するが、
+ * 設定側では useAuthor / useCategory / useTag で渡すこともできるため両対応させる
+ */
+export const normalizePostConfig = (postConfig: PostConfig): PostConfig => ({
+  ...postConfig,
+  author  : postConfig?.author ?? postConfig?.useAuthor ?? false,
+  category: postConfig?.category ?? postConfig?.useCategory ?? false,
+  tag     : postConfig?.tag ?? postConfig?.useTag ?? false,
+})

package/dist/types/custom.d.ts

@@ -0,0 +1 @@
+declare module '../*'

package/dist/types/index.d.ts

@@ -0,0 +1,93 @@
+// フォーム部品の型は @geckou/ui-core が正。Vue / React で共通のため、ここでは再エクスポートのみ行う
+export type {
+  StateVariation,
+  BorderStyle,
+  BaseStyle,
+  StyleForEachStatus,
+  InputBoxStyle,
+  InputBoxStyleForEachStatus,
+  ButtonStyle,
+  ButtonStyleForEachStatus,
+  CheckBoxStyle,
+  CheckBoxStyleForEachStatus,
+  RadioButtonStyle,
+  RadioButtonStyleForEachStatus,
+  SelectValue,
+  Option,
+  Validate,
+  Validates,
+  InputValue,
+  DateObject,
+  DateType,
+  ValidationResult,
+} from '@geckou/ui-core'
+
+// ArticleList は Vue のみの機能のため、型もこのパッケージで持つ
+export type Category = {
+  id: string
+  name: string
+}
+
+export type PostConfig = {
+  article_page_path: string
+  query_key_name: string
+  useAuthor?: boolean
+  useCategory?: boolean
+  useTag?: boolean
+  /** useAuthor のエイリアス（カード内部で参照される） */
+  author?: boolean
+  /** useCategory のエイリアス（カード内部で参照される） */
+  category?: boolean
+  /** useTag のエイリアス（カード内部で参照される） */
+  tag?: boolean
+}
+
+export type ListSettings = {
+  domainToUse: string
+  postConfig: PostConfig
+  isEnabledPickUp: boolean
+}
+
+/** WordPress REST API のレンダリング済みフィールド */
+export type RenderedField = {
+  rendered: string
+}
+
+/** _embedded['wp:term'] の要素 */
+export type WpTerm = {
+  id: string | number
+  name: string
+  taxonomy?: string
+}
+
+/** _embedded['author'] の要素 */
+export type WpAuthor = {
+  name: string
+  avatar_urls?: Record<string, string>
+}
+
+/** _embedded['wp:featuredmedia'] の要素 */
+export type WpMedia = {
+  alt_text?: string
+  media_details?: {
+    sizes?: Record<string, { source_url?: string }>
+  }
+}
+
+/**
+ * WordPress REST API（?_embed 付き）の投稿。
+ * 実際のレスポンスは環境ごとにフィールドが増減するため、既知のフィールドのみ定義する
+ */
+export type Article = {
+  id: string | number
+  date: string
+  title: RenderedField
+  excerpt: RenderedField
+  categories?: string[]
+  _embedded?: {
+    author?: WpAuthor[]
+    'wp:featuredmedia'?: WpMedia[]
+    'wp:term'?: WpTerm[][]
+  }
+  [key: string]: unknown
+}

package/dist/types/vue-shim.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, never>, Record<string, never>, unknown>
+  export default component
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@geckou/ui-vue",
+  "version": "0.3.0",
+  "description": "A set of reusable Vue UI components (forms & article lists) by Geckou",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/geckou/ui.git",
+    "directory": "packages/vue"
+  },
+  "author": "geckou-shogo <shogo.nojima@geckou.net>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@geckou/ui-core": "^0.1.0",
+    "date-fns": "^4.4.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "convert-alias": "node scripts/convert-alias-to-relative.js",
+    "build": "yarn clean && rsync -av --exclude 'main.ts' --exclude 'App.vue' --exclude '.DS_Store' src/ dist/ && yarn convert-alias",
+    "type-check": "vue-tsc --noEmit",
+    "prepublishOnly": "yarn build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}