sprintify-ui 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -16,11 +16,13 @@
     "@tailwindcss/forms": "^0.5.3",
     "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.8",
+    "@vueup/vue-quill": "^1.0.0",
     "@vueuse/core": "^9.0.0",
     "axios": "^0.26.1",
     "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
+    "maska": "^2.1.1",
     "microtip": "^0.2.2",
     "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",
@@ -58,6 +60,7 @@
     "@typescript-eslint/parser": "^5.42.1",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/eslint-config-typescript": "^11.0.2",
+    "@vueup/vue-quill": "^1.0.0",
     "@vueuse/core": "^9.5.0",
     "autoprefixer": "^10.4.13",
     "axios": "^0.26.1",
@@ -71,6 +74,7 @@
     "humanize-duration": "^3.27.3",
     "lodash": "^4.17.21",
     "luxon": "^3.1.0",
+    "maska": "^2.1.1",
     "microtip": "^0.2.2",
     "object-hash": "^3.0.0",
     "object-to-formdata": "^4.4.2",

package/src/components/BaseAppDialogs.vue

@@ -28,7 +28,7 @@
       <div
         v-for="dialog in dialogs"
         :key="dialog.id"
-        scroll-lock-target
+        data-scroll-lock-scrollable
         class="fixed inset-0 z-dialogs transform overflow-y-auto"
       >
         <div

package/src/components/BaseAutocomplete.vue

@@ -24,6 +24,7 @@
           ]"
           autocomplete="off"
           :disabled="disabled"
+          @click="open"
           @input="onTextInput"
           @keydown="onTextKeydown"
         />
@@ -69,6 +70,7 @@
       >
         <div
           ref="dropdown"
+          data-scroll-lock-scrollable
           class="max-h-[214px] min-h-[75px] w-full overflow-y-auto"
         >
           <slot v-if="filteredNormalizedOptions.length == 0" name="empty">
@@ -159,6 +161,7 @@ import BaseSkeleton from '@/components/BaseSkeleton.vue';
 import { useHasOptions } from '@/composables/hasOptions';
 import { useField } from '@/composables/field';
 import { BaseIcon } from './index';
+import { useClickOutside } from '@/composables/clickOutside';
 
 const props = defineProps({
   modelValue: {
@@ -314,33 +317,11 @@ watch(
   { immediate: true }
 );
 
-onMounted(() => {
-  window.addEventListener('mousedown', onMouseDown);
-});
-
-onBeforeMount(() => {
-  window.removeEventListener('mousedown', onMouseDown);
-});
-
-function onMouseDown(event: MouseEvent) {
-  if (!autocomplete.value) {
-    return;
-  }
-
-  // Get the element that was clicked
-  const clickedElement = event.target as HTMLElement | null;
-
-  if (!clickedElement) {
-    return;
-  }
-
-  // `el` is the element you're detecting clicks outside of
-  if (autocomplete.value.contains(clickedElement)) {
-    open();
-  } else {
+useClickOutside(autocomplete, (outside: boolean) => {
+  if (outside) {
     close();
   }
-}
+});
 
 function open() {
   clearInterval(timerId);

package/src/components/BaseButtonGroup.vue

@@ -16,7 +16,7 @@
       >
         <slot
           name="option"
-          :selected="isSelected(option)"
+          :selected="computed(() => isSelected(option))"
           :option="option"
           :disabled="disabled"
         >
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { PropType } from 'vue';
+import { PropType, computed } from 'vue';
 import { NormalizedOption, Option } from '@/types';
 import { cloneDeep, isArray } from 'lodash';
 import { useHasOptions } from '@/composables/hasOptions';

package/src/components/BaseColor.stories.js

@@ -0,0 +1,50 @@
+import { createFieldStory, colors } from '../../.storybook/utils';
+import BaseColor from './BaseColor.vue';
+import ShowValue from '../../.storybook/components/ShowValue.vue';
+
+export default {
+  title: 'Form/BaseColor',
+  component: BaseColor,
+  argTypes: {},
+  args: {
+    colors: colors,
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseColor, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseColor v-model="value" v-bind="args"></BaseColor>
+    <ShowValue :value="value"></ShowValue>
+  `,
+});
+
+export const Single = Template.bind({});
+Single.args = {};
+
+export const SingleRequired = Template.bind({});
+SingleRequired.args = {
+  required: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  multiple: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  modelValue: { label: '#16a34a', value: '#16a34a' },
+};
+
+export const Field = createFieldStory({
+  component: BaseColor,
+  componentName: 'BaseColor',
+  label: 'Choose your favorite color',
+});

package/src/components/BaseColor.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <BaseButtonGroup
+      :model-value="modelValue"
+      :disabled="disabled"
+      value-key="value"
+      label-key="label"
+      :required="required"
+      :options="colorOptions"
+      :multiple="multiple"
+      :button-type="buttonType"
+      :button-class="''"
+      :button-selected-class="''"
+      :button-unselected-class="''"
+      @update:model-value="$emit('update:modelValue', $event)"
+    >
+      <template #option="option">
+        <div
+          :style="{ background: option.option.value }"
+          class="p-3 border-none rounded-md"
+          :class="[
+            option.selected.value ? 'text-white' : 'text-transparent',
+            disabled ? ' cursor-not-allowed opacity-50' : '',
+          ]"
+        >
+          <BaseIcon icon="heroicons-solid:check-circle" class="w-5 h-5" />
+        </div>
+      </template>
+    </BaseButtonGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Option } from '@/types';
+import { BaseButtonGroup } from '.';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [Object, Array, null, undefined] as PropType<
+      Option[] | Option | null | undefined
+    >,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  buttonType: {
+    default: 'button',
+    type: String as PropType<'button' | 'submit'>,
+  },
+  colors: {
+    type: [Array] as PropType<string[]>,
+    default() {
+      return [
+        '#0f172a',
+        '#dc2626',
+        '#ea580c',
+        '#eab308',
+        '#16a34a',
+        '#0d9488',
+        '#0891b2',
+        '#2563eb',
+        '#4f46e5',
+        '#9333ea',
+        '#db2777',
+      ];
+    },
+  },
+  multiple: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+defineEmits(['update:modelValue']);
+
+const colorOptions = computed(() => {
+  return props.colors.map((c) => {
+    return {
+      label: c,
+      value: c,
+    };
+  });
+});
+</script>

package/src/components/BaseDropdown.stories.js

@@ -1,8 +1,17 @@
 import BaseBadge from './BaseBadge.vue';
 import BaseAutocomplete from './BaseAutocomplete.vue';
+import BaseModalCenter from './BaseModalCenter.vue';
 import BaseDropdown from './BaseDropdown.vue';
 import { options } from '../../.storybook/utils';
 
+const items = [];
+
+for (let i = 0; i < 100; i++) {
+  items.push({
+    label: `Item ${i + 1}`,
+  });
+}
+
 export default {
   title: 'Components/BaseDropdown',
   component: BaseDropdown,
@@ -23,7 +32,7 @@ export default {
 const Template = (args) => ({
   components: { BaseDropdown },
   setup() {
-    return { args };
+    return { args, items };
   },
   template: `
   <div style="height: 1000px; margin-top: 300px;">
@@ -33,10 +42,11 @@ const Template = (args) => ({
           <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 
+            class="bg-white shadow py-1 px-1 rounded" 
+            style="max-height: 200px; overflow: auto;" 
+            data-scroll-lock-scrollable>
+            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
           </div>
         </template>
       </BaseDropdown>
@@ -67,11 +77,11 @@ export const WithAutocomplete = (args) => ({
     }
 
     function onClose() {
-      if (autocomplete.value) {
-        setTimeout(() => {
+      setTimeout(() => {
+        if (autocomplete.value) {
           autocomplete.value.setKeywords('');
-        }, 10);
-      }
+        }
+      }, 10);
     }
 
     function onUpdate(v, close) {
@@ -113,3 +123,31 @@ WithAutocomplete.args = {
   placement: 'bottom-start',
   padding: 3,
 };
+
+export const ModalWithScroll = (args) => ({
+  components: { BaseDropdown, BaseModalCenter },
+  setup() {
+    return { args, items };
+  },
+  template: `
+  <BaseModalCenter :model-value="true">
+    <div class="p-10 bg-white">
+      <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" 
+            style="max-height: 200px; overflow: auto;" 
+            data-scroll-lock-scrollable>
+            <button type="button" v-for="item in items" :key="item.label" class="block text-sm px-4 py-1.5">{{ item.label }}</button>
+          </div>
+        </template>
+      </BaseDropdown>
+
+      <div style="height: 3000px;"></div>
+    </div>
+  </BaseModalCenter>
+  `,
+});

package/src/components/BaseDropdown.vue

@@ -15,9 +15,10 @@
           leave-from-class="transform scale-100 opacity-100"
           leave-to-class="transform scale-90 opacity-0"
         >
-          <div v-show="showDropdown" class="inline-block" scroll-lock-target>
+          <div v-show="showDropdown" class="inline-block">
             <slot
               name="dropdown"
+              :show-dropdown="showDropdown"
               :close="close"
               :open="open"
               :toggle="toggle"
@@ -30,6 +31,8 @@
 </template>
 
 <script lang="ts" setup>
+import { useClickOutside } from '@/composables/clickOutside';
+import { throttle } from 'lodash';
 import { PropType, StyleValue } from 'vue';
 import { disableScroll, enableScroll } from '../utils';
 
@@ -96,7 +99,7 @@ function open() {
   showDropdown.value = true;
   nextTick(() => {
     setBoundingBoxes();
-    disableScroll(dropdown.value);
+    disableScroll();
     emit('open');
   });
 }
@@ -108,16 +111,6 @@ function close() {
   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) {
@@ -126,33 +119,32 @@ function onKeydown(event: KeyboardEvent) {
   }
 }
 
-function onMouseDown(event: MouseEvent) {
-  if (!dropdown.value) {
-    return;
-  }
-  // Get the element that was clicked
-  const clickedElement = event.target as HTMLElement | null;
-
-  if (!clickedElement) {
-    return;
-  }
+const setBoundingBoxesDebounced = throttle(() => {
+  setBoundingBoxes();
+}, 10);
 
-  // Button is clicked
-  if (
-    button.value == clickedElement ||
-    button.value?.contains(clickedElement)
-  ) {
-    return;
-  }
+function activate() {
+  window.addEventListener('keydown', onKeydown);
+  window.addEventListener('resize', setBoundingBoxesDebounced);
+  window.addEventListener('scroll', setBoundingBoxesDebounced, true);
+}
 
-  // `el` is the element you're detecting clicks outside of
-  if (dropdown.value.contains(clickedElement)) {
-    // do nothing..
-  } else {
-    close();
-  }
+function deactivate() {
+  window.removeEventListener('resize', setBoundingBoxesDebounced);
+  window.removeEventListener('scroll', setBoundingBoxesDebounced, true);
+  window.removeEventListener('keydown', onKeydown);
 }
 
+useClickOutside(
+  dropdown,
+  (outside: boolean) => {
+    if (outside && showDropdown.value) {
+      close();
+    }
+  },
+  { includes: [button] }
+);
+
 const placementInternal = computed(() => {
   const tooTallForTop =
     buttonY.value - dropdownHeight.value - props.padding < 0;

package/src/components/BaseForm.vue

@@ -17,14 +17,14 @@
     >
       <slot v-if="loading" name="loading">
         <div
-          class="absolute inset-0 flex h-full w-full items-center justify-center"
+          class="absolute inset-0 flex items-center justify-center w-full h-full"
         >
           <div
-            class="absolute inset-0 h-full w-full opacity-80"
+            class="absolute inset-0 w-full h-full opacity-80"
             :class="loadingMaskClass"
           />
           <svg
-            class="relative h-6 w-6 animate-spin text-blue-600"
+            class="relative w-6 h-6 text-blue-600 animate-spin"
             viewBox="0 0 24 24"
           >
             <path

package/src/components/BaseInput.stories.js

@@ -18,6 +18,20 @@ export default {
     type: 'text',
     placeholder: 'Enter your name',
   },
+  argTypes: {
+    mask: {
+      control: { type: 'select' },
+      options: [
+        'phone',
+        'date',
+        'time',
+        'credit-card',
+        'zip-code-canada',
+        'dynamicMask',
+        'customMask',
+      ],
+    },
+  },
 };
 
 const Template = (args) => ({
@@ -92,6 +106,44 @@ Error.args = {
   iconRight: 'heroicons:currency-dollar',
 };
 
+export const PhoneMask = Template.bind({});
+PhoneMask.args = {
+  mask: 'phone',
+  placeholder: '(250) 555-0199',
+};
+
+export const DateMask = Template.bind({});
+DateMask.args = {
+  mask: 'date',
+  placeholder: 'yyyy-mm-dd',
+};
+
+export const TimeMask = Template.bind({});
+TimeMask.args = {
+  mask: 'time',
+  placeholder: 'hh:mm:ss',
+};
+
+export const CreditCard = Template.bind({});
+CreditCard.args = {
+  mask: 'credit-card', //4555 5666 6666 6634
+};
+
+export const CanadianZipCodeMask = Template.bind({});
+CanadianZipCodeMask.args = {
+  mask: 'zip-code-canada', // M5M 4M4
+};
+
+export const DynamicMask = Template.bind({});
+DynamicMask.args = {
+  mask: ['###.###.###-##', '##.###.###/####-##'],
+};
+
+export const CustomMask = Template.bind({});
+CustomMask.args = {
+  mask: (value) => (value.startsWith('1') ? '#-#' : '##-##'),
+};
+
 export const Field = createFieldStory({
   component: BaseInput,
   componentName: 'BaseInput',

package/src/components/BaseInput.vue

@@ -21,6 +21,7 @@
     </div>
     <input
       ref="input"
+      v-maska:[maskOptions]
       :value="modelValue"
       :type="type"
       :name="nameInternal"
@@ -64,10 +65,11 @@
 </template>
 
 <script lang="ts" setup>
-import { get, isNumber, isString, trim } from 'lodash';
+import { get, isString } from 'lodash';
 import { PropType } from 'vue';
 import { BaseIcon } from '@/index';
 import { useField } from '@/composables/field';
+import { vMaska } from 'maska';
 
 const props = defineProps({
   modelValue: {
@@ -137,6 +139,41 @@ const props = defineProps({
     default: undefined,
     type: Number,
   },
+  mask: {
+    type: [String, Array, Function],
+    default() {
+      return null;
+    },
+  },
+});
+
+const maskOptions = computed(() => {
+  if (props.mask) {
+    return {
+      mask: maskInternal.value,
+    };
+  }
+  return undefined;
+});
+
+const maskInternal = computed(() => {
+  if (props.mask === 'phone') {
+    return '(###) ###-####';
+  }
+  if (props.mask === 'date') {
+    return '####-##-##';
+  }
+  if (props.mask === 'time') {
+    return '##:##:##';
+  }
+  if (props.mask === 'credit-card') {
+    return '#### #### #### ####';
+  }
+  if (props.mask === 'zip-code-canada') {
+    return '@#@ #@#';
+  }
+
+  return props.mask;
 });
 
 const emit = defineEmits(['update:modelValue', 'focus', 'blur']);

package/src/components/BaseLayoutSidebar.vue

@@ -59,7 +59,10 @@
               <div class="flex flex-shrink-0 items-center px-4">
                 <img class="block h-8 w-auto" :src="logoUrl" :alt="appName" />
               </div>
-              <div class="mt-5 h-0 flex-1 overflow-y-auto">
+              <div
+                data-scroll-lock-scrollable
+                class="mt-5 h-0 flex-1 overflow-y-auto"
+              >
                 <nav>
                   <slot name="menu" />
                 </nav>

package/src/components/BaseModalCenter.stories.js

@@ -52,6 +52,11 @@ VerticalAlignTop.args = {
   verticalAlign: 'top',
 };
 
+export const NoCloseButton = Template.bind({});
+NoCloseButton.args = {
+  showCloseButton: false,
+};
+
 export const CustomBackdropClass = Template.bind({});
 CustomBackdropClass.args = {
   backdropClass: 'bg-red-500 bg-opacity-70',

package/src/components/BaseModalCenter.vue

@@ -7,16 +7,18 @@
     >
       <div v-show="modelValue">
         <div
-          ref="allow"
+          data-scroll-lock-scrollable
           class="fixed inset-0 z-modal w-full overflow-y-auto overflow-x-hidden"
-          scroll-lock-target
         >
           <div
-            class="flex min-h-full w-full items-end justify-center overflow-hidden pt-20 sm:px-6 sm:pb-6 sm:pt-20"
-            :class="{
-              'sm:items-center': verticalAlign == 'center',
-              'sm:items-start': verticalAlign == 'top',
-            }"
+            class="flex min-h-full w-full items-end justify-center overflow-hidden sm:px-6 sm:pb-6"
+            :class="[
+              showCloseButton ? 'pt-20' : 'pt-6',
+              {
+                'sm:items-center': verticalAlign == 'center',
+                'sm:items-start': verticalAlign == 'top',
+              },
+            ]"
           >
             <div class="pt-safe grow">
               <transition
@@ -64,6 +66,7 @@
           </div>
 
           <button
+            v-if="showCloseButton"
             class="right fixed top-2 right-2 flex h-16 w-16 items-center justify-center rounded-full hover:bg-black hover:bg-opacity-20"
             type="button"
             @click="modal.close()"
@@ -100,15 +103,16 @@ const props = defineProps({
     default: '512px',
     type: String,
   },
+  showCloseButton: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);
 
-const allow = ref(null);
-
 const modal = useModal(
   computed(() => props.modelValue),
-  allow,
   emit as any
 );
 </script>