sprintify-ui 0.0.76 → 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

@@ -0,0 +1,102 @@
+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: 'bottom-start',
+    offset: [0, 8],
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDropdown },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDropdown v-bind="args">
+      <template #button>
+        <div class="btn btn-primary">Click me</div>
+      </template>
+      <template #dropdown>
+        <div class="bg-white shadow py-1 px-1 rounded">
+          <button type="button" class="block text-sm px-4 py-1.5">Item 1</button>
+          <button type="button" class="block text-sm px-4 py-1.5">Item 2</button>
+          <button type="button" class="block text-sm px-4 py-1.5">Item 3</button>
+        </div>
+      </template>
+    </BaseDropdown>
+  `,
+});
+
+export const Demo = Template.bind({});
+
+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

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <button ref="button" type="button" @click="toggle()">
+      <slot name="button"></slot>
+    </button>
+    <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>
+
+<script lang="ts" setup>
+import { bottom, createPopper, Placement } from '@popperjs/core';
+import { PropType } from 'vue';
+
+const button = ref<HTMLElement | null>(null);
+const dropdown = ref<HTMLElement | null>(null);
+
+const showDropdown = ref(false);
+
+const props = defineProps({
+  placement: {
+    type: String as PropType<Placement>,
+    default() {
+      return bottom;
+    },
+  },
+  offset: {
+    default() {
+      return [0, 8];
+    },
+    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, {
+      placement: props.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: props.offset,
+          },
+        },
+      ],
+    });
+  }
+});
+
+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>

package/src/components/index.ts

@@ -26,6 +26,7 @@ import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
 import BaseDialog from './BaseDialog.vue';
+import BaseDropdown from './BaseDropdown.vue';
 import BaseField from './BaseField.vue';
 import BaseFieldI18n from './BaseFieldI18n.vue';
 import BaseFilePicker from './BaseFilePicker.vue';
@@ -105,6 +106,7 @@ export {
   BaseDescriptionList,
   BaseDescriptionListItem,
   BaseDialog,
+  BaseDropdown,
   BaseField,
   BaseFieldI18n,
   BaseFilePicker,