@geckou/ui-vue 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Geckou LLC
+
+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,253 @@
+# @geckou/ui-vue
+
+Vue 3 用の再利用可能な UI コンポーネント集。
+入力フォーム系のコンポーネントと、WordPress REST API の記事データをそのまま渡せる記事一覧コンポーネント（10 レイアウト）を収録しています。
+
+バリデーション・日付処理などのロジックは [`@geckou/ui-core`](../core) が持ちます。
+同じ core を [`@geckou/ui-react`](../react) も使うため、両者の挙動は一致します。
+
+**デモサイト: https://ui.geckou.net/**
+
+## Installation
+
+```bash
+yarn add @geckou/ui-vue
+```
+
+Vue 本体は同梱していません。プロジェクト側の Vue 3.0 以上を使います（`peerDependencies`）。
+
+## Usage
+
+```ts
+import { createApp } from 'vue'
+import GeckouUi from '@geckou/ui-vue'
+import App from './App.vue'
+
+createApp(App).use(GeckouUi).mount('#app')
+```
+
+```ts
+// 個別インポート
+import { TextBox, StandardList } from '@geckou/ui-vue'
+```
+
+デザイントークン（CSS カスタムプロパティ）の定義はリポジトリの [README](../../README.md#design-tokens) を参照してください。
+
+## Components
+
+### Form
+
+`TextBox` / `TextArea` / `SelectBox` / `CheckBox` / `CheckBoxes` / `CheckButton` /
+`LabeledCheckbox` / `LabeledFieldset` / `RadioButtons` / `ToggleButton` / `BasicButton` /
+`TextButton` / `InputBox` / `InputGroup` / `TabUI` / `SlideDownUi` / `DropdownUi` /
+`ModalBox` / `PopupBox` / `LoadingSpinner` / `ErrorMessage`
+
+### Date
+
+`DatePicker` / `DateRangePicker` / `DateSelector`
+
+`FormValidationManager` を渡すと、フォーム内の各入力の検証結果をまとめて追跡できます。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DatePicker, DateRangePicker, FormValidationManager } from '@geckou/ui-vue'
+
+const manager = new FormValidationManager()
+const startedOn = ref('')
+const period = ref({ start: '', end: '' })
+// manager.isAllValid.value / manager.invalidNames.value で状態を参照する
+</script>
+
+<template>
+  <DatePicker
+    v-model="startedOn"
+    name="startedOn"
+    :formValidationManager="manager"
+    isRequired
+  />
+  <DateRangePicker
+    v-model="period"
+    name="period"
+  />
+  <button :disabled="!manager.isAllValid.value">送信</button>
+</template>
+```
+
+| Component | modelValue | 主な props |
+|-----------|-----------|-----------|
+| `DatePicker` | `string`（`YYYY-MM-DD` / `type="month"` なら `YYYY-MM`） | `name` / `isRequired` / `isDisabled` / `minDate` / `maxDate` / `size` / `type` / `formValidationManager` |
+| `DateRangePicker` | `{ start: string; end: string }` | `DatePicker` と同じ（開始日と終了日の min / max が自動連動） |
+| `DateSelector` | `string`（`YYYY-MM-DD`） | `name` / `isRequired` / `type` / `formValidationManager` |
+
+### Article List
+
+`StandardList` / `RoundedList` / `ArtisticList` / `TileList` / `SimpleList` /
+`RowList` / `NewsList` / `EntertainmentList` / `GalleryList` / `GridList`
+
+WordPress REST API（`?_embed` 付き）のレスポンス配列をそのまま渡せます。
+
+```vue
+<script setup lang="ts">
+import type { Category, ListSettings } from '@geckou/ui-vue'
+import { StandardList } from '@geckou/ui-vue'
+
+const settings: ListSettings = {
+  domainToUse: 'example.com',
+  postConfig : {
+    article_page_path: '/article/',
+    query_key_name   : 'article',
+    useAuthor        : true,
+    useCategory      : true,
+    useTag           : true,
+  },
+  isEnabledPickUp: true,
+}
+
+const categories: Category[] = [{ id: '1', name: 'デザイン' }]
+const articles = ref<any[]>([])
+</script>
+
+<template>
+  <StandardList
+    :articles="articles"
+    :categories="categories"
+    :settings="settings"
+  />
+</template>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `articles` | `any[]` | ✅ | WordPress REST API のレスポンス配列 |
+| `categories` | `Category[]` | ✅ | カテゴリ ID と表示名の対応 |
+| `settings` | `ListSettings` | ✅ | 記事リンクの組み立て設定と表示オプション |
+| `columnNumber` | `number` | `GridList` のみ ✅ | グリッドのカラム数 |
+
+## Types
+
+### `BorderStyle`
+
+| Prop Name           | Type            | Required | Description                                                |
+|---------------------|-----------------|----------|------------------------------------------------------------|
+| `color`             | `string`        | ✅       | ボーダーの色                                               |
+| `size`              | `string`        | ✅       | ボーダーの太さ                                             |
+| `radius`            | `string`        | ✅       | 角丸の大きさ                                               |
+
+### `InputBoxStyle`
+
+| Prop Name           | Type            | Required | Description                                                |
+|---------------------|-----------------|----------|------------------------------------------------------------|
+| `textColor`         | `string`        | ❌       | テキストの色                                               |
+| `placeholderColor`  | `string`        | ❌       | プレスホルダーの色                                         |
+| `border`            | `BorderStyle`   | ❌       | ボーダーのスタイル                                         |
+| `backgroundColor`   | `string`        | ❌       | 背景色                                                     |
+| `boxShadow`         | `string`        | ❌       | 影のスタイル                                               |
+
+### `InputBoxStyleForEachStatus`
+
+| Prop Name | Type                   | Required | Description                                                |
+|-----------|------------------------|----------|------------------------------------------------------------|
+| `default` | `InputBoxStyle`        | ✅       | デフォルトのスタイル                                        |
+| `error`   | `InputBoxStyle`        | ❌       | エラー時のスタイル                                         |
+| `disabled`| `InputBoxStyle`        | ❌       | 非活性時のスタイル                                         |
+| `valid`   | `InputBoxStyle`        | ❌       | 入力した値が有効な時のスタイル                             |
+| `focus`   | `InputBoxStyle`        | ❌       | フォーカス時のスタイル                                     |
+
+### `ButtonStyle`
+
+| Prop Name          | Type            | Required | Description                                                |
+|--------------------|-----------------|----------|------------------------------------------------------------|
+| `textColor`        | `string`        | ❌       | Specifies the button text color.                          |
+| `border`           | `BorderStyle`   | ❌       | Defines the border style for the button.                  |
+| `backgroundColor`  | `string`        | ❌       | Specifies the button's background color.                  |
+| `backgroundImage`  | `string`        | ❌       | Specifies the background image or gradient.               |
+| `boxShadow`        | `string`        | ❌       | Specifies the box shadow for the button.                  |
+
+### `ButtonStyleForEachStatus`
+
+| Prop Name | Type            | Required | Description                                                |
+|-----------|-----------------|----------|------------------------------------------------------------|
+| `default` | `ButtonStyle`   | ✅      | The style applied in the default state.                   |
+| `hover`   | `ButtonStyle`   | ❌       | The style applied when the button is hovered.             |
+| `disabled`| `ButtonStyle`   | ❌       | The style applied when the button is disabled.            |
+
+### `CheckBoxStyle`
+
+| Prop Name          | Type            | Required | Description                                                |
+|--------------------|-----------------|----------|------------------------------------------------------------|
+| `border`           | `BorderStyle`   | ❌       | Defines the border style for the checkbox.                |
+| `backgroundColor`  | `string`        | ❌       | Specifies the background color for the checkbox.          |
+
+### `CheckBoxStyleForEachStatus`
+
+| Prop Name | Type             | Required | Description                                                |
+|-----------|------------------|----------|------------------------------------------------------------|
+| `default` | `CheckBoxStyle`  | ✅      | The style applied in the default state.                   |
+| `disabled`| `CheckBoxStyle`  | ❌       | The style applied when the checkbox is disabled.          |
+
+### `RadioButtonStyle`
+
+| Prop Name          | Type                           | Required | Description                                                |
+|--------------------|--------------------------------|----------|------------------------------------------------------------|
+| `border`           | `Omit<BorderStyle, 'radius'>` | ❌       | Defines the border style without a border radius.         |
+| `backgroundColor`  | `string`                      | ❌       | Specifies the background color for the radio button.      |
+
+### `RadioButtonStyleForEachStatus`
+
+| Prop Name | Type                 | Required | Description                                                |
+|-----------|----------------------|----------|------------------------------------------------------------|
+| `default` | `RadioButtonStyle`   | ✅      | The style applied in the default state.                   |
+| `disabled`| `RadioButtonStyle`   | ❌       | The style applied when the radio button is disabled.      |
+
+### `Validates`
+
+| Prop Name  | Type       | Required | Description                                                |
+|------------|------------|----------|------------------------------------------------------------|
+| `regex`    | `RegExp`   | ✅      | The regular expression used for validation.               |
+| `message`  | `string`   | ✅      | The error message displayed when validation fails.        |
+
+### `Category`
+
+| Prop Name | Type     | Required | Description                    |
+|-----------|----------|----------|--------------------------------|
+| `id`      | `string` | ✅       | WordPress のカテゴリ ID        |
+| `name`    | `string` | ✅       | 表示するカテゴリ名             |
+
+### `PostConfig`
+
+| Prop Name           | Type      | Required | Description                                          |
+|---------------------|-----------|----------|------------------------------------------------------|
+| `article_page_path` | `string`  | ✅       | 記事詳細ページのパス                                 |
+| `query_key_name`    | `string`  | ✅       | 記事 ID を渡すクエリキー                             |
+| `useAuthor`         | `boolean` | ❌       | 著者を表示するか                                     |
+| `useCategory`       | `boolean` | ❌       | カテゴリを表示するか                                 |
+| `useTag`            | `boolean` | ❌       | タグを表示するか                                     |
+
+### `ListSettings`
+
+| Prop Name         | Type         | Required | Description                                |
+|-------------------|--------------|----------|--------------------------------------------|
+| `domainToUse`     | `string`     | ✅       | 記事リンクに使うドメイン                   |
+| `postConfig`      | `PostConfig` | ✅       | 記事詳細ページの組み立て設定               |
+| `isEnabledPickUp` | `boolean`    | ✅       | 先頭の記事を大きく表示するか               |
+
+## Component Props (Form)
+### `TextBox`
+
+| Prop Name          | Type                        | Required | Default            | Description                                    |
+|--------------------|-----------------------------|----------|--------------------|------------------------------------------------|
+| `modelValue`       | `string \| number`          | ✅       | -                  | テキストボックスの値                           |
+| `name`             | `string`                    | ✅       | -                  | `name`属性                                     |
+| `cssStyle`         | `InputBoxStyleForEachStatus`| ❌       | -                  | テキストボックスのスタイル                     |
+| `type`             | `string`                    | ❌       | `text`             | テキストボックスのタイプ                       |
+| `isDisabled`       | `boolean`                   | ❌       | `false`            | テキストボックスの活性/非活性                  |
+| `isRequired`       | `boolean`                   | ❌       | `false`            | 必須項目かどうか                               |
+| `maxLength`        | `number`                    | ❌       | `30`               | 最大入力文字数                                 |
+| `autocomplete`     | `string`                    | ❌       | `off`              | `autocomplete`属性                             |
+| `validates`        | `Validates[]`               | ❌       | `[]`               | バリデーションの設定                           |
+
+
+## License
+
+[MIT](../../LICENSE)

package/dist/assets/scss/functions.scss

@@ -0,0 +1,6 @@
+@function calcClamp($minValuePx, $maxValuePx, $minViewport, $maxViewport) {
+  $variablePart: calc(($maxValuePx - $minValuePx) / ($maxViewport - $minViewport));
+  $constant: calc(($maxValuePx - $maxViewport * $variablePart) / 16);
+
+  @return clamp(#{calc($minValuePx / 16)}rem, #{$constant}rem + #{100 * $variablePart}vw, #{calc($maxValuePx / 16)}rem);
+}

package/dist/assets/scss/mixin.scss

@@ -0,0 +1,33 @@
+@mixin textEllipsis($line: 1) {
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;  
+  overflow: hidden;
+}
+
+@mixin icon($size: var(--medium-icon-size), $color: var(--text-color)) {
+  width     : 100%;
+  height    : 100%;
+  max-width : $size;
+  max-height: $size;
+  fill      : $color;
+}
+
+$tabletLowerWidth : 576px;
+$desktopLowerWidth: 992px;
+$contentsMaxWidth : 1200px;
+
+@mixin media($range) {
+  @if $range == 'mobile' {
+    @container (width <= #{$tabletLowerWidth}) { @content; }
+  } @else if $range == 'tablet' {
+    @container (#{$tabletLowerWidth} <= width) { @content; }
+  } @else if $range == 'desktop' {
+    @container (#{$desktopLowerWidth} <= width) { @content; }
+  }
+}
+
+
+
+
+

package/dist/components/ArticleList/Card/Artistic.vue

@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import type {
+  Article,
+  Category,
+  PostConfig,
+} from '../../../types'
+import CardContainer from '../../../components/ArticleList/Parts/CardContainer.vue'
+import ThumbnailImage from '../../../components/ArticleList/Parts/ThumbnailImage.vue'
+import AuthorInfo from '../../../components/ArticleList/Parts/AuthorInfo.vue'
+import CardHeading from '../../../components/ArticleList/Parts/CardHeading.vue'
+import CategoryList from '../../../components/ArticleList/Parts/CategoryList.vue'
+import TagList from '../../../components/ArticleList/Parts/TagList.vue'
+import PostedDate from '../../../components/ArticleList/Parts/PostedDate.vue'
+import ExcerptText from '../../../components/ArticleList/Parts/ExcerptText.vue'
+
+defineProps<{
+  article: Article
+  path: string
+  isPickUpItem: boolean
+  postConfig: PostConfig
+  categories: Category[]
+}>()
+</script>
+
+<template>
+  <div :class="[$style.wrapper, { [$style.pickup]: isPickUpItem }]">
+    <CardContainer
+      v-if="article"
+      :class="$style.container"
+      :path="path"
+    >
+      <ThumbnailImage
+        :article="article"
+        :aspectRatio="{
+          desktop: isPickUpItem ? '21/9' : '4/3',
+          tablet : isPickUpItem ? '21/9' : '4/3',
+          mobile : '4/3',
+        }"
+        :class="$style.thumbnail"
+        style="grid-area: thumbnail;"
+      />
+      <div :class="$style.overlay">
+        <ExcerptText
+          :excerpt="article.excerpt.rendered"
+          :class="$style.excerpt"
+          color="var(--white)"
+          style="grid-area: excerpt;"
+        />
+      </div>
+      <PostedDate
+        :date="article.date"
+        formatString="yy.M.d"
+        :class="$style.date"
+        style="grid-area: date;"
+      />
+      <CardHeading
+        :heading="article.title.rendered"
+        :class="$style.heading"
+        style="grid-area: heading;"
+      />
+      <TagList
+        v-if="postConfig.tag"
+        :article="article"
+        :label="{
+          color : 'var(--text-color)',
+          fontSize: 'smaller',
+        }"
+        :class="$style.tag"
+        delimiter="/"
+        style="grid-area: tag;"
+      />
+      <AuthorInfo
+        v-if="postConfig.author"
+        :avatarUrls="article._embedded.author[0].avatar_urls"
+        :thumbnail="{
+          size: 'large',
+          shape: 'circle'
+        }"
+        :class="$style.author"
+        style="grid-area: author;"
+      />
+      <CategoryList
+        v-if="postConfig.category && article.categories"
+        :categoryIds="article.categories"
+        :categoryData="categories"
+        :label="{
+          backgroundColor: 'var(--main-color)',
+          color : 'var(--white)',
+          fontSize : 'small',
+        }"
+        :class="$style.category"
+        style="grid-area: category;"
+      />
+    </CardContainer>
+  </div>
+</template>
+
+<style lang="scss" module>
+@use '../../../assets/scss/mixin' as *;
+
+@mixin borderOnHover {
+  content         : '';
+  display         : block;
+  background-color: var(--primary-color);
+  position        : absolute;
+  transition      : all var(--animation-duration);
+}
+
+.wrapper {
+  display   : block;
+  width     : 100%;
+  height    : 100%;
+  position  : relative;
+  box-shadow: 0 0 var(--sp-medium) 0 rgba(var(--black-rgb), .1);
+
+  &::before,
+  &::after {
+    @include borderOnHover;
+    width : 0;
+    height: 2px;
+  }
+
+  &::before {
+    top : -2px;
+    left: -2px;
+  }
+
+  &::after {
+    bottom: -2px;
+    right : -2px;
+  }
+
+  &:hover {
+    &::before,
+    &::after {
+      width: calc(100% + 4px);
+    }
+
+    .container {
+      &::before,
+      &::after {
+        height: calc(100% + 4px);
+      }
+    }
+
+    .overlay,
+    .excerpt {
+      opacity: 1;
+    }
+  }
+
+  &.pickup {
+    @include media('tablet') {
+      aspect-ratio: 21/9;
+
+      .container {
+        grid-template-rows: 0 0 0 auto auto 1fr 0;
+        grid-template-areas: 
+          'excerpt'
+          'category'
+          'thumbnail'
+          'heading'
+          'date'
+          'tag'
+          'author';
+      }
+
+      .thumbnail {
+        opacity: .4;
+        position: absolute;
+        top     : 0;
+        left    : 0;
+      }
+
+      .heading,
+      .date,
+      .tag,
+      .author,
+      .category {
+        position: relative;
+        z-index : 2;
+      }
+
+      .category,
+      .author {
+        position: absolute;
+      }
+
+      .excerpt {
+        display          : flex;
+        align-items      : flex-end;
+        padding-block-end: var(--sp-large);
+      }
+
+      .category {
+        top : 0;
+        left: 0;
+      }
+
+      .author {
+        margin: 0;
+        bottom: var(--sp-large);
+        right : var(--sp-large);
+      }
+
+      .heading {
+        padding-block-start: var(--sp-large);
+        font-size          : xx-large;
+      }
+
+      .tag {
+        display    : flex;
+        align-items: flex-start;
+        margin     : 0;
+      }
+    }
+  }
+}
+
+.container {
+  grid-template-columns: 1fr;
+  grid-template-rows   : 0 fit-content(55%) auto auto 1fr auto auto;
+  grid-template-areas  : 
+    'excerpt'
+    'thumbnail'
+    'date'
+    'heading'
+    'tag'
+    'author'
+    'category';
+  text-align: center;
+  position  : relative;
+  height    : 100%;
+
+  &::before,
+  &::after {
+    @include borderOnHover;
+    width : 2px;
+    height: 0;
+  }
+
+  &::before {
+    bottom: -2px;
+    left  : -2px;
+  }
+
+  &::after {
+    top  : -2px;
+    right: -2px;
+  }
+}
+
+.overlay,
+.excerpt {
+  width       : 100%;
+  max-height  : 100%;
+  position    : absolute;
+  opacity     : 1;
+  aspect-ratio: 4/3;
+
+  @include media('desktop') {
+    opacity: 0;
+  }
+} 
+
+.date {
+  display        : flex;
+  justify-content: center;
+  margin-block   : calc(var(--bv) * 2) var(--bv);
+}
+
+.heading {
+  padding: 0 calc(var(--bv) * 2);
+}
+
+.excerpt {
+  display        : flex;
+  justify-content: center;
+  align-items    : center;
+  height         : 100%;
+  padding        : 0 calc(var(--bv) * 2);
+  position       : absolute;
+  top            : 0;
+}
+
+.author {
+  justify-content: center;
+  margin-block   : var(--sp-large);
+}
+
+.category {
+  display        : flex;
+  justify-content: center;
+}
+
+.overlay {
+  background-image: linear-gradient(to bottom,
+    rgb(var(--black-rgb), 0) 0%,
+    rgba(var(--black-rgb), .5) 66%,
+    rgba(var(--black-rgb), .8) 100%);
+  backdrop-filter : blur(4px);
+}
+
+.tag {
+  display        : flex;
+  align-items    : center;
+  justify-content: center;
+  margin-block   : var(--sp-medium);
+}
+</style>