sprintify-ui 0.0.10 → 0.0.12

package/src/components/BaseSelect.vue

@@ -1,59 +1,159 @@
 <template>
   <select
-    :value="modelValue"
+    ref="select"
+    :value="modelValueInternal"
     :name="name"
     :disabled="disabled"
     :required="required"
-    class="rounded"
+    class="rounded border border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300 disabled:opacity-100"
+    :class="[!modelValue && required ? 'text-slate-400' : '']"
     @change="onChange($event)"
   >
-    <option v-if="required" selected disabled hidden value="">
-      {{ placeholder ? placeholder : $t('sui.select_an_option') }}
-    </option>
+    <template v-if="required">
+      <option disabled hidden :value="EMPTY_VALUE_INTERNAL">
+        {{ placeholder ? placeholder : $t('sui.select_an_option') }}
+      </option>
+    </template>
+    <template v-else>
+      <option :value="EMPTY_VALUE_INTERNAL">
+        {{ placeholder ? placeholder : $t('sui.select_an_option') }}
+      </option>
+    </template>
     <slot />
   </select>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import { get } from 'lodash';
-
-export default defineComponent({
-  props: {
-    modelValue: {
-      default: null,
-      type: [String, Number, null] as PropType<string | number | null>,
-    },
-    name: {
-      default: undefined,
-      type: String,
-    },
-    placeholder: {
-      default: '',
-      type: String,
-    },
-    disabled: {
-      default: false,
-      type: Boolean,
-    },
-    required: {
-      default: false,
-      type: Boolean,
-    },
+<script lang="ts" setup>
+import { PropType, Ref } from 'vue';
+import { get, isEqual } from 'lodash';
+import { useMounted } from '@vueuse/core';
+
+type Option = string | number | null;
+
+const EMPTY_VALUE_INTERNAL = '';
+const EMPTY_VALUE_EXTERNAL = null;
+
+const props = defineProps({
+  modelValue: {
+    default: undefined,
+    type: [String, Number, null, undefined] as PropType<Option>,
+  },
+  name: {
+    default: undefined,
+    type: String,
   },
-  emits: ['update:modelValue'],
-  methods: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    onChange(event: Event): any {
-      if (event === null) {
-        this.$emit('update:modelValue', null);
-      }
-      const value = get(event, 'target.value', null);
-      if (value === null) {
-        this.$emit('update:modelValue', null);
-      }
-      this.$emit('update:modelValue', value);
-    },
+  placeholder: {
+    default: '',
+    type: String,
   },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const mounted = useMounted();
+const select = ref(null) as Ref<HTMLSelectElement | null>;
+
+const emit = defineEmits(['update:modelValue']);
+
+function isEmptyExternal(value: string | number | null | undefined) {
+  if (value === undefined || value === EMPTY_VALUE_EXTERNAL) {
+    return true;
+  }
+
+  return false;
+}
+
+function isEmptyInternal(value: string | number | null | undefined) {
+  if (value === undefined || value === EMPTY_VALUE_INTERNAL) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Transform to external empty NULL
+ * to internal empty ''.
+ */
+const modelValueInternal = computed(() => {
+  if (isEmptyExternal(props.modelValue)) {
+    return EMPTY_VALUE_INTERNAL;
+  }
+
+  if (!validModelValue()) {
+    return EMPTY_VALUE_INTERNAL;
+  }
+
+  return props.modelValue;
 });
+
+/**
+ * Checks if the current modelValue is valid
+ */
+function validModelValue(): boolean {
+  if (props.modelValue === EMPTY_VALUE_EXTERNAL) {
+    return true;
+  }
+
+  const options = [...(select.value?.options ?? [])];
+  return options.findIndex((o) => isEqual(o.value, props.modelValue)) != -1;
+}
+
+/**
+ * This watcher is used to update the parent value
+ * if the given modelValue should be empty.
+ */
+watch(
+  () => props.modelValue,
+  () => validateAndFixModelVale()
+);
+
+/**
+ * Re-trigger the same validation on mounted
+ */
+onMounted(() => {
+  validateAndFixModelVale();
+});
+
+/**
+ * Validate the current Model Value. Transform to external empty if :
+ * 1. is internal empty
+ * 2. is in the current options
+ */
+function validateAndFixModelVale() {
+  if (!mounted.value) {
+    return;
+  }
+  if (isEmptyInternal(props.modelValue)) {
+    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+  } else if (!validModelValue()) {
+    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+  }
+}
+
+/**
+ *
+ * Emit change while mutating internal empty value ''
+ * to external empty value NULL.
+ */
+function onChange(event: Event) {
+  if (event === null) {
+    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+  }
+
+  const value = get(event, 'target.value', null);
+
+  if (isEmptyExternal(value)) {
+    emit('update:modelValue', EMPTY_VALUE_EXTERNAL);
+    return;
+  }
+
+  emit('update:modelValue', value);
+}
 </script>

package/src/components/BaseSideNavigation.stories.js

@@ -0,0 +1,55 @@
+import BaseSideNavigation from './BaseSideNavigation.vue';
+import BaseSideNavigationItem from './BaseSideNavigationItem.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+  title: 'Layout/BaseSideNavigation',
+  component: BaseSideNavigation,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSideNavigation,
+    BaseSideNavigationItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <div class="md:flex">
+        <div class="shrink-0 mb-6 md:mb-0" style="margin-right: 2rem; width: 200px;">
+          <BaseSideNavigation v-bind="args">
+            <BaseSideNavigationItem to="/">
+              Home
+            </BaseSideNavigationItem>
+            <BaseSideNavigationItem to="/setup">
+              Setup
+            </BaseSideNavigationItem>
+            <BaseSideNavigationItem to="/settings">
+              Settings
+            </BaseSideNavigationItem>
+          </BaseSideNavigation>
+        </div>
+        <div class="grow">
+          <BaseCard>
+            <BaseCardRow>
+              {{ $route.path }}
+            </BaseCardRow>
+          </BaseCard>
+        </div>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseSideNavigation.vue

@@ -1,6 +1,11 @@
 <template>
-  <nav class="space-y-1" aria-label="Sidebar">
-    <slot />
+  <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="space-y-2">
+        <slot />
+      </div>
+    </div>
   </nav>
 </template>
 

package/src/components/BaseSideNavigationItem.vue

@@ -3,15 +3,23 @@
     <a
       :href="disabled ? undefined : href"
       :disabled="disabled"
-      class="flex items-center rounded-md px-3 py-2 text-sm font-medium"
+      class="group relative flex items-center px-3 py-1"
       :class="[
         isActive
-          ? 'bg-slate-300 bg-opacity-60 text-black'
-          : 'text-slate-600 hover:bg-slate-200 hover:bg-opacity-70 hover:text-slate-900',
+          ? 'font-semibold text-blue-600'
+          : 'text-slate-600 hover:text-slate-900',
         disabled ? 'cursor-not-allowed opacity-60' : '',
       ]"
       @click.prevent="onClick(navigate)"
     >
+      <div
+        class="absolute left-0 top-0 h-full"
+        :class="[
+          isActive
+            ? 'w-[2px] bg-blue-600'
+            : 'group-hover:w-px group-hover:bg-slate-700',
+        ]"
+      ></div>
       <slot />
     </a>
   </router-link>

package/src/components/BaseSkeleton.stories.js

@@ -0,0 +1,36 @@
+import BaseSkeleton from './BaseSkeleton.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseSkeleton',
+  component: BaseSkeleton,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSkeleton,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="xl">
+    <div class="flex space-x-5">
+      <div class="shrink-0">
+        <BaseSkeleton class="h-16 rounded-full w-16" v-bind="args"></BaseSkeleton>
+      </div>
+      <div class="grow">
+        <BaseSkeleton class="w-52 h-8 mb-3" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+        <BaseSkeleton class="w-full h-4 mb-1" v-bind="args"></BaseSkeleton>
+      </div>
+    </div>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseSwitch.stories.js

@@ -0,0 +1,101 @@
+import BaseSwitch from './BaseSwitch.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Form/BaseSwitch',
+  component: BaseSwitch,
+  args: {},
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: [
+        'primary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+        'light',
+        'dark',
+      ],
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'base', 'lg', 'xl'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value };
+  },
+  template: `
+    <BaseSwitch v-model="value" v-bind="args">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+const colors = [
+  'primary',
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'light',
+  'dark',
+];
+
+const Colors = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseSwitch v-model="value" :color="color">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};
+
+const sizes = ['xs', 'sm', 'base', 'lg', 'xl'];
+
+const Sizes = (args) => ({
+  components: {
+    BaseSwitch,
+    BaseContainer,
+  },
+  setup() {
+    const value = ref(true);
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseSwitch v-model="value" :size="size">
+      <span class="text-slate-600">Label</span>
+    </BaseSwitch>
+  </div>
+  `,
+});
+
+export const AllSizes = Sizes.bind({});
+AllSizes.args = {};

package/src/components/BaseSwitch.vue

@@ -5,17 +5,23 @@
         :model-value="modelValue"
         :class="[
           modelValue ? bg : 'bg-slate-200',
-          'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
+          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 ',
           focus,
         ]"
+        :style="{
+          width: width + 'px',
+          height: height + 'px',
+        }"
         @update:model-value="update"
       >
         <span
           aria-hidden="true"
-          :class="[
-            modelValue ? 'translate-x-5' : 'translate-x-0',
-            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
-          ]"
+          :style="{
+            height: sizePx + 'px',
+            width: sizePx + 'px',
+            transform: `translateX(${translateX}px)`,
+          }"
+          class="pointer-events-none inline-block rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
         />
       </Switch>
       <SwitchLabel v-if="$slots.default" class="cursor-pointer">
@@ -27,7 +33,7 @@
 
 <script lang="ts">
 import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue';
-import { defineComponent } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 export default defineComponent({
   components: {
@@ -43,11 +49,13 @@ export default defineComponent({
     },
     color: {
       default: 'primary',
-      type: String,
+      type: String as PropType<
+        'primary' | 'info' | 'danger' | 'warning' | 'success' | 'dark' | 'light'
+      >,
     },
     size: {
       default: 'base',
-      type: String,
+      type: String as PropType<'xs' | 'sm' | 'base' | 'lg' | 'xl'>,
     },
   },
   emits: ['update:modelValue'],
@@ -56,26 +64,96 @@ export default defineComponent({
       if (this.color == 'primary') {
         return 'bg-primary-500';
       }
-      if (this.color == 'red') {
+      if (this.color == 'info') {
+        return 'bg-blue-500';
+      }
+      if (this.color == 'danger') {
         return 'bg-red-500';
       }
-      if (this.color == 'green') {
+      if (this.color == 'warning') {
+        return 'bg-yellow-500';
+      }
+      if (this.color == 'success') {
         return 'bg-green-500';
       }
+      if (this.color == 'light') {
+        return 'bg-slate-500';
+      }
       return 'bg-slate-900';
     },
     focus() {
       if (this.color == 'primary') {
         return 'focus:ring-primary-500';
       }
-      if (this.color == 'red') {
+      if (this.color == 'info') {
+        return 'focus:ring-blue-500';
+      }
+      if (this.color == 'danger') {
         return 'focus:ring-red-500';
       }
-      if (this.color == 'green') {
+      if (this.color == 'warning') {
+        return 'focus:ring-yellow-500';
+      }
+      if (this.color == 'success') {
         return 'focus:ring-green-500';
       }
+      if (this.color == 'light') {
+        return 'focus:ring-slate-500';
+      }
       return 'focus:ring-slate-900';
     },
+    sizePx() {
+      if (this.size == 'xs') {
+        return 12;
+      }
+      if (this.size == 'sm') {
+        return 16;
+      }
+      if (this.size == 'base') {
+        return 20;
+      }
+      if (this.size == 'lg') {
+        return 24;
+      }
+      if (this.size == 'xl') {
+        return 32;
+      }
+      return 16;
+    },
+    padding() {
+      if (this.size == 'xs') {
+        return 2;
+      }
+      if (this.size == 'sm') {
+        return 2.5;
+      }
+      if (this.size == 'base') {
+        return 3;
+      }
+      if (this.size == 'lg') {
+        return 3;
+      }
+      if (this.size == 'xl') {
+        return 4;
+      }
+      return 2;
+    },
+    height() {
+      return this.sizePx + 2 * this.padding;
+    },
+    distance() {
+      return 2 * this.sizePx;
+    },
+    width() {
+      return this.distance + 2 * this.padding;
+    },
+    translateX() {
+      if (this.modelValue) {
+        return this.padding + this.distance - this.sizePx;
+      }
+
+      return this.padding;
+    },
   },
   methods: {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/src/components/BaseSystemAlert.stories.js

@@ -0,0 +1,63 @@
+import BaseSystemAlert from './BaseSystemAlert.vue';
+
+export default {
+  title: 'Layout/BaseSystemAlert',
+  component: BaseSystemAlert,
+  args: {
+    to: 'https://google.com',
+  },
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSystemAlert,
+  },
+  setup() {
+    function onClose() {
+      alert('close');
+    }
+
+    return { args, onClose };
+  },
+  template: `
+    <BaseSystemAlert v-bind="args" @close="onClose">
+     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
+    </BaseSystemAlert>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Closable = Template.bind({});
+Closable.args = {
+  closable: true,
+};
+
+const colors = ['info', 'success', 'warning', 'danger'];
+
+const Colors = (args) => ({
+  components: {
+    BaseSystemAlert,
+  },
+  setup() {
+    return { args, colors };
+  },
+  template: `
+  <div v-for="color in colors" class="mb-1">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ color }}</p>
+    <BaseSystemAlert v-bind="args" :color="color">
+     Tempor nisi ut ea sit pariatur aute irure magna id id ullamco cupidatat enim.
+    </BaseSystemAlert>
+  </div>
+  `,
+});
+
+export const AllColors = Colors.bind({});
+AllColors.args = {};

package/src/components/BaseTabItem.vue

@@ -1,17 +1,26 @@
 <template>
   <li role="presentation">
-    <router-link v-slot="{ href, navigate, isExactActive }" :to="to" custom>
+    <router-link v-slot="{ href, navigate, isActive }" :to="to" custom>
       <a
         :href="href"
-        class="relative inline-block whitespace-nowrap rounded-t-lg border-b-[2px] p-4 font-medium"
+        class="group relative inline-block rounded-t-lg px-2 py-3 font-medium"
         :class="[
-          isExactActive
-            ? 'border-blue-600 text-blue-600'
-            : 'border-transparent hover:border-slate-300 hover:text-slate-600',
+          isActive ? 'text-blue-600' : 'text-slate-600 hover:text-slate-900',
+          disabled ? 'cursor-not-allowed opacity-60' : '',
         ]"
         @click="navigate"
       >
-        <slot />
+        <div
+          class="absolute left-0 bottom-0 w-full"
+          :class="[
+            isActive
+              ? 'h-[2px] bg-blue-600'
+              : 'group-hover:h-px group-hover:bg-slate-700',
+          ]"
+        ></div>
+        <div class="whitespace-nowrap">
+          <slot />
+        </div>
       </a>
     </router-link>
   </li>
@@ -26,5 +35,9 @@ defineProps({
     required: true,
     type: [Object, String] as PropType<RouteLocationRaw>,
   },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
 });
 </script>