revuekitz

Revuekitz

Powered by Re:vue

1. Overview

• "revuekitz" is a UI component library for Vue.js. I collected atomic and molecular level components based on atomic design from my site called Re:vue and turned them into a library.
  "revuekitz" は Vue.js 向けの UI コンポーネントライブラリです。私のサイト Re:vue で提供していた Atomic / Molecular レベルのコンポーネントをまとめ、ライブラリ化しました。

2. Project Code is "Ranunculus"

• In the language of flowers, the ranunculus symbolizes radiant charm and attractiveness. This symbolism perfectly mirrors our aspiration for the revuekitz library: to bring a radiant charm to web development and empower developers to create visually appealing and highly functional interfaces effortlessly. Just as the ranunculus flower stands out with its beauty, we aim for revuekitz to stand out with its elegance and efficiency in the world of UI components.
  花言葉で「ラナンキュラス」は輝く魅力や華やかさを象徴します。この象徴性は、revuekitz ライブラリの目指すところと完全に一致します。ウェブ開発に華やかさをもたらし、開発者が美しく機能的な UI を簡単に構築できるようにすることが目標です。ラナンキュラスの花がその華やかさで際立つように、revuekitz もその優雅さと高い効率性で際立つライブラリを目指しています。

3. How to Use

[!IMPORTANT] > Stylesheet path changed (v1.4.3~) The CSS file is now revuekitz/dist/revuekitz.css. The old path revuekitz/dist/style.css still works for now, but it is deprecated and will be removed in a future major version. Please update your import.
CSS ファイルのパスが revuekitz/dist/revuekitz.css に変わりました。旧パス revuekitz/dist/style.css も当面は使えますが非推奨で、今後のメジャーバージョンで削除予定です。import の書き換えをお願いします。

// Before
import 'revuekitz/dist/style.css'
// After
import 'revuekitz/dist/revuekitz.css'

npm install revuekitz

When importing components

import 'revuekitz/dist/revuekitz.css' // Import styles
import { BasicButton } from 'revuekitz'

4. UI Kitz

Buttons

• BasicButton
• LinkButton
• PushButton

Displays

• CardFlame
• ChipText
• CustomMessage
• LoadingLoader
• ModalDialog
• PageTitle
• TabPanel
• ToolTip

Fields

• CheckBoxField
• ColorField
• DateField
• FileDnd
• FileField
• MoneyField
• MultiLineField
• NumberField
• RadioField
• RangeField
• SelectField
• TextField
• ToggleSwitch

Icons

• ImgIcon
• SvgIcon

Layouts

• GridColumn
• GridRow
• LayoutFooter
• LayoutHeader
• LayoutWrapper
• NavBar
• NavBarItem

Lists

• AccordionMenu
• BasicList
• BreadcrumbList
• PaginateList
• TreeList
• ToDoList

Tables

• DataTable

Calendars

• EventCalendar

5. Release Note

# Updates in v1.4.4

Released on 2026-10-21

RadioField Improvements (Fix/Add/Update)

• Fixed the selected state so it is driven only by modelValue. The initial value is now reflected reliably, and the selection follows when the parent changes modelValue after mount. 選択状態をmodelValueだけで決めるように修正しました。初期値が確実に反映され、マウント後に親からmodelValueを変更した場合も選択が追従します。

• Fixed name being split into one character per radio, which prevented the radios from forming a single group. All radios now share the same name (no name attribute when it is not specified). nameが1文字ずつ各ラジオに割り当てられ、ラジオが1つのグループにまとまっていなかった不具合を修正しました。全ラジオに同じnameが付きます（未指定時はname属性なし）。

• isReadonly now prevents the selection from changing on click, since native readonly has no effect on radio buttons. ラジオボタンではネイティブのreadonlyが効かないため、isReadonly指定時はクリックで選択が変わらないようにしました。

• items now accepts { text, value } objects in addition to strings, so the label and value can differ. Strings keep working as before, and both forms can be mixed. itemsに文字列に加えて{ text, value }形式のオブジェクトも渡せるようにし、ラベルと値を別々に指定できるようにしました。従来の文字列もそのまま使え、混在も可能です。

• Breaking: The id of each radio input changed from the item value to {id}-{index} (an auto-generated unique prefix is used when id is not set). This prevents duplicate ids when the same items are used in multiple fields. If your CSS or tests relied on the old ids, please update them. 破壊的変更： 各ラジオのidを、項目の値から{id}-{index}の形式に変更しました（id未指定時は自動生成の一意な接頭辞を使用）。同じ選択肢のRadioFieldを複数置いてもidが重複しなくなります。旧idに依存したCSSやテストがある場合は修正してください。

Usage / 使用例

<script setup lang="ts">
import { ref } from 'vue'
import { RadioField } from 'revuekitz'

// Pattern 1: string items (label = value) / 文字列（ラベル＝値）
const color = ref('Blue')
const colorItems = ['Red', 'Blue', 'Green']

// Pattern 2: { text, value } items (label ≠ value) / ラベルと値を分ける
const plan = ref('pro')
const planItems = [
  { text: 'Free plan', value: 'free' },
  { text: 'Pro plan', value: 'pro' }
]
</script>

<template>
  <RadioField v-model="color" name="color" :items="colorItems" />
  <RadioField v-model="plan" name="plan" :items="planItems" />
  <!-- plan === 'pro' → "Pro plan" is selected / 「Pro plan」が選択された状態で表示 -->
</template>