sprintify-ui 0.0.92 → 0.0.94

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.92",
+  "version": "0.0.94",
   "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/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,52 @@
+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: {
+    labelKey: 'label',
+    valueKey: 'value',
+    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,98 @@
+<template>
+  <div>
+    <BaseButtonGroup
+      :model-value="modelValue"
+      :disabled="disabled"
+      :value-key="valueKey"
+      :label-key="labelKey"
+      :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',
+      ];
+    },
+  },
+  labelKey: {
+    required: true,
+    type: String,
+  },
+  valueKey: {
+    required: true,
+    type: String,
+  },
+  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/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/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

@@ -12,11 +12,14 @@
           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
@@ -51,7 +54,10 @@
               >
                 <div
                   v-if="modelValue"
-                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:max-w-lg sm:rounded-xl sm:shadow-xl"
+                  class="pb-safe relative z-[1] mx-auto block w-full rounded-t-xl bg-white sm:rounded-xl sm:shadow-xl"
+                  :style="{
+                    maxWidth: maxWidth,
+                  }"
                   :class="[modal.animationClasses.value]"
                 >
                   <slot :close="modal.close" />
@@ -61,6 +67,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()"
@@ -93,6 +100,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+  maxWidth: {
+    default: '512px',
+    type: String,
+  },
+  showCloseButton: {
+    default: true,
+    type: Boolean,
+  },
 });
 
 const emit = defineEmits(['update:modelValue']);

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/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,