sprintify-ui 0.0.11 → 0.0.12

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>

package/src/components/BaseTabs.stories.js

@@ -0,0 +1,54 @@
+import BaseTabs from './BaseTabs.vue';
+import BaseTabItem from './BaseTabItem.vue';
+import BaseContainer from './BaseContainer.vue';
+import BaseCard from './BaseCard.vue';
+import BaseCardRow from './BaseCardRow.vue';
+
+export default {
+  title: 'Layout/BaseTabs',
+  component: BaseTabs,
+  args: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTabs,
+    BaseTabItem,
+    BaseContainer,
+    BaseCard,
+    BaseCardRow,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+  <div class="bg-slate-100 py-10">
+    <BaseContainer>
+      <BaseTabs v-bind="args">
+        <BaseTabItem to="/">
+          Home
+        </BaseTabItem>
+        <BaseTabItem to="/setup">
+          Setup
+        </BaseTabItem>
+        <BaseTabItem to="/settings">
+          Settings
+        </BaseTabItem>
+        <BaseTabItem to="/misc">
+          Miscellaneous
+        </BaseTabItem>
+      </BaseTabs>
+      <div class="mt-10">
+        <BaseCard>
+          <BaseCardRow>
+            {{ $route.path }}
+          </BaseCardRow>
+        </BaseCard>
+      </div>
+    </BaseContainer>
+  </div>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseTabs.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="relative">
-    <div class="absolute bottom-0 left-0 h-[2px] w-full bg-slate-300" />
-    <div class="overflow-x-auto overflow-y-hidden">
-      <ul class="flex space-x-2 text-center text-sm font-medium">
+    <div class="absolute bottom-0 left-0 h-px w-full bg-slate-300" />
+    <div class="relative overflow-x-auto overflow-y-hidden">
+      <ul class="flex space-x-4 text-center">
         <slot />
       </ul>
     </div>

package/src/components/BaseTextarea.stories.js

@@ -0,0 +1,35 @@
+import BaseTextarea from './BaseTextarea.vue';
+
+export default {
+  title: 'Form/BaseTextarea',
+  component: BaseTextarea,
+  args: {
+    name: 'bio',
+    required: true,
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextarea,
+  },
+  setup() {
+    const value = ref('');
+    return { args, value };
+  },
+  template: `
+  <form @submit.prevent="" class="border-none">
+    <BaseTextarea v-model="value" v-bind="args" class="w-full"></BaseTextarea>
+  </form>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};

package/src/components/BaseTextarea.vue

@@ -7,7 +7,7 @@
     :disabled="disabled"
     :required="required"
     :rows="rows"
-    class="mb-0 block rounded"
+    class="mb-0 block rounded border-slate-300 disabled:cursor-not-allowed disabled:text-slate-300"
     @input="$emit('update:modelValue', transformInputValue($event))"
   />
 </template>

package/src/components/BaseTextareaAutoresize.stories.js

@@ -0,0 +1,49 @@
+import BaseTextareaAutoresize from './BaseTextareaAutoresize.vue';
+
+export default {
+  title: 'Form/BaseTextareaAutoresize',
+  component: BaseTextareaAutoresize,
+  args: {
+    name: 'bio',
+    placeholder: 'Describe your complete life in 4 sentences...',
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BaseTextareaAutoresize,
+  },
+  setup() {
+    function onSubmit() {
+      alert('submit');
+    }
+    const value = ref('');
+    return { args, value, onSubmit };
+  },
+  template: `
+  <form @submit.prevent="onSubmit" class="border-none">
+    <BaseTextareaAutoresize 
+      v-model="value" 
+      v-bind="args" 
+      class="w-full" 
+      @submit="onSubmit"
+    ></BaseTextareaAutoresize>
+  </form>
+
+  <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded whitespace-pre-wrap text-white">{{ {value} }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const SubmitOnEnter = Template.bind({});
+SubmitOnEnter.args = {
+  submitOnEnter: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: 'Lorem ipsum...',
+  disabled: true,
+};