sprintify-ui 0.0.0

package/src/assets/pikaday.css

@@ -0,0 +1,134 @@
+@import 'pikaday/css/pikaday.css';
+
+.pikaday-white {
+  --backgroundColor: #ffffff;
+  --textColor: #718096;
+  --currentDateTextColor: #3182ce;
+  --selectedDateBackgroundColor: #3182ce;
+  --selectedDateTextColor: #ffffff;
+
+  --labelTextColor: #4a5568; /* eg. May 2020 */
+  --weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/
+
+  font-family: inherit;
+  background-color: var(--backgroundColor);
+  padding: 0.5rem;
+  z-index: 2000;
+  margin: 6px 0 0 0;
+
+  @apply shadow;
+  @apply rounded-lg;
+}
+
+.pikaday-white .pika-title {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 5px;
+}
+
+/* Next/Previous */
+.pikaday-white .pika-prev,
+.pikaday-white .pika-next {
+  position: absolute;
+  outline: none;
+  padding: 0;
+  width: 26px;
+  height: 26px;
+  top: -1px;
+  display: inline-block;
+  margin-top: 0;
+  cursor: pointer;
+  /* hide text using text-indent trick, using width value (it's enough) */
+  text-indent: -9999px;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  opacity: 0.7;
+}
+.pikaday-white .pika-prev:hover,
+.pikaday-white .pika-next:hover {
+  opacity: 1;
+}
+.pikaday-white .pika-prev {
+  right: 30px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19l-7-7 7-7'%3E%3C/path%3E%3C/svg%3E");
+}
+.pikaday-white .pika-next {
+  right: 2px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a0aec0'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 5l7 7-7 7'%3E%3C/path%3E%3C/svg%3E");
+}
+.pika-prev.is-disabled,
+.pika-next.is-disabled {
+  cursor: default;
+  opacity: 0.2;
+}
+
+.pikaday-white .pika-label {
+  @apply mr-1.5 rounded border border-slate-300 py-1 px-2 text-[14px] font-medium leading-none;
+}
+
+/* Show Month & Year select */
+.pikaday-white .pika-label {
+  position: relative; /* add this */
+  /* some additional code */
+}
+
+.pikaday-white .pika-select-month,
+.pikaday-white .pika-select-year {
+  /*display: none;*/
+  width: 100%;
+  cursor: pointer;
+  position: absolute;
+  z-index: 9998;
+  margin: 0;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  padding: 0px;
+}
+
+.pikaday-white table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.pikaday-white table th {
+  width: 2em;
+  height: 2em;
+  font-weight: normal;
+  color: var(--weekDaysTextColor);
+  text-align: center;
+}
+.pikaday-white table th abbr {
+  text-decoration: none;
+}
+.pikaday-white table td {
+  padding: 1px;
+}
+.pikaday-white table td button {
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  @apply rounded-full;
+  background-color: var(--backgroundColor);
+}
+.pikaday-white table td button:hover {
+  @apply bg-slate-200;
+  @apply text-slate-900;
+}
+.pikaday-white table td.is-today button {
+  color: var(--currentDateTextColor);
+}
+.pikaday-white table td.is-selected button {
+  @apply bg-primary-500;
+  @apply text-white;
+  @apply font-normal;
+}
+
+.pikaday-white table td button {
+  color: var(--textColor);
+}

package/src/assets/tailwind.css

@@ -0,0 +1,5 @@
+@import "tailwindcss/base";
+
+@import "tailwindcss/components";
+
+@import "tailwindcss/utilities";

package/src/components/BaseAlert.stories.js

@@ -0,0 +1,52 @@
+import BaseAlert from './BaseAlert.vue';
+
+export default {
+  title: 'Components/BaseAlert',
+  component: BaseAlert,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['success', 'info', 'warning', 'danger'],
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseAlert },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseAlert v-bind="args">
+      <p>Nisi Lorem sunt amet aliqua dolor ullamco deserunt enim irure non ad. Excepteur culpa consectetur dolore culpa sunt aliquip proident quis. Excepteur officia mollit aute sint quis nisi sint.</p>
+    </BaseAlert>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {
+  title: 'Be careful',
+  color: 'warning',
+  bordered: true,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  title: 'Success',
+  color: 'success',
+  bordered: true,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  title: 'Error',
+  color: 'danger',
+  bordered: true,
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  title: 'Information',
+  color: 'info',
+  bordered: true,
+};

package/src/components/BaseAlert.vue

@@ -0,0 +1,152 @@
+<template>
+  <div
+    class="flex w-full items-start rounded-md p-4"
+    :class="[backgroundClass, borderClass]"
+  >
+    <div v-if="showIcon" class="mr-3">
+      <Icon
+        v-if="color == 'warning'"
+        icon="heroicons-solid:exclamation"
+        :class="iconClass"
+      />
+      <Icon
+        v-else-if="color == 'danger'"
+        icon="heroicons-solid:exclamation-circle"
+        :class="iconClass"
+      />
+      <Icon
+        v-else-if="color == 'success'"
+        icon="heroicons-solid:check-circle"
+        :class="iconClass"
+      />
+      <Icon
+        v-else-if="color == 'info'"
+        icon="heroicons-solid:information-circle"
+        :class="iconClass"
+      />
+    </div>
+
+    <div>
+      <h3
+        v-if="title"
+        class="mb-1 font-medium leading-tight"
+        :class="[titleClass]"
+      >
+        {{ title }}
+      </h3>
+
+      <div v-if="$slots.default" :class="[textClass, 'text-sm leading-tight']">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      required: false,
+      default: '',
+      type: String,
+    },
+    color: {
+      default: 'success',
+      type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
+    },
+    showIcon: {
+      default: true,
+      type: Boolean,
+    },
+    bordered: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  computed: {
+    backgroundClass(): string {
+      if (this.color == 'info') {
+        return 'bg-blue-50';
+      }
+      if (this.color == 'success') {
+        return 'bg-green-50';
+      }
+      if (this.color == 'danger') {
+        return 'bg-red-50';
+      }
+      if (this.color == 'warning') {
+        return 'bg-yellow-50';
+      }
+      return 'bg-slate-900';
+    },
+    borderClass(): string {
+      if (!this.bordered) {
+        return '';
+      }
+      if (this.color == 'info') {
+        return 'border border-blue-400';
+      }
+      if (this.color == 'success') {
+        return 'border border-green-400';
+      }
+      if (this.color == 'danger') {
+        return 'border border-red-400';
+      }
+      if (this.color == 'warning') {
+        return 'border border-yellow-400';
+      }
+      return 'borer border-slate-900';
+    },
+    titleClass(): string {
+      if (this.color == 'info') {
+        return 'text-blue-800';
+      }
+      if (this.color == 'success') {
+        return 'text-green-800';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-800';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-800';
+      }
+      return 'text-white';
+    },
+    textClass(): string {
+      if (this.color == 'info') {
+        return 'text-blue-700';
+      }
+      if (this.color == 'success') {
+        return 'text-green-700';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-700';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-700';
+      }
+      return 'text-white';
+    },
+    iconClass(): string {
+      return this.icon + ' w-5 h-5';
+    },
+    icon(): string {
+      if (this.color == 'info') {
+        return 'text-blue-400';
+      }
+      if (this.color == 'success') {
+        return 'text-green-500';
+      }
+      if (this.color == 'warning') {
+        return 'text-yellow-500';
+      }
+      if (this.color == 'danger') {
+        return 'text-red-500';
+      }
+      return 'text-white';
+    },
+  },
+});
+</script>

package/src/components/BaseAutocomplete.stories.js

@@ -0,0 +1,127 @@
+import BaseAutocomplete from './BaseAutocomplete.vue';
+
+export default {
+  title: 'Form/BaseAutocomplete',
+  component: BaseAutocomplete,
+  argTypes: {},
+  args: {
+    labelKey: 'label',
+    valueKey: 'value',
+    inputClass: 'w-full border-slate-300',
+    options: [
+      { label: 'Dark Vader', value: 'dark_vader' },
+      { label: 'Darth Maul', value: 'darth_maul' },
+      { label: 'Dark Sidious', value: 'dark_sidious' },
+    ],
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => ({
+  components: { BaseAutocomplete },
+  setup() {
+    const value = ref(null);
+    return { args, value };
+  },
+  template: `
+    <BaseAutocomplete v-model="value" v-bind="args"></BaseAutocomplete>
+    <p class="mt-5 text-sm">Value: <span class="bg-slate-200 font-mono px-1 py-px rounded">{{ value ?? 'NULL' }}</span></p>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  options: [],
+  disabled: true,
+  modelValue: { label: 'Dark Maul', value: '1' },
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const SlotOption = (args) => ({
+  components: { BaseAutocomplete },
+  setup() {
+    const value = ref(null);
+
+    const options = [
+      { label: 'Red', value: 'red' },
+      { label: 'Blue', value: 'blue' },
+      { label: 'Green', value: 'green' },
+      { label: 'Black', value: 'black' },
+      { label: 'Gray', value: 'gray' },
+    ];
+
+    return { value, options, args };
+  },
+  template: `
+  <BaseAutocomplete
+    v-bind="args"
+    v-model="value"
+    :options="options"
+  >
+    <template #option="{ option, active, selected }">
+      <div
+        class="rounded px-2 font-semibold py-1 text-sm"
+        :class="{
+          'hover:bg-slate-100': !active && !selected,
+          'bg-slate-200 hover:bg-slate-300': active && !selected,
+          'bg-blue-500 text-white hover:bg-blue-600': !active && selected,
+          'bg-blue-600 text-white hover:bg-blue-700': active && selected,
+        }"
+        :style="{ color: selected ? '' : option.value }"
+      >
+        {{ option.label }}
+      </div>
+    </template>
+  </BaseAutocomplete>
+  `,
+});
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseAutocomplete },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseAutocomplete
+      v-model="value"
+      v-bind="args"
+    >
+      <template #footer>
+        <div class="text-center p-1 pt-2 mt-2 border-t">
+          <button class="btn btn-sm w-full btn-slate-200-outline">This is the footer 💯</button>
+        </div>
+      </template>
+    </BaseAutocomplete>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseAutocomplete },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseAutocomplete
+      v-model="value"
+      v-bind="args"
+      :options="[]"
+    >
+      <template #empty>
+        <div class="text-center p-6 py-10 flex items-center justify-center">🤓🤓🤓</div>
+      </template>
+    </BaseAutocomplete>
+  `,
+  };
+};