sprintify-ui 0.0.11 → 0.0.13

package/src/components/BaseTagAutocompleteFetch.stories.js

@@ -0,0 +1,130 @@
+import BaseTagAutocompleteFetch from './BaseTagAutocompleteFetch.vue';
+import BaseApp from './BaseApp.vue';
+
+export default {
+  title: 'Form/BaseTagAutocompleteFetch',
+  component: BaseTagAutocompleteFetch,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    labelKey: 'title',
+    valueKey: 'id',
+    disabled: false,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch, BaseApp },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      v-model="value"
+      v-bind="args"
+    ></BaseTagAutocompleteFetch>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+    <BaseApp />
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: [{ label: 'Dark Maul', value: '1' }],
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: true,
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseTagAutocompleteFetch
+      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>
+    </BaseTagAutocompleteFetch>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      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>
+    </BaseTagAutocompleteFetch>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseTagAutocompleteFetch },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseTagAutocompleteFetch
+      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>
+    </BaseTagAutocompleteFetch>
+  `,
+  };
+};

package/src/components/BaseTagAutocompleteFetch.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseTagAutocomplete
-    :loading="loading && page == 1"
+    :loading="showLoading && page == 1"
     :model-value="modelValue"
     :disabled="disabled"
     :placeholder="placeholder"
@@ -8,22 +8,30 @@
     :value-key="valueKey"
     :label-key="labelKey"
     :input-class="inputClass"
-    :min="min"
     :max="max"
+    :filter="() => true"
     @focus="onFocus"
     @typing="onTyping"
     @scroll-bottom="scrollBottom"
     @update:model-value="$emit('update:modelValue', $event)"
   >
-    <template #empty>
-      <div class="p-5 text-center text-slate-600">
-        <span v-if="firstSearch">
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps" />
+    </template>
+
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps" :keywords="keywords"> </slot>
+    </template>
+
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps" :first-search="firstSearch">
+        <div
+          v-if="firstSearch"
+          class="flex h-[80px] items-center justify-center px-3 text-center text-base leading-tight text-slate-600"
+        >
           {{ $t('sui.nothing_found') }}
-        </span>
-        <span v-else>
-          {{ $t('sui.autocomplete_placeholder') }}
-        </span>
-      </div>
+        </div>
+      </slot>
     </template>
   </BaseTagAutocomplete>
 </template>
@@ -33,6 +41,7 @@ import { debounce } from 'lodash';
 import { config } from '@/index';
 import { PropType, Ref } from 'vue';
 import { Option } from '@/types/types';
+import BaseTagAutocomplete from './BaseTagAutocomplete.vue';
 
 const props = defineProps({
   modelValue: {
@@ -67,21 +76,22 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
-  min: {
-    default: undefined,
-    type: Number,
-  },
   max: {
     default: undefined,
     type: Number,
   },
+  queryKey: {
+    default: 'search',
+    type: String,
+  },
 });
 
 defineEmits(['update:modelValue', 'typing', 'focus', 'scrollBottom']);
 
 const http = config.http;
 
-const loading = ref(false);
+const showLoading = ref(false);
+const fetching = ref(false);
 const firstSearch = ref(false);
 const reachedEnd = ref(false);
 const keywords = ref('');
@@ -94,18 +104,15 @@ const onTyping = (query: string) => {
 
   if (keywords.value != query) {
     keywords.value = query;
+    showLoading.value = true;
     debouncedSearch();
   }
 };
 
 const onFocus = () => {
-  if (firstSearch.value) {
-    return;
+  if (!firstSearch.value) {
+    search();
   }
-
-  search();
-
-  firstSearch.value = true;
 };
 
 const scrollBottom = () => {
@@ -116,17 +123,18 @@ const scrollBottom = () => {
 };
 
 const search = () => {
-  if (loading.value) {
+  if (fetching.value) {
     return;
   }
 
-  loading.value = true;
+  fetching.value = true;
+  showLoading.value = true;
   firstSearch.value = true;
 
   http
     .get(props.url, {
       params: {
-        search: keywords.value,
+        [props.queryKey]: keywords.value,
         page: page.value,
       },
     })
@@ -142,9 +150,12 @@ const search = () => {
       } else {
         options.value.push(...data);
       }
+
+      firstSearch.value = true;
     })
     .finally(() => {
-      loading.value = false;
+      fetching.value = false;
+      showLoading.value = false;
     });
 };
 

package/src/components/BaseTextarea.stories.js

@@ -0,0 +1,35 @@
+import BaseTextarea from './BaseTextarea.vue';
+
+export default {
+  title: 'Form/BaseTextarea',
+  component: BaseTextarea,
+  args: {
+    name: 'bio',
+    required: true,
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextarea,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};

package/src/components/BaseTextarea.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     :required="required"
     :rows="rows"
-    class="mb-0 block rounded"
+    class="mb-0 block rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     @input="$emit('update:modelValue', transformInputValue($event))"
   />
 </template>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -0,0 +1,49 @@
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+
+export default {
+  title: 'Form/BaseTextareaAutoresize',
+  component: BaseTextareaAutoresize,
+  args: {
+    name: 'bio',
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    const value = ref('');
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      class="w-full" 
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded whitespace-pre-wrap text-white">{{ {value} }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SubmitOnEnter = Template.bind({});
+SubmitOnEnter.args = {
+  submitOnEnter: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};

package/src/components/BaseTextareaAutoresize.vue

@@ -1,117 +1,113 @@
 <template>
-  <div ref="wrapper" class="wrapper">
+  <div
+    ref="wrapper"
+    class="wrapper grid"
+    :style="{ maxHeight: maxHeight + 'px' }"
+  >
     <textarea
       :value="modelValue"
       :name="name"
       :placeholder="placeholder"
+      :disabled="disabled"
+      class="resize-none"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{ maxHeight: maxHeight + 'px', gridArea: BASE_GRID_AREA }"
       rows="1"
-      class="focus:outline-none focus:ring-0"
       @input="onInput"
       @keyup="onKeyUp"
       @keydown="onKeyDown"
       @focus="onFocus"
     />
+    <div
+      class="invisible whitespace-pre-wrap"
+      :class="BASE_TEXTAREA_CLASSES"
+      :style="{
+        content: DIV_CONTENT,
+        maxHeight: maxHeight + 'px',
+        gridArea: BASE_GRID_AREA,
+      }"
+    >
+      {{ modelValue }} {{ ' ' }}
+    </div>
   </div>
 </template>
 
-<script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { defineComponent, inject } from 'vue';
+<script lang="ts" setup>
+import { Ref } from 'vue';
 
-const keys = {} as { [key: string]: boolean };
+const BASE_TEXTAREA_CLASSES =
+  'py-2 px-3 font-normal text-base disabled:cursor-not-allowed disabled:text-slate-300 font-sans rounded leading-normal tracking-normal border border-slate-300';
+
+const BASE_GRID_AREA = '1 / 1 / 2 / 2';
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      default: '',
-      type: String,
-    },
-    placeholder: {
-      default: '',
-      type: String,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
+/* Note the weird space! Needed to prevent jumpy behavior */
+const DIV_CONTENT = "attr(data-replicated-value) ' '";
+
+const props = defineProps({
+  modelValue: {
+    default: '',
+    type: String,
   },
-  emits: ['update:modelValue', 'submit', 'focus', 'input'],
-  setup() {
-    const mobile = inject('mobile') as boolean;
-    return {
-      mobile,
-    };
+  placeholder: {
+    default: '',
+    type: String,
   },
-  watch: {
-    modelValue(value: string) {
-      this.updateReplicatedValue(value);
-    },
+  name: {
+    required: true,
+    type: String,
   },
-  methods: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onInput(e: any) {
-      const value = e.target.value ?? '';
-      this.$emit('update:modelValue', value);
-      this.$emit('input', e);
-      this.updateReplicatedValue(value);
-    },
-    updateReplicatedValue(value: string) {
-      const wrapper = this.$refs.wrapper as HTMLElement;
-      wrapper.dataset.replicatedValue = value;
-    },
-    onKeyDown(event: any) {
-      keys[event.key as number] = true;
-
-      if (keys['Enter'] && !keys['Shift'] && !this.mobile) {
-        this.$emit('submit');
-        event.preventDefault();
-      }
-    },
-    onKeyUp(event: any) {
-      delete keys[event.key];
-    },
-    onFocus(event: any) {
-      this.$emit('focus', event);
-    },
+  maxHeight: {
+    default: 100,
+    type: Number,
+  },
+  /**
+   * Setting this to true will trigger the 'submit' event while pressing Enter.
+   * Users will be able to add a line break while pressing Shift + Enter.
+   */
+  submitOnEnter: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
   },
 });
-</script>
 
-<style lang="postcss" scoped>
-.wrapper {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-.wrapper::after {
-  /* Note the weird space! Needed to prevent jumpy behavior */
-  content: attr(data-replicated-value) ' ';
+const emit = defineEmits(['update:modelValue', 'submit', 'focus', 'input']);
 
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
+const wrapper = ref(null) as Ref<null | HTMLDivElement>;
 
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
+const keys = {} as { [key: string]: boolean };
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function onInput(e: any) {
+  const value = e.target.value ?? '';
+  emit('update:modelValue', value);
+  emit('input', e);
 }
-.wrapper > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
 
-  @apply focus:outline-none;
-  @apply focus-visible:outline-none;
+function onKeyDown(event: KeyboardEvent) {
+  keys[event.key] = true;
+
+  if (keys['Enter'] && !keys['Shift'] && props.submitOnEnter) {
+    // If submit triggers alert, Enter wont be delete from keys,
+    // manually remove it here
+    delete keys['Enter'];
+
+    // Submit event to listen to
+    emit('submit');
+
+    // Prevent adding an EOL the the textarea
+    event.preventDefault();
+  }
 }
-.wrapper > textarea,
-.wrapper::after {
-  /* Identical styling required!! */
-  padding: 0.5rem;
-  font: inherit;
 
-  @apply text-base;
-  @apply max-h-28;
-  @apply border-transparent;
-  @apply bg-slate-100;
-  @apply rounded-lg;
+function onKeyUp(event: KeyboardEvent) {
+  delete keys[event.key];
+}
 
-  /* Place on top of each other */
-  grid-area: 1 / 1 / 2 / 2;
+function onFocus(event: FocusEvent) {
+  emit('focus', event);
 }
-</style>
+</script>

package/src/components/HasMany.stories.js

@@ -0,0 +1,135 @@
+import BaseHasMany from './BaseHasMany.vue';
+
+export default {
+  title: 'Form/BaseHasMany',
+  component: BaseHasMany,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    field: 'title',
+    foreignKey: 'id',
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+      <BaseHasMany
+        v-model="value"
+        v-bind="args"
+      ></BaseHasMany>
+      <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? '[]' }}</span></p>
+  `,
+  };
+};
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `<BaseHasMany
+      v-bind="args"
+      v-model="value"
+      :current-models="[{title: 'Dark Vader', id: 1}]"
+      :disabled="true"
+    ></BaseHasMany>`,
+  };
+};
+
+export const Maximum = Template.bind({});
+Maximum.args = {
+  max: 3,
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseHasMany
+      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>
+    </BaseHasMany>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      function onClick() {
+        alert(1);
+      }
+      return { args, value, onClick };
+    },
+    template: `
+    <BaseHasMany
+      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>
+    </BaseHasMany>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseHasMany },
+    setup() {
+      const value = ref([]);
+      return { args, value };
+    },
+    template: `
+    <BaseHasMany
+      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 px-6 py-20">Start your search... 🔎</div>
+        </div>
+      </template>
+    </BaseHasMany>
+  `,
+  };
+};