sprintify-ui 0.0.32 → 0.0.34

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

@@ -11,6 +11,7 @@ import BaseBelongsTo from './BaseBelongsTo.vue';
 import BaseBoolean from './BaseBoolean.vue';
 import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
+import BaseButtonGroup from './BaseButtonGroup.vue';
 import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
@@ -45,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';
@@ -64,4 +66,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseBadge, BaseBelongsTo, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseContainer, BaseCounter, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseFilePicker, BaseFileUploader, BaseHasMany, BaseIcon, BaseInput, BaseInputLabel, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseSelect, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseSwitch, BaseSystemAlert, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTable, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

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

@@ -0,0 +1,7 @@
+import { Ref } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
+export declare function useHasOptions(modelValue: Ref<Option[] | Option | null | undefined>, options: Ref<Option[]>, labelKey: Ref<string>, valueKey: Ref<string>, multiple?: Ref<boolean>): {
+    normalizedOptions: import("vue").ComputedRef<NormalizedOption[]>;
+    normalizedModelValue: import("vue").ComputedRef<NormalizedOption | NormalizedOption[] | null>;
+    isSelected: (option: NormalizedOption) => boolean;
+};

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

@@ -14,13 +14,11 @@ export interface DataTableQuery extends Record<string, any> {
 }
 export type OptionValue = string | number;
 export type Option = Record<string, any>;
-export type Selection = Option | null | undefined;
 export type NormalizedOption = {
     option: Option;
     value: OptionValue;
     label: string;
 };
-export type NormalizedSelection = NormalizedOption | null | undefined;
 export type MediaLibraryPayload = {
     to_remove: string[];
     to_add: UploadedFile[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseAutocomplete.vue

@@ -78,10 +78,7 @@
                 <slot
                   name="option"
                   :option="option.option"
-                  :selected="
-                    normalizedModelValue &&
-                    normalizedModelValue.value == option.value
-                  "
+                  :selected="isSelected(option)"
                   :active="optionActive && optionActive.value == option.value"
                 >
                   <div
@@ -125,20 +122,16 @@
 
 <script lang="ts" setup>
 import { get } from 'lodash';
-import { PropType, Ref } from 'vue';
-import {
-  NormalizedOption,
-  Option,
-  Selection,
-  NormalizedSelection,
-} from '@/types/types';
+import { PropType, Ref, ComputedRef } from 'vue';
+import { NormalizedOption, Option } from '@/types/types';
 import { useInfiniteScroll, useMutationObserver } from '@vueuse/core';
 import BaseSkeleton from './BaseSkeleton.vue';
+import { useHasOptions } from '@/composables/hasOptions';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, null] as PropType<Selection | undefined>,
+    type: [Object, null] as PropType<Option | null | undefined>,
   },
   options: {
     required: true,
@@ -193,6 +186,19 @@ const selectionIndex = ref(0);
 const inputElement = ref(null) as Ref<HTMLInputElement | null>;
 const dropdown = ref(null) as Ref<HTMLElement | null>;
 
+const hasOptions = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => false)
+);
+
+const isSelected = hasOptions.isSelected;
+const normalizedOptions = hasOptions.normalizedOptions;
+const normalizedModelValue =
+  hasOptions.normalizedModelValue as ComputedRef<NormalizedOption | null>;
+
 onMounted(() => {
   useInfiniteScroll(
     dropdown.value,
@@ -211,17 +217,7 @@ const optionActive = computed(() => {
   );
 });
 
-const normalizedModelValue = computed(() => {
-  if (!props.modelValue) {
-    return null;
-  }
-  return {
-    label: props.modelValue[props.labelKey] as string,
-    value: props.modelValue[props.valueKey] as string | number,
-    option: props.modelValue,
-  };
-});
-
+// Update the keywords when the model value changes
 watch(
   () => normalizedModelValue.value,
   () => {
@@ -234,16 +230,6 @@ watch(
   { immediate: true }
 );
 
-const normalizedOptions = computed(() => {
-  return props.options.map((option) => {
-    return {
-      label: option[props.labelKey] as string,
-      value: option[props.valueKey] as string | number,
-      option: option,
-    } as NormalizedOption;
-  });
-});
-
 const filteredNormalizedOptions = computed((): NormalizedOption[] => {
   return normalizedOptions.value.filter((option) => {
     if (props.filter !== undefined) {
@@ -276,6 +262,8 @@ const onTextFocus = () => {
   emit('focus');
 };
 
+// If keywords is changed but no new selection was made,
+// update keywords to original value
 const onTextBlur = () => {
   timerId.value = setTimeout(() => {
     showDropdown.value = false;
@@ -305,7 +293,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
   }
 
   if (key === 'ArrowDown') {
-    if (selectionIndex.value < props.options.length - 1) {
+    if (selectionIndex.value < filteredNormalizedOptions.value.length - 1) {
       selectionIndex.value++;
     } else {
       selectionIndex.value = 0;
@@ -317,7 +305,10 @@ const onTextKeydown = (event: KeyboardEvent) => {
     if (selectionIndex.value > 0) {
       selectionIndex.value--;
     } else {
-      selectionIndex.value = Math.max(0, props.options.length - 1);
+      selectionIndex.value = Math.max(
+        0,
+        filteredNormalizedOptions.value.length - 1
+      );
     }
     return;
   }
@@ -333,9 +324,7 @@ const onTextKeydown = (event: KeyboardEvent) => {
 
 const optionClass = (option: NormalizedOption) => {
   const active = optionActive.value && optionActive.value.value == option.value;
-  const selected =
-    normalizedModelValue.value &&
-    normalizedModelValue.value.value == option.value;
+  const selected = isSelected(option);
 
   if (selected) {
     if (active) {
@@ -359,12 +348,12 @@ const clear = () => {
   inputElement.value?.focus();
 };
 
-const onSelect = (normalizedModelValue: NormalizedSelection) => {
+const onSelect = (normalizedModelValue: Option | null | undefined) => {
   update(normalizedModelValue);
   inputElement.value?.blur();
 };
 
-const update = (normalizedSelection: NormalizedSelection) => {
+const update = (normalizedSelection: Option | null | undefined) => {
   const selection = normalizedSelection ? normalizedSelection.option : null;
   if (normalizedSelection) {
     setKeywordsWithoutEvent(normalizedSelection.label);

package/src/components/BaseAutocompleteFetch.vue

@@ -61,14 +61,14 @@
 import { config } from '../';
 import { debounce } from 'lodash';
 import { PropType, Ref } from 'vue';
-import { Option, Selection } from '@/types/types';
+import { Option } from '@/types/types';
 import { RouteLocationRaw } from 'vue-router';
 import BaseAutocomplete from './BaseAutocomplete.vue';
 
 const props = defineProps({
   modelValue: {
     default: undefined,
-    type: [Object, null] as PropType<Selection | undefined>,
+    type: [Object, null] as PropType<Option | null | undefined>,
   },
   url: {
     required: true,

package/src/components/BaseBelongsTo.vue

@@ -24,12 +24,12 @@
 </template>
 
 <script lang="ts" setup>
-import { Selection } from '@/types/types';
 import { PropType } from 'vue';
 import { RouteLocationRaw } from 'vue-router';
 import { AxiosResponse } from 'axios';
 import { config } from '@/index';
 import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import { Option } from '@/types/types';
 
 const props = defineProps({
   modelValue: {
@@ -72,7 +72,7 @@ const props = defineProps({
   },
   currentModel: {
     default: null,
-    type: [Object, null] as PropType<Selection>,
+    type: [Object, null] as PropType<Option | null>,
   },
   createNewUrl: {
     default: '',
@@ -120,7 +120,7 @@ watch(
   { immediate: true }
 );
 
-function onUpdate(newModel: Selection) {
+function onUpdate(newModel: Option | null) {
   if (!newModel) {
     model.value = null;
     emit('update:modelValue', null);

package/src/components/BaseButtonGroup.stories.js

@@ -70,17 +70,14 @@ export const SlotOption = (args) => ({
     v-bind="args"
     v-model="value"
     :options="options"
+    button-class="btn btn-xs"
+    button-selected-class="btn-black"
   >
-    <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)"
-      >
+    <template #option="{ option }">
+      <div class="flex items-center space-x-1 font-semibold">
         <div class="w-3 h-3 rounded" :style="{ backgroundColor: option.value }"></div>
         <div>{{ option.label }}</div>
-      </button>
+      </div>
     </template>
   </BaseButtonGroup>
   `,

package/src/components/BaseButtonGroup.vue

@@ -5,24 +5,24 @@
       :key="option.value"
       :style="{ padding: spacing }"
     >
-      <slot
-        name="option"
-        :is-active="isActive"
-        :on-select="onSelect"
-        :option="option"
+      <button
+        :type="buttonType"
+        :disabled="disabled"
+        :class="[
+          buttonClass,
+          isSelected(option) ? buttonSelectedClass : buttonUnselectedClass,
+        ]"
+        @click="onSelect(option)"
       >
-        <button
-          :type="buttonType"
+        <slot
+          name="option"
+          :selected="isSelected(option)"
+          :option="option"
           :disabled="disabled"
-          :class="[
-            buttonClass,
-            isActive(option) ? buttonActiveClass : buttonInactiveClass,
-          ]"
-          @click="onSelect(option)"
         >
           {{ option.label }}
-        </button>
-      </slot>
+        </slot>
+      </button>
     </div>
   </div>
 </template>
@@ -30,7 +30,8 @@
 <script lang="ts" setup>
 import { PropType } from 'vue';
 import { NormalizedOption, Option } from '@/types/types';
-import { cloneDeep, isArray, isObject } from 'lodash';
+import { cloneDeep, isArray } from 'lodash';
+import { useHasOptions } from '@/composables/hasOptions';
 
 const props = defineProps({
   modelValue: {
@@ -55,11 +56,11 @@ const props = defineProps({
     default: 'btn btn-sm',
     type: String,
   },
-  buttonActiveClass: {
+  buttonSelectedClass: {
     default: 'btn-primary',
     type: String,
   },
-  buttonInactiveClass: {
+  buttonUnselectedClass: {
     default: '',
     type: String,
   },
@@ -87,57 +88,14 @@ const props = defineProps({
 
 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, normalizedModelValue, isSelected } = useHasOptions(
+  computed(() => props.modelValue),
+  computed(() => props.options),
+  computed(() => props.labelKey),
+  computed(() => props.valueKey),
+  computed(() => props.multiple)
 );
 
-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[];

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/BaseTagAutocomplete.stories.js

@@ -64,16 +64,14 @@ export const SlotOption = (args) => ({
     v-model="value"
     :options="options"
   >
-    <template #option="{ option, active, selected }">
+    <template #option="{ option, active }">
       <div
         class="rounded px-2 font-semibold py-1 text-sm"
         :class="{
-          'hover:bg-slate-100': !active && !selected,
-          'bg-slate-200 hover:bg-slate-300': active && !selected,
-          'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
-          'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+          'hover:bg-slate-100': !active,
+          'bg-slate-200 hover:bg-slate-300': active,
         }"
-        :style="{ color: selected ? '' : option.value }"
+        :style="{ color: option.value }"
       >
         {{ option.label }}
       </div>