sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseButtonGroup.stories.js

@@ -1,114 +1,114 @@
-import { createFieldStory, options, sizes } from "../../.storybook/utils";
-import BaseButtonGroup from "./BaseButtonGroup.vue";
-import ShowValue from "../../.storybook/components/ShowValue.vue";
-
-export default {
-  title: "Form/BaseButtonGroup",
-  component: BaseButtonGroup,
-  argTypes: {
-    spacing: {
-      control: { type: "select" },
-      options: ["none", "default"],
-    },
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-  args: {
-    labelKey: "label",
-    valueKey: "value",
-    options: options,
-  },
-  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
-};
-
-const Template = (args) => ({
-  components: { BaseButtonGroup, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { args, value };
-  },
-  template: `
-    <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
-    <ShowValue :value="value"></ShowValue>
-  `,
-});
-
-export const Single = Template.bind({});
-Single.args = {};
-
-export const SingleRequired = Template.bind({});
-SingleRequired.args = {
-  required: true,
-};
-
-export const Multiple = Template.bind({});
-Multiple.args = {
-  multiple: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
-  modelValue: { label: "Dark Maul", value: "darth_maul" },
-};
-
-export const NoSpace = Template.bind({});
-NoSpace.args = {
-  spacing: "none",
-};
-
-export const SlotOption = (args) => ({
-  components: { BaseButtonGroup },
-  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: `
-  <BaseButtonGroup
-    v-bind="args"
-    v-model="value"
-    :options="options"
-    tw-button="btn btn-xl"
-    tw-button-selected="btn-black"
-    tw-button-unselected="btn-secondary-outline"
-  >
-    <template #option="{ option }">
-      <div class="flex items-center space-x-2 font-semibold">
-        <div class="w-3 h-3 rounded border border-white" :style="{ backgroundColor: option.value }"></div>
-        <div>{{ option.label }}</div>
-      </div>
-    </template>
-  </BaseButtonGroup>
-  `,
-});
-
-export const Sizes = (args) => ({
-  components: { BaseButtonGroup },
-  setup() {
-    const value = ref(null);
-    return { value, args, sizes };
-  },
-  template: `
-    <div v-for="size in sizes" :key="size" class="mb-4">
-      <p class="text-xs text-slate-600 leading-tight mb-1"> {{ size }}</p>
-      <BaseButtonGroup v-bind="args" v-model="value" :size="size"></BaseButtonGroup>
-    </div>
-  `,
-});
-
-export const Field = createFieldStory({
-  component: BaseButtonGroup,
-  componentName: "BaseButtonGroup",
-  label: "Choose your Jedi ou Sith",
-});
+import { createFieldStory, options, sizes } from "../../.storybook/utils";
+import BaseButtonGroup from "./BaseButtonGroup.vue";
+import ShowValue from "../../.storybook/components/ShowValue.vue";
+
+export default {
+  title: "Form/BaseButtonGroup",
+  component: BaseButtonGroup,
+  argTypes: {
+    spacing: {
+      control: { type: "select" },
+      options: ["none", "default"],
+    },
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+  args: {
+    labelKey: "label",
+    valueKey: "value",
+    options: options,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseButtonGroup, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
+    <ShowValue :value="value"></ShowValue>
+  `,
+});
+
+export const Single = Template.bind({});
+Single.args = {};
+
+export const SingleRequired = Template.bind({});
+SingleRequired.args = {
+  required: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: { label: "Dark Maul", value: "darth_maul" },
+};
+
+export const NoSpace = Template.bind({});
+NoSpace.args = {
+  spacing: "none",
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseButtonGroup },
+  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: `
+  <BaseButtonGroup
+    v-bind="args"
+    v-model="value"
+    :options="options"
+    tw-button="btn btn-xl"
+    tw-button-selected="btn-black"
+    tw-button-unselected="btn-secondary-outline"
+  >
+    <template #option="{ option }">
+      <div class="flex items-center space-x-2 font-semibold">
+        <div class="w-3 h-3 rounded border border-white" :style="{ backgroundColor: option.value }"></div>
+        <div>{{ option.label }}</div>
+      </div>
+    </template>
+  </BaseButtonGroup>
+  `,
+});
+
+export const Sizes = (args) => ({
+  components: { BaseButtonGroup },
+  setup() {
+    const value = ref(null);
+    return { value, args, sizes };
+  },
+  template: `
+    <div v-for="size in sizes" :key="size" class="mb-4">
+      <p class="text-xs text-slate-600 leading-tight mb-1"> {{ size }}</p>
+      <BaseButtonGroup v-bind="args" v-model="value" :size="size"></BaseButtonGroup>
+    </div>
+  `,
+});
+
+export const Field = createFieldStory({
+  component: BaseButtonGroup,
+  componentName: "BaseButtonGroup",
+  label: "Choose your Jedi ou Sith",
+});

package/src/components/BaseButtonGroup.vue

@@ -1,193 +1,193 @@
-<template>
-  <div
-    class=""
-    :class="wrapperClasses"
-  >
-    <BaseButton
-      v-for="option in normalizedOptions"
-      :key="option.value ? option.value : 'null'"
-      :type="buttonType"
-      :disabled="disabled"
-      :size="sizeInternal"
-      :class="buttonClasses"
-      :color="buttonColor(option, isSelected(option))"
-      @click="onSelect(option)"
-    >
-      <slot
-        name="option"
-        :selected="computed(() => isSelected(option))"
-        :option="option"
-        :disabled="disabled"
-      >
-        {{ option.label }}
-      </slot>
-    </BaseButton>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PropType, computed } from 'vue';
-import { NormalizedOption, RawOption } from '@/types';
-import { cloneDeep, isArray } from 'lodash';
-import { useHasOptions } from '@/composables/hasOptions';
-import { useField } from '@/composables/field';
-import BaseButton from '@/components/BaseButton.vue';
-import { Size } from '@/utils/sizes';
-import { twMerge } from 'tailwind-merge';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = defineProps({
-  modelValue: {
-    default: undefined,
-    type: [Object, Array, null, undefined] as PropType<
-      RawOption[] | RawOption | null | undefined
-    >,
-  },
-  class: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  disabled: {
-    default: false,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  buttonType: {
-    default: 'button',
-    type: String as PropType<'button' | 'submit'>,
-  },
-  buttonColor: {
-    default(option: RawOption, selected: boolean) {
-      return selected ? 'primary' : ''
-    },
-    type: Function as PropType<(option: RawOption, selected: boolean) => string>,
-  },
-  twButton: {
-    default: '',
-    type: [String, Array] as PropType<string | string[]>,
-  },
-  spacing: {
-    default: 'default',
-    type: String as PropType<'none' | 'default'>,
-  },
-  options: {
-    required: true,
-    type: Array as PropType<RawOption[]>,
-  },
-  labelKey: {
-    required: true,
-    type: String,
-  },
-  valueKey: {
-    required: true,
-    type: String,
-  },
-  multiple: {
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { requiredInternal, emitUpdate, sizeInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  size: computed(() => props.size),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
-  computed(() => props.modelValue),
-  computed(() => props.options),
-  computed(() => props.labelKey),
-  computed(() => props.valueKey),
-  computed(() => props.multiple)
-);
-
-function onSelect(option: NormalizedOption) {
-  if (props.multiple) {
-    let newModalValue = [] as NormalizedOption[];
-
-    if (isArray(normalizedModelValue.value)) {
-      newModalValue = cloneDeep(normalizedModelValue.value);
-    }
-
-    const exists = newModalValue.find((o) => o.value == option.value);
-
-    if (exists) {
-      newModalValue = newModalValue.filter((o) => o.value != option.value);
-    } else {
-      newModalValue.push(option);
-    }
-
-    emitUpdate(newModalValue.map((o) => o.option));
-  } else {
-    if (!requiredInternal.value) {
-      if (
-        !isArray(normalizedModelValue.value) &&
-        option.value == normalizedModelValue.value?.value
-      ) {
-        emitUpdate(null);
-        return;
-      }
-    }
-
-    const newOption = option.option;
-    emitUpdate(newOption);
-  }
-}
-
-const wrapperClasses = computed(() => {
-
-  const base = 'flex items-center';
-
-  let spacing = 'btn-group';
-
-  if (props.spacing != 'none') {
-    spacing = 'flex-wrap';
-    spacing += ' ';
-    spacing += {
-      "xs": "gap-0.5",
-      "sm": "gap-1",
-      "md": "gap-1.5",
-      "lg": "gap-1.5",
-      "xl": "gap-1.5",
-    }[sizeInternal.value]
-  }
-
-  return twMerge(
-    base,
-    spacing,
-    props.class,
-  );
-});
-
-const buttonClasses = computed(() => {
-  const base = props.spacing ? 'whitespace-nowrap' : '';
-
-  return twMerge([
-    base,
-    props.twButton,
-  ]);
-});
-</script>
+<template>
+  <div
+    class=""
+    :class="wrapperClasses"
+  >
+    <BaseButton
+      v-for="option in normalizedOptions"
+      :key="option.value ? option.value : 'null'"
+      :type="buttonType"
+      :disabled="disabled"
+      :size="sizeInternal"
+      :class="buttonClasses"
+      :color="buttonColor(option, isSelected(option))"
+      @click="onSelect(option)"
+    >
+      <slot
+        name="option"
+        :selected="computed(() => isSelected(option))"
+        :option="option"
+        :disabled="disabled"
+      >
+        {{ option.label }}
+      </slot>
+    </BaseButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, computed } from 'vue';
+import { NormalizedOption, RawOption } from '@/types';
+import { cloneDeep, isArray } from 'lodash';
+import { useHasOptions } from '@/composables/hasOptions';
+import { useField } from '@/composables/field';
+import BaseButton from '@/components/BaseButton.vue';
+import { Size } from '@/utils/sizes';
+import { twMerge } from 'tailwind-merge';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Object, Array, null, undefined] as PropType<
+      RawOption[] | RawOption | null | undefined
+    >,
+  },
+  class: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  buttonType: {
+    default: 'button',
+    type: String as PropType<'button' | 'submit'>,
+  },
+  buttonColor: {
+    default(option: RawOption, selected: boolean) {
+      return selected ? 'primary' : ''
+    },
+    type: Function as PropType<(option: RawOption, selected: boolean) => string>,
+  },
+  twButton: {
+    default: '',
+    type: [String, Array] as PropType<string | string[]>,
+  },
+  spacing: {
+    default: 'default',
+    type: String as PropType<'none' | 'default'>,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<RawOption[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { requiredInternal, emitUpdate, sizeInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  size: computed(() => props.size),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const { normalizedOptions, normalizedModelValue, isSelected } = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => props.multiple)
+);
+
+function onSelect(option: NormalizedOption) {
+  if (props.multiple) {
+    let newModalValue = [] as NormalizedOption[];
+
+    if (isArray(normalizedModelValue.value)) {
+      newModalValue = cloneDeep(normalizedModelValue.value);
+    }
+
+    const exists = newModalValue.find((o) => o.value == option.value);
+
+    if (exists) {
+      newModalValue = newModalValue.filter((o) => o.value != option.value);
+    } else {
+      newModalValue.push(option);
+    }
+
+    emitUpdate(newModalValue.map((o) => o.option));
+  } else {
+    if (!requiredInternal.value) {
+      if (
+        !isArray(normalizedModelValue.value) &&
+        option.value == normalizedModelValue.value?.value
+      ) {
+        emitUpdate(null);
+        return;
+      }
+    }
+
+    const newOption = option.option;
+    emitUpdate(newOption);
+  }
+}
+
+const wrapperClasses = computed(() => {
+
+  const base = 'flex items-center';
+
+  let spacing = 'btn-group';
+
+  if (props.spacing != 'none') {
+    spacing = 'flex-wrap';
+    spacing += ' ';
+    spacing += {
+      "xs": "gap-0.5",
+      "sm": "gap-1",
+      "md": "gap-1.5",
+      "lg": "gap-1.5",
+      "xl": "gap-1.5",
+    }[sizeInternal.value]
+  }
+
+  return twMerge(
+    base,
+    spacing,
+    props.class,
+  );
+});
+
+const buttonClasses = computed(() => {
+  const base = props.spacing ? 'whitespace-nowrap' : '';
+
+  return twMerge([
+    base,
+    props.twButton,
+  ]);
+});
+</script>