sprintify-ui 0.0.30 → 0.0.32

package/dist/types/src/components/BaseButtonGroup.vue.d.ts

@@ -0,0 +1,288 @@
+import { PropType } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            required: boolean;
+            modelValue: Option | Option[] | undefined;
+            disabled: boolean;
+            multiple: boolean;
+            buttonClass: string;
+            buttonType: "button" | "submit";
+            buttonActiveClass: string;
+            buttonInactiveClass: string;
+            spacing: string;
+        }> & Omit<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: undefined;
+                type: PropType<Option | Option[] | undefined>;
+            };
+            required: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            buttonType: {
+                default: string;
+                type: PropType<"button" | "submit">;
+            };
+            buttonClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            buttonActiveClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            buttonInactiveClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            spacing: {
+                default: string;
+                type: StringConstructor;
+            };
+            options: {
+                required: true;
+                type: PropType<Option[]>;
+            };
+            labelKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            valueKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            multiple: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "required" | "modelValue" | "disabled" | "multiple" | "buttonClass" | "buttonType" | "buttonActiveClass" | "buttonInactiveClass" | "spacing">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $emit: (event: "update:modelValue", ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+            modelValue: {
+                default: undefined;
+                type: PropType<Option | Option[] | undefined>;
+            };
+            required: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            disabled: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+            buttonType: {
+                default: string;
+                type: PropType<"button" | "submit">;
+            };
+            buttonClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            buttonActiveClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            buttonInactiveClass: {
+                default: string;
+                type: StringConstructor;
+            };
+            spacing: {
+                default: string;
+                type: StringConstructor;
+            };
+            options: {
+                required: true;
+                type: PropType<Option[]>;
+            };
+            labelKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            valueKey: {
+                required: true;
+                type: StringConstructor;
+            };
+            multiple: {
+                default: boolean;
+                type: BooleanConstructor;
+            };
+        }>> & {
+            "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
+            required: boolean;
+            modelValue: Option | Option[] | undefined;
+            disabled: boolean;
+            multiple: boolean;
+            buttonClass: string;
+            buttonType: "button" | "submit";
+            buttonActiveClass: string;
+            buttonInactiveClass: string;
+            spacing: string;
+        }, {}, string> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<{
+        modelValue: {
+            default: undefined;
+            type: PropType<Option | Option[] | undefined>;
+        };
+        required: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        disabled: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+        buttonType: {
+            default: string;
+            type: PropType<"button" | "submit">;
+        };
+        buttonClass: {
+            default: string;
+            type: StringConstructor;
+        };
+        buttonActiveClass: {
+            default: string;
+            type: StringConstructor;
+        };
+        buttonInactiveClass: {
+            default: string;
+            type: StringConstructor;
+        };
+        spacing: {
+            default: string;
+            type: StringConstructor;
+        };
+        options: {
+            required: true;
+            type: PropType<Option[]>;
+        };
+        labelKey: {
+            required: true;
+            type: StringConstructor;
+        };
+        valueKey: {
+            required: true;
+            type: StringConstructor;
+        };
+        multiple: {
+            default: boolean;
+            type: BooleanConstructor;
+        };
+    }>> & {
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        default: undefined;
+        type: PropType<Option | Option[] | undefined>;
+    };
+    required: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    disabled: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+    buttonType: {
+        default: string;
+        type: PropType<"button" | "submit">;
+    };
+    buttonClass: {
+        default: string;
+        type: StringConstructor;
+    };
+    buttonActiveClass: {
+        default: string;
+        type: StringConstructor;
+    };
+    buttonInactiveClass: {
+        default: string;
+        type: StringConstructor;
+    };
+    spacing: {
+        default: string;
+        type: StringConstructor;
+    };
+    options: {
+        required: true;
+        type: PropType<Option[]>;
+    };
+    labelKey: {
+        required: true;
+        type: StringConstructor;
+    };
+    valueKey: {
+        required: true;
+        type: StringConstructor;
+    };
+    multiple: {
+        default: boolean;
+        type: BooleanConstructor;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
+    required: boolean;
+    modelValue: Option | Option[] | undefined;
+    disabled: boolean;
+    multiple: boolean;
+    buttonClass: string;
+    buttonType: "button" | "submit";
+    buttonActiveClass: string;
+    buttonInactiveClass: string;
+    spacing: string;
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        option: (_: {
+            isActive: (option: NormalizedOption) => boolean;
+            onSelect: (option: NormalizedOption) => void;
+            option: NormalizedOption;
+        }) => any;
+    };
+});
+export default _default;

package/dist/types/src/index.d.ts

@@ -27,6 +27,7 @@ declare const messages: {
             error: string;
             file_must_be_of_type: string;
             filters: string;
+            go_to_page: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -34,7 +35,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            of: string;
             or: string;
+            page: string;
             pagination_detail: string;
             previous: string;
             previous_month: string;
@@ -88,6 +91,7 @@ declare const messages: {
             error: string;
             file_must_be_of_type: string;
             filters: string;
+            go_to_page: string;
             min_x_characters: string;
             month: string;
             next: string;
@@ -95,7 +99,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            of: string;
             or: string;
+            page: string;
             pagination_detail: string;
             previous: string;
             previous_month: string;
@@ -160,6 +166,7 @@ declare const config: {
                 error: string;
                 file_must_be_of_type: string;
                 filters: string;
+                go_to_page: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -167,7 +174,9 @@ declare const config: {
                 none: string;
                 nothing_found: string;
                 notifications_empty: string;
+                of: string;
                 or: string;
+                page: string;
                 pagination_detail: string;
                 previous: string;
                 previous_month: string;
@@ -221,6 +230,7 @@ declare const config: {
                 error: string;
                 file_must_be_of_type: string;
                 filters: string;
+                go_to_page: string;
                 min_x_characters: string;
                 month: string;
                 next: string;
@@ -228,7 +238,9 @@ declare const config: {
                 none: string;
                 nothing_found: string;
                 notifications_empty: string;
+                of: string;
                 or: string;
+                page: string;
                 pagination_detail: string;
                 previous: string;
                 previous_month: string;

package/dist/types/src/types/types.d.ts

@@ -14,7 +14,7 @@ export interface DataTableQuery extends Record<string, any> {
 }
 export type OptionValue = string | number;
 export type Option = Record<string, any>;
-export type Selection = Record<string, any> | null | undefined;
+export type Selection = Option | null | undefined;
 export type NormalizedOption = {
     option: Option;
     value: OptionValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -8,7 +8,8 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "prepack": "npm run build"
   },
   "peerDependencies": {
     "@tailwindcss/aspect-ratio": "^0.4.2",

package/src/components/BaseButtonGroup.stories.js

@@ -0,0 +1,87 @@
+import BaseButtonGroup from './BaseButtonGroup.vue';
+
+export default {
+  title: 'Form/BaseButtonGroup',
+  component: BaseButtonGroup,
+  argTypes: {},
+  args: {
+    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: { BaseButtonGroup },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseButtonGroup v-model="value" v-bind="args"></BaseButtonGroup>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+  `,
+});
+
+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 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"
+  >
+    <template #option="{ option, isActive, onSelect }">
+      <button
+        class="btn btn-xs flex items-center space-x-1 font-semibold"
+        :class="[isActive(option) ? 'btn-black' : '']"
+        type="button"
+        @click="onSelect(option)"
+      >
+        <div class="w-3 h-3 rounded" :style="{ backgroundColor: option.value }"></div>
+        <div>{{ option.label }}</div>
+      </button>
+    </template>
+  </BaseButtonGroup>
+  `,
+});

package/src/components/BaseButtonGroup.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="flex flex-wrap" :style="{ margin: '-' + spacing }">
+    <div
+      v-for="option in normalizedOptions"
+      :key="option.value"
+      :style="{ padding: spacing }"
+    >
+      <slot
+        name="option"
+        :is-active="isActive"
+        :on-select="onSelect"
+        :option="option"
+      >
+        <button
+          :type="buttonType"
+          :disabled="disabled"
+          :class="[
+            buttonClass,
+            isActive(option) ? buttonActiveClass : buttonInactiveClass,
+          ]"
+          @click="onSelect(option)"
+        >
+          {{ option.label }}
+        </button>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
+import { cloneDeep, isArray, isObject } from 'lodash';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Array, String, Number, null] as PropType<
+      Option[] | Option | undefined
+    >,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  buttonType: {
+    default: 'button',
+    type: String as PropType<'button' | 'submit'>,
+  },
+  buttonClass: {
+    default: 'btn btn-sm',
+    type: String,
+  },
+  buttonActiveClass: {
+    default: 'btn-primary',
+    type: String,
+  },
+  buttonInactiveClass: {
+    default: '',
+    type: String,
+  },
+  spacing: {
+    default: '0.15rem',
+    type: String,
+  },
+  options: {
+    required: true,
+    type: Array as PropType<Option[]>,
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const normalizedModelValue = computed(
+  (): NormalizedOption[] | NormalizedOption | null => {
+    if (props.multiple) {
+      if (!isArray(props.modelValue)) {
+        return [];
+      }
+      return props.modelValue.map((option) => {
+        return {
+          label: option[props.labelKey] as string,
+          value: option[props.valueKey] as string | number,
+          option: option,
+        } as NormalizedOption;
+      });
+    } else {
+      if (!isObject(props.modelValue)) {
+        return null;
+      }
+
+      return {
+        label: props.modelValue[props.labelKey as never] as string,
+        value: props.modelValue[props.valueKey as never] as string | number,
+        option: props.modelValue,
+      } as NormalizedOption;
+    }
+  }
+);
+
+const normalizedOptions = computed((): NormalizedOption[] => {
+  return props.options.map((option) => {
+    return {
+      label: option[props.labelKey] as string,
+      value: option[props.valueKey] as string | number,
+      option: option,
+    } as NormalizedOption;
+  });
+});
+
+function isActive(option: NormalizedOption): boolean {
+  if (isArray(normalizedModelValue.value)) {
+    return normalizedModelValue.value.some((modelValue) => {
+      return modelValue.value === option.value;
+    });
+  }
+
+  if (isObject(normalizedModelValue.value)) {
+    return normalizedModelValue.value.value == option.value;
+  }
+
+  return false;
+}
+
+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);
+    }
+
+    emit(
+      'update:modelValue',
+      newModalValue.map((o) => o.option)
+    );
+  } else {
+    if (!props.required) {
+      if (
+        !isArray(normalizedModelValue.value) &&
+        option.value == normalizedModelValue.value?.value
+      ) {
+        emit('update:modelValue', null);
+        return;
+      }
+    }
+
+    const newOption = option.option;
+    emit('update:modelValue', newOption);
+  }
+}
+</script>

package/src/components/BasePagination.stories.js

@@ -25,6 +25,9 @@ const Template = (args) => ({
   <div style="max-width: 500px;">
     <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
   </div>
+  <div style="max-width: 250px;">
+    <BasePagination v-model="modelValue" v-bind="args"></BasePagination>
+  </div>
   `,
 });