sprintify-ui 0.4.6 → 0.4.8

package/src/components/BaseBelongsToFetch.stories.js

@@ -0,0 +1,223 @@
+import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { options } from '@/../.storybook/utils';
+import { createFieldStory } from '../../.storybook/utils';
+
+const sizes = ['xs', 'sm', 'base'];
+
+export default {
+  title: 'Form/BaseBelongsToFetch',
+  component: BaseBelongsToFetch,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+  },
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    field: 'title',
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseBelongsToFetch, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+      <BaseBelongsToFetch v-model="value" v-bind="args"></BaseBelongsToFetch>
+      <ShowValue :value="value" />
+    `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const AlwaysShowDropdown = Template.bind({});
+AlwaysShowDropdown.args = {
+  inline: true,
+  dropdownShow: 'always',
+};
+
+export const NoFocus = Template.bind({});
+NoFocus.args = {
+  visibleFocus: false,
+};
+
+export const Inline = Template.bind({});
+Inline.args = {
+  inline: true,
+};
+
+export const ShowEmptyOption = Template.bind({});
+ShowEmptyOption.args = {
+  showEmptyOption: true,
+  emptyOptionLabel: 'No Jedi',
+};
+
+export const Sizes = (args) => ({
+  components: { BaseBelongsToFetch },
+  setup() {
+    const value = ref(null);
+    return { args, sizes, value };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight">{{ size }}</p>
+    <BaseBelongsToFetch v-model="value" v-bind="args" :size="size"></BaseBelongsToFetch>
+  </div>
+  `,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  currentModel: options[0],
+  primaryKey: 'value',
+  field: 'label',
+  disabled: true,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsToFetch
+        v-model="value"
+        v-bind="args"
+      >
+        <template #option="{ option, active, selected }">
+          <div
+            class="rounded px-2 py-1"
+            :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,
+            }"
+          >
+            <p class="text-sm font-medium">{{ option.title }}</p>
+            <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      function onClick() {
+        setTimeout(() => {
+          alert(1);
+        }, 150);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+      <BaseBelongsToFetch
+        v-model="value"
+        v-bind="args"
+      >
+        <template #footer>
+          <div class="text-center p-2 border-t">
+            <button @click=onClick class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseBelongsToFetch },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsToFetch
+        v-model="value"
+        v-bind="args"
+      >
+        <template #empty="props">
+          <div>
+            <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
+            <div v-else class="text-center p-6">Start your search... 🔎</div>
+          </div>
+        </template>
+      </BaseBelongsToFetch>
+    `,
+  };
+};
+
+export const WithSelect = (args) => {
+  return {
+    components: { BaseBelongsToFetch, ShowValue },
+    setup() {
+      const value = ref(options[0]);
+      const selected = ref(null);
+
+      const select = {
+        options: [
+          { label: 'All', value: 'all' },
+          { label: 'Video', value: 'video' },
+          { label: 'Article', value: 'article' },
+        ],
+        labelKey: 'label',
+        valueKey: 'value',
+        onChange: (option) => {
+          selected.value = option.value;
+        },
+      };
+
+      const url = computed(() => {
+        if (selected.value == 'all' || !selected.value) {
+          return 'https://effettandem.com/api/content/articles';
+        }
+        return (
+          'https://effettandem.com/api/content/articles' +
+          '?type=' +
+          selected.value
+        );
+      });
+
+      return { args, value, url, selected, select };
+    },
+    template: `
+  <BaseBelongsToFetch
+    v-model="value"
+    v-bind="args"
+    :url="url"
+    :select="select"
+  >
+  </BaseBelongsToFetch>
+
+  <div class="mb-2"></div>
+
+  <p class="text-xs mb-0">Selection</p>
+  <ShowValue class="mt-0 mb-2" :value="selected" />
+  
+  <p class="text-xs mb-0">Model Value</p>
+  <ShowValue class="mt-0" :value="value" />
+`,
+  };
+};
+
+export const Field = createFieldStory({
+  component: BaseBelongsToFetch,
+  componentName: 'BaseBelongsToFetch',
+  label: 'Article',
+});

package/src/components/BaseBelongsToFetch.vue

@@ -0,0 +1,193 @@
+<template>
+  <BaseAutocompleteFetch
+    ref="autocompleteFetch"
+    :model-value="model"
+    :url="url"
+    :disabled="disabled"
+    :name="name"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="primaryKey"
+    :label-key="field"
+    :has-error="hasError"
+    :inline="inline"
+    :size="size"
+    :dropdown-show="dropdownShow"
+    :show-model-value="showModelValue"
+    :show-empty-option="showEmptyOption"
+    :empty-option-label="emptyOptionLabel"
+    :visible-focus="visibleFocus"
+    :select="select"
+    @update:model-value="onUpdate"
+  >
+    <template #option="optionProps">
+      <slot
+        name="option"
+        v-bind="optionProps"
+      />
+    </template>
+    <template #empty="emptyProps">
+      <slot
+        name="empty"
+        v-bind="emptyProps"
+      />
+    </template>
+    <template #footer="footerProps">
+      <slot
+        name="footer"
+        v-bind="footerProps"
+      />
+    </template>
+  </BaseAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { AxiosResponse } from 'axios';
+import { config } from '@/index';
+import BaseAutocompleteFetch from './BaseAutocompleteFetch.vue';
+import { Option, SelectConfiguration } from '@/types';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Number, null] as PropType<
+      string | number | null | undefined
+    >,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  showRouteUrl: {
+    default: undefined,
+    type: Function as PropType<((id: string | number) => string) | undefined>,
+  },
+  primaryKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  placeholder: {
+    default: undefined,
+    type: String,
+  },
+  currentModel: {
+    default: null,
+    type: [Object, null] as PropType<Option | null>,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  inline: {
+    default: false,
+    type: Boolean,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'xs' | 'sm' | 'base'>,
+  },
+  dropdownShow: {
+    default: 'focus',
+    type: String as PropType<'focus' | 'always'>,
+  },
+  showModelValue: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
+  showEmptyOption: {
+    default: false,
+    type: Boolean,
+  },
+  emptyOptionLabel: {
+    default: undefined,
+    type: String,
+  },
+  select: {
+    default: undefined,
+    type: Object as PropType<SelectConfiguration | undefined>,
+  },
+});
+
+const http = config.http;
+
+const emit = defineEmits(['update:modelValue']);
+
+const autocompleteFetch = ref<InstanceType<
+  typeof BaseAutocompleteFetch
+> | null>(null);
+
+const model = ref(props.currentModel);
+
+watch(
+  () => props.currentModel,
+  (newValue, oldValue) => {
+    model.value = newValue;
+  },
+  { deep: true }
+);
+
+watch(
+  () => props.modelValue,
+  (newValue, oldValue) => {
+    if (!props.modelValue) {
+      model.value = null;
+      return;
+    }
+
+    if (newValue == oldValue) {
+      return;
+    }
+
+    if (props.showRouteUrl == null) {
+      return;
+    }
+
+    http
+      .get(props.showRouteUrl(props.modelValue))
+      .then((response: AxiosResponse) => {
+        model.value = response.data.data;
+      })
+      .catch((e: Error) => e);
+  },
+  { immediate: true }
+);
+
+function onUpdate(newModel: Option | null) {
+  if (!newModel) {
+    model.value = null;
+    emit('update:modelValue', null);
+  } else {
+    model.value = newModel;
+    emit('update:modelValue', newModel[props.primaryKey]);
+  }
+}
+
+defineExpose({
+  focus: () => autocompleteFetch.value?.focus(),
+  blur: () => autocompleteFetch.value?.blur(),
+  open: () => autocompleteFetch.value?.open(),
+  close: () => autocompleteFetch.value?.close(),
+  setKeywords: (input: string) => autocompleteFetch.value?.setKeywords(input),
+});
+</script>

package/src/components/index.ts

@@ -10,6 +10,7 @@ import BaseAvatar from './BaseAvatar.vue';
 import BaseAvatarGroup from './BaseAvatarGroup.vue';
 import BaseBadge from './BaseBadge.vue';
 import BaseBelongsTo from './BaseBelongsTo.vue';
+import BaseBelongsToFetch from './BaseBelongsToFetch.vue';
 import BaseBoolean from './BaseBoolean.vue';
 import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
 import BaseButton from './BaseButton.vue';
@@ -109,6 +110,7 @@ export {
   BaseAvatarGroup,
   BaseBadge,
   BaseBelongsTo,
+  BaseBelongsToFetch,
   BaseBoolean,
   BaseBreadcrumbs,
   BaseButton,