sprintify-ui 0.0.33 → 0.0.35

package/src/components/BaseRadioGroup.stories.js

@@ -0,0 +1,88 @@
+import BaseRadioGroup from './BaseRadioGroup.vue';
+
+export default {
+  title: 'Form/BaseRadioGroup',
+  component: BaseRadioGroup,
+  argTypes: {},
+  args: {
+    name: 'character',
+    labelKey: 'label',
+    valueKey: 'value',
+    options: [
+      { label: 'Dark Vader', value: 'dark_vader' },
+      { label: 'Darth Maul', value: 'darth_maul' },
+      { label: 'Dark Sidious', value: 'dark_sidious' },
+      { label: 'Obi Wan Kenobi', value: 'obiwan' },
+      { label: 'Anakin Skywalker', value: 'anakin' },
+      { label: 'Mace Windu', value: 'windu' },
+    ],
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseRadioGroup },
+  setup() {
+    const value = ref(null);
+    function onSubmit() {
+      alert('submit');
+    }
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit">
+    <BaseRadioGroup v-model="value" v-bind="args"></BaseRadioGroup>
+    <button type="submit" class="btn btn-primary mt-4">Submit</button>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: { label: 'Dark Maul', value: 'darth_maul' },
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseRadioGroup },
+  setup() {
+    const value = ref(null);
+
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Green', value: 'green' },
+      { label: 'Black', value: 'black' },
+      { label: 'Gray', value: 'gray' },
+    ];
+
+    return { value, options, args };
+  },
+  template: `
+  <BaseRadioGroup
+    v-bind="args"
+    v-model="value"
+    :options="options"
+    label-class="flex space-x-2 items-start"
+  >
+    <template #option="{ option }">
+      <div>
+        <div class="flex items-center space-x-1">
+          <div style="height: 10px; width: 10px; border-radius: 4px;" :style="{ backgroundColor: option.value }"></div>
+          <div class="leading-none font-medium text-sm">{{ option.label }}</div>
+        </div>
+        <p class="text-slate-500 text-xs leading-tight">{{ option.value }}</p>
+      </div>
+    </template>
+  </BaseRadioGroup>
+  `,
+});

package/src/components/BaseRadioGroup.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <ul class="space-y-3">
+      <li v-for="option in normalizedOptions" :key="option.value">
+        <label
+          :for="name + '-' + option.value"
+          class="cursor-pointer"
+          :class="[labelClass, disabled ? 'cursor-not-allowed opacity-50' : '']"
+        >
+          <input
+            :id="name + '-' + option.value"
+            type="radio"
+            :name="name"
+            :checked="isSelected(option)"
+            :required="required"
+            :disabled="disabled"
+            :value="option.value"
+            :class="inputClass"
+            @input="emit('update:modelValue', option.option)"
+          />
+
+          <slot name="option" :option="option">
+            <span class="text-sm">{{ option.label }}</span>
+          </slot>
+        </label>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Option } from '@/types/types';
+import { useHasOptions } from '@/composables/hasOptions';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Object, null] as PropType<Option | undefined>,
+  },
+  name: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  labelClass: {
+    default: 'flex space-x-2',
+    type: String,
+  },
+  inputClass: {
+    default: 'mt-0.5 border-slate-300',
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { normalizedOptions, isSelected } = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => false)
+);
+</script>

package/src/components/index.ts

@@ -46,6 +46,7 @@ import BasePagination from './BasePagination.vue';
 import BasePanel from './BasePanel.vue';
 import BasePassword from './BasePassword.vue';
 import BaseProgressCircle from './BaseProgressCircle.vue';
+import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -116,6 +117,7 @@ export {
   BasePanel,
   BasePassword,
   BaseProgressCircle,
+  BaseRadioGroup,
   BaseReadMore,
   BaseSelect,
   BaseSideNavigation,

package/src/index.ts

@@ -8,7 +8,6 @@ import fr from '@/lang/fr.json';
 import { useDialogsStore } from './stores/dialogs';
 import { useNotificationsStore } from './stores/notifications';
 import { useSystemAlertStore } from './stores/systemAlerts';
-import { ActionItem } from './types/types';
 
 const messages = { en, fr };
 
@@ -82,5 +81,3 @@ export { config };
 export { useDialogsStore };
 export { useNotificationsStore };
 export { useSystemAlertStore };
-
-export { type ActionItem };