sprintify-ui 0.0.11 → 0.0.12

package/src/components/BasePaginationSimple.vue

@@ -41,19 +41,19 @@ export default defineComponent({
       type: Number,
     },
   },
-  emits: ['model-value:update'],
+  emits: ['update:model-value'],
   methods: {
     next() {
       if (this.modelValue >= this.lastPage) {
         return;
       }
-      this.$emit('model-value:update', this.modelValue + 1);
+      this.$emit('update:model-value', this.modelValue + 1);
     },
     previous() {
       if (this.modelValue == 1) {
         return;
       }
-      this.$emit('model-value:update', this.modelValue - 1);
+      this.$emit('update:model-value', this.modelValue - 1);
     },
   },
 });

package/src/components/BasePanel.stories.js

@@ -0,0 +1,56 @@
+import BaseContainer from './BaseContainer.vue';
+import BasePanel from './BasePanel.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+import BaseInput from './BaseInput.vue';
+
+export default {
+  title: 'Layout/BasePanel',
+  component: BasePanel,
+  args: {
+    title: 'General information',
+    description:
+      'Enter general user information, name and age. User must be more than 10 years old to participate.',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseContainer,
+    BasePanel,
+    BaseCard,
+    BaseCardRow,
+    BaseInputLabel,
+    BaseInput,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BasePanel v-bind="args">
+        <BaseCard>
+          <BaseCardRow>
+            <div class="mb-4">
+              <BaseInputLabel label="Name" />
+              <BaseInput name="name" class="w-full" placeholder="Enter you name" />
+            </div>
+
+            <div class="mb-4">
+              <BaseInputLabel label="Age" />
+              <BaseInput name="age" class="w-full" placeholder="Enter you age" />
+            </div>
+
+            <button class="btn btn-primary mt-2">Submit</button>
+          </BaseCardRow>
+        </BaseCard>
+      </BasePanel>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BasePassword.stories.js

@@ -0,0 +1,36 @@
+import BasePassword from './BasePassword.vue';
+
+export default {
+  title: 'Form/BasePassword',
+  component: BasePassword,
+  args: {
+    required: true,
+    name: 'password',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BasePassword,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="">
+    <BasePassword class="border-slate-300" v-model="value" v-bind="args"></BasePassword>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  placeholder: 'Enter your password',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  placeholder: 'Enter your password',
+};

package/src/components/BasePassword.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex border bg-white">
+  <div
+    class="flex rounded border border-slate-300 bg-white"
+    :class="[disabled ? 'cursor-not-allowed text-slate-300' : '']"
+  >
     <input
       ref="input"
       :value="modelValue"
@@ -8,7 +11,7 @@
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
-      class="grow rounded-l border-none focus:ring-2 focus:ring-primary-500"
+      class="grow rounded-l rounded-r-none border-none focus:ring-2 focus:ring-primary-500 disabled:cursor-not-allowed"
       :class="inputClass"
       @input="onInput"
     />
@@ -16,15 +19,16 @@
       <button
         tabindex="-1"
         type="button"
-        class="pr-3 text-slate-500"
+        class="pr-3 text-slate-500 disabled:cursor-not-allowed disabled:text-slate-300"
+        :disabled="disabled"
         @click="showPassword = !showPassword"
       >
         <BaseIcon
           v-if="!showPassword"
-          icon="heroicons:eye-off"
+          icon="heroicons:eye-slash-20-solid"
           class="h-5 w-5"
         />
-        <BaseIcon v-else icon="heroicons:eye" class="h-5 w-5" />
+        <BaseIcon v-else icon="heroicons:eye-20-solid" class="h-5 w-5" />
       </button>
     </div>
   </div>
@@ -33,8 +37,10 @@
 <script lang="ts">
 import { trim } from 'lodash';
 import { defineComponent, PropType } from 'vue';
+import { Icon as BaseIcon } from '@iconify/vue';
 
 export default defineComponent({
+  components: { BaseIcon },
   props: {
     modelValue: {
       default: '',

package/src/components/BaseProcessRing.stories.js

@@ -0,0 +1,27 @@
+import BaseProcessRing from './BaseProcessRing.vue';
+
+export default {
+  title: 'Components/BaseProcessRing',
+  component: BaseProcessRing,
+  args: {
+    class: 'text-primary-500',
+    radius: 100,
+    stroke: 5,
+    progress: 0.6,
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseProcessRing,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseProcessRing v-bind="args"></BaseProcessRing>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseReadMore.stories.js

@@ -0,0 +1,30 @@
+import BaseReadMore from './BaseReadMore.vue';
+import BaseContainer from './BaseContainer.vue';
+
+export default {
+  title: 'Components/BaseReadMore',
+  component: BaseReadMore,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseReadMore,
+    BaseContainer,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BaseContainer size="3xl">
+    <BaseReadMore v-bind="args">
+      <p class="text-slate-600">
+        Aute incididunt laborum in sint commodo reprehenderit et aliquip aliqua proident exercitation nostrud sunt. Consectetur laborum elit do non ullamco anim fugiat laboris non aliqua consequat culpa. Veniam aliquip irure et qui dolore eiusmod exercitation elit exercitation ad excepteur reprehenderit enim. Id laboris do eu amet qui Lorem excepteur. Eiusmod eiusmod est qui minim consectetur aliqua occaecat sit tempor nulla. Velit et eiusmod id ut adipisicing occaecat deserunt.Excepteur occaecat nulla deserunt Lorem eu mollit non esse. Velit do proident adipisicing labore ipsum nostrud ipsum pariatur magna. Consequat do reprehenderit eiusmod cupidatat cupidatat cupidatat reprehenderit. Aute fugiat ex fugiat in ut enim dolore est qui. Lorem irure eiusmod eiusmod cillum aute nostrud sint aute enim aute. Aliquip aliqua quis deserunt commodo fugiat incididunt sint qui proident.
+      </p>
+    </BaseReadMore>
+  </BaseContainer>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseReadMore.vue

@@ -13,7 +13,7 @@
       class="mt-1 inline appearance-none border-b border-dashed border-slate-400 bg-transparent px-0.5 py-0 text-slate-900 hover:text-slate-600"
       @click="showMore = true"
     >
-      <span class="text-base font-semibold">{{ $t('sui.read_more') }}</span>
+      <span class="text-base font-medium">{{ $t('sui.read_more') }}</span>
     </button>
   </div>
 </template>

package/src/components/BaseSelect.stories.js

@@ -0,0 +1,67 @@
+import BaseSelect from './BaseSelect.vue';
+import BaseInputLabel from './BaseInputLabel.vue';
+
+export default {
+  title: 'Form/BaseSelect',
+  component: BaseSelect,
+  args: {
+    name: 'name',
+    class: 'w-full',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseSelect,
+    BaseInputLabel,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    // To test, you should try the following scenarios
+    // - valid (ex: 'javascript')
+    // - invalid (ex: 'test')
+    // - empty string ''
+    // - null
+    // - undefined
+
+    // Test on Safari AND Chrome
+
+    // For optional, make sure the default option is selected
+    // For required, try to submit, it should be prevented
+    const value = ref('test');
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseInputLabel :required="args.required" label="Choose your favorite programing language" />
+    <BaseSelect v-model="value" v-bind="args">
+      <option value="javascript">JavaScript</option>
+      <option value="typescript">Typescript</option>
+      <option value="golang">Golang</option>
+    </BaseSelect>
+    <button type="submit" class="btn btn-primary mt-5">Submit</button>
+  </form>
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ {value} }}</pre>
+  `,
+});
+
+export const Optional = Template.bind({});
+Optional.args = {
+  required: false,
+  placeholder: 'I dont like programing languages',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+  placeholder: 'Choose a language',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  required: true,
+  placeholder: 'Choose a language',
+  disabled: true,
+};

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 = {};