feat(radio-group): add radio-group component (#117)

* feat(radio-group): add radio-group component

* fix(radio-group): fix radio-group gap

* fix(radio-group): fix direction props type

src/index.ts

@@ -39,6 +39,7 @@ export { default as PCollapsiblePanel } from './data-display/collapsibles/collap
 export { default as PCheckBox } from './inputs/checkbox/PCheckBox.vue';
 export { default as PFieldGroup } from './inputs/forms/field-group/PFieldGroup.vue';
 export { default as PRadio } from './inputs/radio/PRadio.vue';
+export { default as PRadioGroup } from './inputs/radio-group/PRadioGroup.vue';
 export { default as PGridLayout } from './others/deprecated/grid-layout/PGridLayout.vue';
 export { default as PPaneLayout } from './layouts/pane-layout/PPaneLayout.vue';
 export { default as PSidebar } from './layouts/sidebar/PSidebar.vue';

src/inputs/radio-group/PRadioGroup.stories.mdx

@@ -0,0 +1,137 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import PRadioGroup from './PRadioGroup.vue';
+import { getCurrentInstance, reactive, toRefs } from 'vue';
+import { makeOptionalProxy } from '@/util/composition-helpers';
+import { getRadioGroupArgTypes } from '@/inputs/radio-group/story-helper'; import {PRadio} from "@";
+
+
+<Meta title='Inputs/Radio Group' parameters={{
+    design: {
+        type: 'figma',
+        url: 'https://www.figma.com/file/wq4wSowBcADBuUrMEZLz6i/SpaceONE-Console-Design?node-id=6169%3A162064'
+    }
+}} argTypes={getRadioGroupArgTypes()}/>
+
+
+export const Template = (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { PRadioGroup, PRadio },
+    template: `
+        <div class="h-full w-full overflow p-8 flex flex-col">
+            <p-radio-group :direction="direction">
+                <p-radio v-for="value in values"
+                         :key="value"
+                         :value="value"
+                         v-model="proxySelected"
+                >
+                    This is radio for {{value}}
+                </p-radio>
+            </p-radio-group>
+        </div>
+    `,
+    setup(props) {
+        const vm = getCurrentInstance()?.proxy
+        const state = reactive({
+            proxySelected: makeOptionalProxy('selected', vm, props.selected),
+            values: [0, 1, 2, 3],
+        })
+        return {
+            ...toRefs(state)
+        }
+    }
+});
+
+
+# Radio Group
+<br/>
+<br/>
+
+## Basic
+
+<Canvas>
+    <Story name="Basic">
+        {{
+            components: { PRadioGroup, PRadio },
+            template: `
+                <div>
+                    <div class="flex flex-col">
+                        <p-radio-group>
+                            <p-radio v-for="value in values" v-model="selected" :value="value" :key="value">
+                                This is radio for {{value}}
+                            </p-radio>
+                        </p-radio-group>
+                    </div>
+                </div>
+            `,
+            setup() {
+                const state = reactive({
+                    selected: undefined,
+                    values: [0, 1, 2, 3]
+                })
+                return {
+                    ...toRefs(state)
+                };
+            },
+        }}
+    </Story>
+</Canvas>
+
+<br/>
+<br/>
+
+## Direction
+
+<Canvas>
+    <Story name="Direction">
+        {{
+            components: { PRadioGroup, PRadio },
+            template: `
+            <div>
+                <div class="flex flex-col row-gap-8">
+                    <div class="flex flex-col row-gap-2">
+                        <p>Horizontal (default)</p>
+                        <p-radio-group direction="horizontal">
+                            <p-radio :key="value" v-for="value in horizontalValues" v-model="horizontalSelected" :value="value">
+                                {{value}}
+                            </p-radio>
+                        </p-radio-group>
+                    </div>
+                    <div class="flex flex-col row-gap-2">
+                        <p>Vertical</p>
+                        <p-radio-group direction="vertical">
+                            <p-radio :key="value" v-for="value in verticalValues" v-model="verticalSelected" :value="value">
+                                {{value}}
+                            </p-radio>
+                        </p-radio-group>
+                    </div>
+                </div>
+            </div>
+        `,
+            setup() {
+                const state = reactive({
+                    horizontalValues: [true, false],
+                    horizontalSelected: true,
+                    verticalValues: [true, false],
+                    verticalSelected: true,
+                })
+                return {
+                    ...toRefs(state)
+                };
+            },
+        }}
+    </Story>
+</Canvas>
+
+<br/>
+<br/>
+
+## Playground
+
+<Canvas>
+    <Story name="Playground">
+        {Template.bind({})}
+    </Story>
+</Canvas>
+
+<ArgsTable story="Playground"/>
+

src/inputs/radio-group/PRadioGroup.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="p-radio-group" :class="direction">
+        <slot name="default" />
+    </div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import {
+    defineComponent,
+} from 'vue';
+
+import type { Direction } from '@/inputs/radio-group/type';
+import { DIRECTION } from '@/inputs/radio-group/type';
+
+interface RadioGroupProps {
+    direction?: Direction;
+}
+export default defineComponent<RadioGroupProps>({
+    name: 'PRadioGroup',
+    components: { },
+    props: {
+        direction: {
+            type: String as PropType<Direction>,
+            default: DIRECTION.horizontal,
+            validator(value: Direction) {
+                return Object.values(DIRECTION).includes(value);
+            },
+        },
+    },
+});
+</script>
+
+<style lang="postcss">
+.p-radio-group {
+    &.horizontal {
+        .p-radio {
+            @apply inline-block;
+            margin-right: 1rem;
+        }
+    }
+    &.vertical {
+        @apply flex flex-col row-gap-1;
+    }
+}
+</style>

src/inputs/radio-group/story-helper.ts

@@ -0,0 +1,25 @@
+import type { ArgTypes } from '@storybook/addons';
+
+import { DIRECTION } from '@/inputs/radio-group/type';
+
+export const getRadioGroupArgTypes = (): ArgTypes => ({
+    direction: {
+        name: 'direction',
+        type: { name: 'string' },
+        description: 'Radio buttons alignment direction',
+        defaultValue: DIRECTION.horizontal,
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'props',
+            defaultValue: {
+                summary: DIRECTION.horizontal,
+            },
+        },
+        control: {
+            type: 'select',
+            options: Object.values(DIRECTION),
+        },
+    },
+});

src/inputs/radio-group/type.ts

@@ -0,0 +1,6 @@
+export const DIRECTION = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+} as const;
+
+export type Direction = typeof DIRECTION[keyof typeof DIRECTION]