sprintify-ui 0.0.77 → 0.0.78

package/src/components/BaseBelongsTo.stories.js

@@ -3,9 +3,19 @@ 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/BaseBelongsTo',
   component: BaseBelongsTo,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: sizes,
+      },
+    },
+  },
   args: {
     url: 'https://effettandem.com/api/content/articles',
     field: 'title',
@@ -28,6 +38,36 @@ const Template = (args) => ({
 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 Sizes = (args) => ({
+  components: { BaseBelongsTo },
+  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>
+    <BaseBelongsTo v-model="value" v-bind="args" :size="size"></BaseBelongsTo>
+  </div>
+  `,
+});
+
 export const Disabled = Template.bind({});
 Disabled.args = {
   currentModel: options[0],

package/src/components/BaseBelongsTo.vue

@@ -9,6 +9,11 @@
     :value-key="primaryKey"
     :label-key="field"
     :has-error="hasError"
+    :inline="inline"
+    :size="size"
+    :dropdown-show="dropdownShow"
+    :model-value-show="modelValueShow"
+    :visible-focus="visibleFocus"
     @update:model-value="onUpdate"
   >
     <template #option="optionProps">
@@ -77,6 +82,26 @@ const props = defineProps({
     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'>,
+  },
+  modelValueShow: {
+    default: true,
+    type: Boolean,
+  },
+  visibleFocus: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const http = config.http;

package/src/components/BaseDropdown.stories.js

@@ -1,10 +1,13 @@
+import BaseBadge from './BaseBadge.vue';
+import BaseAutocomplete from './BaseAutocomplete.vue';
 import BaseDropdown from './BaseDropdown.vue';
+import { options } from '../../.storybook/utils';
 
 export default {
   title: 'Components/BaseDropdown',
   component: BaseDropdown,
   args: {
-    placement: 'top-start',
+    placement: 'bottom-start',
     offset: [0, 8],
   },
 };
@@ -15,8 +18,7 @@ const Template = (args) => ({
     return { args };
   },
   template: `
-  <div style="height: 2000px">
-    <BaseDropdown v-bind="args" style="margin-top: 200px;">
+    <BaseDropdown v-bind="args">
       <template #button>
         <div class="btn btn-primary">Click me</div>
       </template>
@@ -28,9 +30,73 @@ const Template = (args) => ({
         </div>
       </template>
     </BaseDropdown>
-  </div>
   `,
 });
 
 export const Demo = Template.bind({});
-Demo.args = {};
+
+export const Animated = Template.bind({});
+Animated.args = {
+  animated: true,
+};
+
+export const WithAutocomplete = (args) => ({
+  components: { BaseDropdown, BaseAutocomplete, BaseBadge },
+  setup() {
+    const value = ref(null);
+    const autocomplete = ref(null);
+
+    function onOpen() {
+      if (autocomplete.value) {
+        setTimeout(() => {
+          autocomplete.value.open();
+        }, 1);
+      }
+    }
+
+    function onClose() {
+      if (autocomplete.value) {
+        setTimeout(() => {
+          autocomplete.value.setKeywords('');
+        }, 10);
+      }
+    }
+
+    function onUpdate(v, close) {
+      if (v) {
+        close();
+      }
+    }
+    return { args, options, value, onOpen, onClose, onUpdate, autocomplete };
+  },
+  template: `
+    <BaseDropdown @open="onOpen" @close="onClose" v-bind="args">
+      <template #button>
+        <BaseBadge>{{ value ? value.label : 'Select a Character' }}</BaseBadge>
+      </template>
+      <template #dropdown="{close}">
+        <div class="bg-white shadow border border-slate-300 py-1 px-1 rounded" style="min-width: 250px">
+          <BaseAutocomplete
+            ref="autocomplete"
+            required
+            v-model="value"
+            label-key="label" 
+            value-key="value" 
+            size="xs"
+            :options="options"
+            :inline="true"
+            :visibleFocus="false"
+            dropdownShow="always"
+            :modelValueShow="false"
+            @update:modelValue="onUpdate($event, close)"
+          ></BaseAutocomplete>
+        </div>
+      </template>
+    </BaseDropdown>
+  `,
+});
+
+WithAutocomplete.args = {
+  placement: 'bottom-start',
+  offset: [0, 3],
+};

package/src/components/BaseDropdown.vue

@@ -1,10 +1,28 @@
 <template>
   <div>
-    <button ref="button" type="button" @click="showDropdown = !showDropdown">
+    <button ref="button" type="button" @click="toggle()">
       <slot name="button"></slot>
     </button>
-    <div v-show="showDropdown" ref="dropdown">
-      <slot name="dropdown"></slot>
+    <div ref="dropdown">
+      <Transition
+        :enter-active-class="
+          animated ? 'duration-100 transition  ease-out' : ''
+        "
+        enter-from-class="transform scale-90 opacity-0"
+        enter-to-class="transform scale-100 opacity-100"
+        :leave-active-class="animated ? 'duration-75 transition ease-in' : ''"
+        leave-from-class="transform scale-100 opacity-100"
+        leave-to-class="transform scale-90 opacity-0"
+      >
+        <div v-show="showDropdown" ref="dropdown" class="inline-block">
+          <slot
+            name="dropdown"
+            :close="close"
+            :open="open"
+            :toggle="toggle"
+          ></slot>
+        </div>
+      </Transition>
     </div>
   </div>
 </template>
@@ -31,8 +49,14 @@ const props = defineProps({
     },
     type: Array as unknown as PropType<[number, number]>,
   },
+  animated: {
+    default: false,
+    type: Boolean,
+  },
 });
 
+const emit = defineEmits(['close', 'open']);
+
 onMounted(() => {
   if (button.value && dropdown.value) {
     createPopper(button.value, dropdown.value, {
@@ -48,4 +72,73 @@ onMounted(() => {
     });
   }
 });
+
+function toggle() {
+  if (showDropdown.value) {
+    close();
+  } else {
+    open();
+  }
+}
+
+function open() {
+  activate();
+  showDropdown.value = true;
+  emit('open');
+}
+
+function close() {
+  deactivate();
+  showDropdown.value = false;
+  emit('close');
+}
+
+function activate() {
+  window.addEventListener('keydown', onKeydown);
+  window.addEventListener('mousedown', onMouseDown);
+}
+
+function deactivate() {
+  window.removeEventListener('keydown', onKeydown);
+  window.removeEventListener('mousedown', onMouseDown);
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.code == 'Escape') {
+    if (showDropdown.value) {
+      close();
+    }
+  }
+}
+
+function onMouseDown(event: MouseEvent) {
+  if (!dropdown.value) {
+    return;
+  }
+  // Get the element that was clicked
+  const clickedElement = event.target as HTMLElement | null;
+
+  if (!clickedElement) {
+    return;
+  }
+
+  // Button is clicked
+  if (
+    button.value == clickedElement ||
+    button.value?.contains(clickedElement)
+  ) {
+    return;
+  }
+
+  // `el` is the element you're detecting clicks outside of
+  if (dropdown.value.contains(clickedElement)) {
+    // do nothing..
+  } else {
+    close();
+  }
+}
+
+onBeforeUnmount(() => {
+  deactivate();
+});
 </script>