@onereach/ui-components 4.1.1 → 4.1.2-beta.2552.0

package/src/components/or-form-group-v3/styles.ts

@@ -0,0 +1,26 @@
+import { FormGroupDirection } from './props';
+
+export const FormGroupRoot: string[] = [
+  // Layout
+  'flex',
+  'flex-col',
+  'gap-md md:gap-sm',
+];
+export const FormGroupContent: string[] = [
+  // Layout
+  'flex',
+  'pl-[10px] md:pl-[0]',
+  'gap-md md:gap-sm',
+];
+
+
+export const FormGroupContentDirections: Record<FormGroupDirection, string[]> = {
+  [FormGroupDirection.Vertical]: [
+    'flex-col',
+    'gap-sm',
+  ],
+  [FormGroupDirection.Horizontal]: [
+    'flex-row',
+    'gap-[18px] md:gap-md',
+  ],
+};

package/src/components/or-radio-group-v3/OrRadioGroup.stories3.ts

@@ -0,0 +1,81 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryFn } from '@storybook/vue3';
+import { ref, watch } from 'vue-demi';
+import OrRadioGroup from './OrRadioGroup.vue';
+import { FormGroupDirection } from '../or-form-group-v3';
+
+export default {
+  title: 'Components/Forms/Radio/Group',
+  component: OrRadioGroup,
+
+  argTypes: {
+    options: {
+      control: { type: 'object' },
+    },
+    direction: {
+      control: { type: 'select' },
+      options: Object.values(FormGroupDirection),
+    },
+  },
+
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof OrRadioGroup>;
+
+const Template: StoryFn<typeof OrRadioGroup> = (args) => ({
+  components: {
+    OrRadioGroup,
+  },
+
+  setup() {
+    // State
+    const model = ref<string>();
+
+    // Effects
+    watch(model, (value) => {
+      console.debug(value);
+    });
+
+    return {
+      args,
+      model,
+      onUpdateModelValue: action('update:modelValue'),
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrRadioGroup
+        v-model="model"
+        v-bind="args"
+        @update:modelValue="onUpdateModelValue"
+      />
+    </div>
+  `,
+});
+
+export const Group = Template.bind({});
+
+Group.args = {
+  label: 'Radio Group',
+  options: [
+    {
+      label: 'Radio 1',
+      value: 'radio-1',
+    },
+    {
+      label: 'Radio 2',
+      value: 'radio-2',
+    },
+    {
+      label: 'Radio 3',
+      value: 'radio-3',
+      disabled: true,
+    },
+    {
+      label: 'Radio 4',
+      value: 'radio-4',
+    },
+  ],
+};

package/src/components/or-radio-group-v3/OrRadioGroup.vue

@@ -0,0 +1,80 @@
+<template>
+  <OrFormGroup
+    :direction="direction"
+    :label="label"
+    :error="error"
+    :hint="hint"
+    :disabled="disabled"
+  >
+    <template v-slot:addon>
+      <slot name="addon" />
+    </template>
+    <OrRadio
+      v-for="option in options"
+      :key="option.value"
+      v-model="proxyModelValue"
+      :label="option.label"
+      :value="option.value"
+      :disabled="disabled || option.disabled"
+    />
+  </OrFormGroup>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
+import { OrFormGroupV3 as OrFormGroup, FormGroupDirection } from '../or-form-group-v3';
+import { OrRadioV3 as OrRadio } from '../or-radio-v3';
+
+export default defineComponent({
+  name: 'OrRadioGroup',
+  components: {
+    OrFormGroup,
+    OrRadio,
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue',
+  },
+
+  props: {
+    modelValue: {
+      type: null as any,
+      default: null,
+    },
+    direction: {
+      type: String as PropType<FormGroupDirection>,
+      default: 'vertical',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<{ label: string; value: any; disabled?: boolean;}[]>,
+      default: () => [],
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
+
+    return {
+      proxyModelValue,
+    };
+  },
+});
+</script>

package/src/components/or-radio-group-v3/index.ts

@@ -0,0 +1 @@
+export { default as OrRadioGroupV3 } from './OrRadioGroup.vue';

package/src/components/or-radio-v3/OrRadio.stories3.ts

@@ -7,7 +7,7 @@ import OrRadioDocs from './OrRadio.docs.mdx';
 import OrRadio from './OrRadio.vue';
 
 export default {
-  title: 'Components/Forms/Radio',
+  title: 'Components/Forms/Radio/Radio',
   component: OrRadio,
 
   argTypes: {