sprintify-ui 0.0.93 → 0.0.95

package/src/components/BaseModalSide.vue

@@ -7,9 +7,8 @@
     >
       <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 pt-20 sm:pt-0">
             <div class="min-h-full grow">
@@ -97,10 +96,8 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue']);
 
-const allow = ref(null);
 const modal = useModal(
   computed(() => props.modelValue),
-  allow,
   emit
 );
 

package/src/components/BaseRichText.stories.js

@@ -0,0 +1,102 @@
+import BaseRichText from './BaseRichText.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+import { createFieldStory } from '@/../.storybook/utils';
+
+const toolbarOptions = [
+  'full',
+  'essential',
+  'minimal',
+  ['bold', 'italic', 'underline', 'link'],
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'code-block'],
+  ['clean'], // remove formatting button
+];
+
+export default {
+  title: 'Form/BaseRichText',
+  component: BaseRichText,
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: `
+      <form @submit.prevent="" class="border-none">
+        <story/>
+      </form>`,
+    }),
+  ],
+  args: {
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+  argTypes: {
+    theme: {
+      control: { type: 'select' },
+      options: ['snow', 'bubble', ''],
+    },
+    toolbar: {
+      control: { type: 'select' },
+      options: toolbarOptions,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseRichText, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseRichText v-model="value" v-bind="args" class="w-full"></BaseRichText>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+
+export const Basic = Template.bind({});
+Basic.args = {
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const FullToolbar = Template.bind({});
+FullToolbar.args = {
+  toolbar: 'full',
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const EssentialToolbar = Template.bind({});
+EssentialToolbar.args = {
+  toolbar: 'essential',
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const MinimalToolbar = Template.bind({});
+MinimalToolbar.args = {
+  toolbar: 'minimal',
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const SnowTheme = Template.bind({});
+SnowTheme.args = {
+  theme: 'snow',
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const BubbleTheme = Template.bind({});
+BubbleTheme.args = {
+  theme: 'bubble',
+  placeholder: 'Describe your complete life in 4 sentences...',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+  placeholder: '',
+};
+
+export const Field = createFieldStory({
+  component: BaseRichText,
+  componentName: 'BaseRichText',
+  label: 'Name',
+});

package/src/components/BaseRichText.vue

@@ -0,0 +1,121 @@
+<template>
+  <div
+    class="base-rich-text relative"
+    :class="[hasErrorInternal ? 'error' : '']"
+  >
+    <quill-editor
+      :name="nameInternal"
+      :required="requiredInternal"
+      :theme="theme"
+      :toolbar="toolbar"
+      :placeholder="placeholder"
+      :content="modelValue"
+      :read-only="disabled"
+      :enable="enable"
+      content-type="html"
+      @update:content="emitUpdate(updateChange($event))"
+      @ready="onReady"
+    >
+    </quill-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isString, trim } from 'lodash';
+import { PropType } from 'vue';
+import { useField } from '@/composables/field';
+
+import { QuillEditor, Quill } from '@vueup/vue-quill';
+import Delta from 'quill-delta';
+import '@vueup/vue-quill/dist/vue-quill.bubble.css';
+import '@vueup/vue-quill/dist/vue-quill.snow.css';
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Delta, undefined] as PropType<string | Delta | undefined>,
+  },
+  theme: {
+    type: String as PropType<'' | 'snow' | 'bubble'>,
+    default: 'snow',
+  },
+  toolbar: {
+    type: [String, Array] as PropType<string | string[]>,
+    default() {
+      return ['bold', 'italic', 'underline', 'link'];
+    },
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  enable: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
+  useField({
+    name: computed(() => props.name),
+    required: computed(() => props.required),
+    hasError: computed(() => props.hasError),
+    emit: emit,
+  });
+
+function updateChange(value: string | null): string | null {
+  if (value === null) {
+    return '';
+  }
+
+  if (isString(value)) {
+    return trim(value);
+  }
+
+  return '';
+}
+
+function onReady(quill: Quill) {
+  if (quill.root) {
+    //(quill.root as HTMLElement).classList.add('prose', 'max-w-full');
+  }
+}
+</script>
+
+<style lang="postcss">
+.base-rich-text {
+  .ql-toolbar.ql-snow {
+    @apply rounded-t border-slate-300 font-sans;
+  }
+  .ql-container.ql-snow {
+    @apply rounded-b border-slate-300 font-sans;
+  }
+  .ql-container {
+    @apply font-sans;
+  }
+  &.error {
+    & .ql-toolbar.ql-snow,
+    & .ql-container.ql-snow {
+      @apply border-red-500;
+    }
+  }
+}
+</style>

package/src/components/BaseSideNavigation.vue

@@ -1,7 +1,10 @@
 <template>
   <nav aria-label="Sidebar" class="relative">
     <div class="absolute bottom-0 left-0 h-full w-px bg-slate-300" />
-    <div class="relative overflow-x-auto overflow-y-hidden">
+    <div
+      class="relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
       <div class="space-y-2">
         <slot />
       </div>

package/src/components/BaseTable.vue

@@ -7,6 +7,7 @@
     <div class="flex flex-col">
       <div
         class="overflow-x-auto overflow-y-auto"
+        data-scroll-lock-scrollable
         :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }"
       >
         <div class="inline-block min-w-full align-middle">

package/src/components/BaseTabs.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="relative">
     <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
-    <div class="relative overflow-x-auto overflow-y-hidden">
+    <div
+      class="relative overflow-x-auto overflow-y-hidden"
+      data-scroll-lock-scrollable
+    >
       <ul class="flex space-x-4 text-center">
         <slot />
       </ul>

package/src/components/BaseTagAutocomplete.vue

@@ -58,6 +58,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">

package/src/components/BaseTextarea.vue

@@ -8,7 +8,7 @@
     :required="requiredInternal"
     :rows="rows"
     :class="[hasErrorInternal ? 'border-red-500' : 'border-slate-300']"
-    class="mb-0 block rounded disabled:cursor-not-allowed disabled:text-slate-300"
+    class="block mb-0 rounded disabled:cursor-not-allowed disabled:text-slate-300"
     @input="emitUpdate(transformInputValue($event))"
   />
 </template>

package/src/components/index.ts

@@ -17,6 +17,7 @@ import BaseCard from './BaseCard.vue';
 import BaseCardRow from './BaseCardRow.vue';
 import BaseCharacterCounter from './BaseCharacterCounter.vue';
 import BaseClipboard from './BaseClipboard.vue';
+import BaseColor from './BaseColor.vue';
 import BaseContainer from './BaseContainer.vue';
 import BaseCounter from './BaseCounter.vue';
 import BaseDataIterator from './BaseDataIterator.vue';
@@ -53,6 +54,7 @@ import BasePassword from './BasePassword.vue';
 import BaseProgressCircle from './BaseProgressCircle.vue';
 import BaseRadioGroup from './BaseRadioGroup.vue';
 import BaseReadMore from './BaseReadMore.vue';
+import BaseRichText from './BaseRichText.vue';
 import BaseSelect from './BaseSelect.vue';
 import BaseShortcut from './BaseShortcut.vue';
 import BaseSideNavigation from './BaseSideNavigation.vue';
@@ -97,6 +99,7 @@ export {
   BaseCardRow,
   BaseCharacterCounter,
   BaseClipboard,
+  BaseColor,
   BaseContainer,
   BaseCounter,
   BaseDataIterator,
@@ -133,6 +136,7 @@ export {
   BaseProgressCircle,
   BaseRadioGroup,
   BaseReadMore,
+  BaseRichText,
   BaseSelect,
   BaseShortcut,
   BaseSideNavigation,

package/src/composables/clickOutside.ts

@@ -0,0 +1,57 @@
+import { MaybeElementRef, unrefElement, tryOnScopeDispose } from '@vueuse/core';
+
+interface UseClickOutsideOptions {
+  includes?: MaybeElementRef[];
+}
+
+export function useClickOutside(
+  element: MaybeElementRef,
+  callback: (outside: boolean) => void,
+  options: UseClickOutsideOptions = {}
+) {
+  function cleanup() {
+    window.removeEventListener('mousedown', onClick);
+  }
+
+  const stopWatch = watch(
+    () => unrefElement(element),
+    (el) => {
+      if (el) {
+        cleanup();
+        window.addEventListener('mousedown', onClick);
+      }
+    },
+    { immediate: true }
+  );
+
+  function onClick(e: Event) {
+    const el = unrefElement(element);
+
+    const includeEls = options.includes?.map(unrefElement) ?? [];
+
+    if (!el) {
+      return;
+    }
+
+    const contains = el.contains(e.target as HTMLElement);
+
+    const includeContainsEl = includeEls.some((exceptionEl) =>
+      exceptionEl?.contains(e.target as HTMLElement)
+    );
+
+    const outside = !contains && !includeContainsEl;
+
+    callback(outside);
+  }
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    stop,
+  };
+}

package/src/composables/modal.ts

@@ -1,11 +1,7 @@
 import { disableScroll, enableScroll } from '../utils';
 import { Ref } from 'vue';
 
-export function useModal(
-  modelValue: Ref<boolean>,
-  scrollable: Ref<HTMLElement | null>,
-  emit: any
-) {
+export function useModal(modelValue: Ref<boolean>, emit: any) {
   const mounted = ref(false);
 
   watch(
@@ -38,7 +34,7 @@ export function useModal(
   }
 
   function activate() {
-    disableScroll(scrollable.value);
+    disableScroll();
     window.addEventListener('keydown', onKeydown);
   }
 

package/src/utils/scrollPreventer.ts

@@ -1,20 +1,10 @@
-import {
-  disablePageScroll,
-  clearQueueScrollLocks,
-  enablePageScroll,
-  ScrollableTarget,
-} from 'scroll-lock';
+import { disablePageScroll, enablePageScroll } from 'scroll-lock';
 
-function disableScroll(allow: ScrollableTarget | null = null) {
-  if (allow == null) {
-    allow = document.querySelectorAll('[scroll-lock-target]');
-  }
-
-  disablePageScroll(allow);
+function disableScroll() {
+  disablePageScroll();
 }
 
 function enableScroll() {
-  clearQueueScrollLocks();
   enablePageScroll();
 }