sprintify-ui 0.0.0

package/src/components/BaseAvatar.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="flex items-center">
+    <img
+      :src="user.avatar_url"
+      :class="[sizeClass, detailsPosition == 'left' ? 'order-2' : 'order-1']"
+      class="shrink-0 overflow-hidden rounded-full"
+    />
+    <div
+      v-if="showDetails"
+      class="max-w-[120px] grow leading-tight"
+      :class="[
+        textSizeClass,
+        detailsPosition == 'left'
+          ? 'order-1 mr-3 text-right'
+          : 'order-2 ml-3 text-left',
+      ]"
+    >
+      <div class="truncate">
+        {{ user.full_name }}
+      </div>
+      <div class="truncate opacity-50">
+        {{ user.email }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { User } from '@/types/User';
+
+const props = defineProps({
+  user: {
+    required: true,
+    type: Object as PropType<User>,
+  },
+  size: {
+    default: 'base',
+    type: String,
+  },
+  showDetails: {
+    default: false,
+    type: Boolean,
+  },
+  detailsPosition: {
+    default: 'right',
+    type: String as PropType<'left' | 'right'>,
+  },
+});
+
+const sizeClass = computed((): string => {
+  const base = 'h-9 w-9';
+
+  if (props.size == 'xs') {
+    return 'h-6 w-6';
+  }
+  if (props.size == 'sm') {
+    return 'h-8 w-8';
+  }
+  if (props.size == 'base') {
+    return base;
+  }
+  if (props.size == 'lg') {
+    return 'h-12 w-12';
+  }
+  if (props.size == 'xl') {
+    return 'h-14 w-14';
+  }
+  return base;
+});
+
+const textSizeClass = computed((): string => {
+  const base = 'text-sm';
+
+  if (props.size == 'xs') {
+    return 'text-xs';
+  }
+  if (props.size == 'sm') {
+    return 'text-xs';
+  }
+  if (props.size == 'base') {
+    return base;
+  }
+  if (props.size == 'lg') {
+    return 'text-sm';
+  }
+  if (props.size == 'xl') {
+    return 'text-base';
+  }
+  return base;
+});
+</script>

package/src/components/BaseBadge.stories.js

@@ -0,0 +1,61 @@
+import BaseBadge from './BaseBadge.vue';
+
+const colors = [
+  'gray',
+  'red',
+  'yellow',
+  'green',
+  'blue',
+  'indigo',
+  'purple',
+  'pink',
+];
+
+const sizes = ['base', 'lg'];
+
+export default {
+  title: 'Components/BaseBadge',
+  component: BaseBadge,
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: colors,
+    },
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBadge v-bind="args">
+      Administrator
+    </BaseBadge>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const AllBadges = (args) => ({
+  components: { BaseBadge },
+  setup() {
+    return { args, colors, sizes };
+  },
+  template: `
+    <BaseBadge v-for="color in colors" :key="color" :color="color">
+      Administrator
+    </BaseBadge>
+    <br>
+    <br>
+    <BaseBadge v-for="size in sizes" :key="size" :size="size">
+      Administrator
+    </BaseBadge>
+  `,
+});

package/src/components/BaseBadge.vue

@@ -0,0 +1,70 @@
+<template>
+  <span
+    class="inline-flex items-center rounded-full font-medium"
+    :class="[colorClasses, sizeClasses]"
+  >
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  color: {
+    default: 'gray',
+    type: String as PropType<
+      | 'gray'
+      | 'red'
+      | 'yellow'
+      | 'green'
+      | 'blue'
+      | 'indigo'
+      | 'purple'
+      | 'pink'
+    >,
+  },
+  size: {
+    default: 'base',
+    type: String as PropType<'base' | 'lg'>,
+  },
+});
+
+const colorClasses = computed(() => {
+  if (props.color == 'gray') {
+    return 'bg-slate-100 text-slate-800';
+  }
+  if (props.color == 'red') {
+    return 'bg-red-100 text-red-900';
+  }
+  if (props.color == 'yellow') {
+    return 'bg-yellow-100 text-yellow-900';
+  }
+  if (props.color == 'green') {
+    return 'bg-green-100 text-green-900';
+  }
+  if (props.color == 'blue') {
+    return 'bg-blue-100 text-blue-900';
+  }
+  if (props.color == 'indigo') {
+    return 'bg-indigo-100 text-indigo-900';
+  }
+  if (props.color == 'purple') {
+    return 'bg-purple-100 text-purple-900';
+  }
+  if (props.color == 'pink') {
+    return 'bg-pink-100 text-pink-900';
+  }
+  return 'bg-slate-100 text-slate-900';
+});
+
+const sizeClasses = computed(() => {
+  if (props.size == 'base') {
+    return 'px-2.5 py-0.5 text-xs';
+  }
+  if (props.size == 'lg') {
+    return 'px-3 py-0.5 text-sm';
+  }
+  return 'px-2.5 py-0.5 text-xs';
+});
+</script>

package/src/components/BaseBelongsTo.stories.js

@@ -0,0 +1,130 @@
+import BaseBelongsTo from './BaseBelongsTo.vue';
+
+export default {
+  title: 'Form/BaseBelongsTo',
+  component: BaseBelongsTo,
+  argTypes: {},
+  args: {
+    url: 'https://effettandem.com/api/content/articles',
+    field: 'title',
+    inputClass: 'w-full border-slate-300',
+  },
+  decorators: [() => ({ template: '<div class="mb-36"><story/></div>' })],
+};
+
+const Template = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+      <BaseBelongsTo
+        v-model="value"
+        v-bind="args"
+      ></BaseBelongsTo>
+      <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 CreateNew = Template.bind({});
+CreateNew.args = {
+  createNewUrl: '/users/create',
+};
+
+export const Disabled = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      return { args };
+    },
+    template: `<BaseBelongsTo
+      v-bind="args"
+      :current-model="{title: 'Dark Vader', id: 1}"
+      :disabled="true"
+    ></BaseBelongsTo>`,
+  };
+};
+
+export const SlotOption = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+  <div class="mb-20">
+    <BaseBelongsTo
+      v-model="value"
+      v-bind="args"
+    >
+      <template #option="{ option, active, selected }">
+        <div
+          class="rounded px-2 py-1"
+          :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,
+          }"
+        >
+          <p class="text-sm font-medium">{{ option.title }}</p>
+          <p class="opacity-60 text-xs">{{ option.owner?.name }}</p>
+        </div>
+      </template>
+    </BaseBelongsTo>
+  </div>
+  `,
+  };
+};
+
+export const SlotFooter = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseBelongsTo
+      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>
+    </BaseBelongsTo>
+  `,
+  };
+};
+
+export const SlotEmpty = (args) => {
+  return {
+    components: { BaseBelongsTo },
+    setup() {
+      const value = ref(null);
+      return { args, value };
+    },
+    template: `
+    <BaseBelongsTo
+      v-model="value"
+      v-bind="args"
+    >
+      <template #empty="props">
+        <div>
+          <div v-if="props.firstSearch" class="text-center py-10 p-6">🤓🤓🤓</div>
+          <div v-else class="text-center px-6 py-20">Start your search... 🔎</div>
+        </div>
+      </template>
+    </BaseBelongsTo>
+  `,
+  };
+};

package/src/components/BaseBelongsTo.vue

@@ -0,0 +1,122 @@
+<template>
+  <BaseAutocompleteFetch
+    :model-value="model"
+    :url="url"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :required="required"
+    :value-key="foreignKey"
+    :label-key="field"
+    :create-new-url="createNewUrl"
+    :input-class="inputClass"
+    @update:model-value="onUpdate"
+  >
+    <template #option="optionProps">
+      <slot name="option" v-bind="optionProps"></slot>
+    </template>
+    <template #empty="emptyProps">
+      <slot name="empty" v-bind="emptyProps"></slot>
+    </template>
+    <template #footer="footerProps">
+      <slot name="footer" v-bind="footerProps"></slot>
+    </template>
+  </BaseAutocompleteFetch>
+</template>
+
+<script lang="ts" setup>
+import { Selection } from '@/types/types';
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import { AxiosResponse } from 'axios';
+import { config } from 'src';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, Number, null, undefined] as PropType<
+      string | number | null | undefined
+    >,
+  },
+  url: {
+    required: true,
+    type: String,
+  },
+  showRouteUrl: {
+    default: undefined,
+    type: Function as PropType<((id: string | number) => string) | undefined>,
+  },
+  foreignKey: {
+    default: 'id',
+    type: String,
+  },
+  field: {
+    required: true,
+    type: String,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  placeholder: {
+    default: '',
+    type: String,
+  },
+  inputClass: {
+    default: '',
+    type: String,
+  },
+  currentModel: {
+    default: null,
+    type: [Object, null] as PropType<Selection>,
+  },
+  createNewUrl: {
+    default: '',
+    type: [String, Object] as PropType<RouteLocationRaw>,
+  },
+});
+
+const http = config.http;
+
+const emit = defineEmits(['update:modelValue']);
+
+const model = ref(props.currentModel);
+
+watch(
+  () => props.modelValue,
+  (newValue, oldValue) => {
+    if (newValue == oldValue) {
+      return;
+    }
+
+    if (props.showRouteUrl == null) {
+      return;
+    }
+
+    if (!props.modelValue) {
+      model.value = null;
+      return;
+    }
+
+    http
+      .get(props.showRouteUrl(props.modelValue))
+      .then((response: AxiosResponse) => {
+        model.value = response.data.data;
+      })
+      .catch((e: Error) => e);
+  },
+  { immediate: true }
+);
+function onUpdate(newModel: Selection) {
+  if (!newModel) {
+    model.value = null;
+    emit('update:modelValue', null);
+  } else {
+    model.value = newModel;
+    emit('update:modelValue', newModel[props.foreignKey]);
+  }
+}
+</script>

package/src/components/BaseBoolean.stories.js

@@ -0,0 +1,35 @@
+import BaseBoolean from './BaseBoolean.vue';
+
+export default {
+  title: 'Components/BaseBoolean',
+  component: BaseBoolean,
+  argTypes: {
+    modelValue: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBoolean },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBoolean v-bind="args"></BaseBoolean>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const AllValues = (args) => ({
+  components: { BaseBoolean },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseBoolean :model-value="true"></BaseBoolean>
+    <BaseBoolean :model-value="false"></BaseBoolean>
+  `,
+});

package/src/components/BaseBoolean.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="inline-flex h-5 w-5 items-center justify-center rounded-full"
+    :class="classes"
+  >
+    <div v-if="modelValue">
+      <Icon icon="heroicons-solid:check" />
+    </div>
+    <div v-else>
+      <Icon icon="heroicons-solid:x" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [Boolean, String, Number],
+  },
+});
+
+const classes = computed(() => {
+  if (props.modelValue) {
+    return 'text-white bg-green-500';
+  }
+  return 'text-white bg-red-500';
+});
+</script>

package/src/components/BaseBreadcrumbs.stories.js

@@ -0,0 +1,45 @@
+import BaseBreadcrumbs from './BaseBreadcrumbs.vue';
+
+const breadcrumbs = [
+  {
+    label: 'Home',
+    icon: 'heroicons:home-solid',
+    to: '/',
+  },
+  {
+    label: 'Users',
+    to: '/users',
+  },
+  {
+    label: 'John Doe',
+    to: '/users/1',
+  },
+  {
+    label: 'Settings',
+    to: '/users/1/settings',
+  },
+];
+
+export default {
+  title: 'Layout/BaseBreadcrumbs',
+  component: BaseBreadcrumbs,
+  argTypes: {},
+  args: {
+    breadcrumbs: breadcrumbs,
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseBreadcrumbs },
+  setup() {
+    return { args, breadcrumbs };
+  },
+  template: `
+    <BaseBreadcrumbs v-bind="args"></BaseBreadcrumbs>
+
+    <pre class="mt-4 bg-slate-800 font-light text-xs p-3 rounded text-white">{{ breadcrumbs }}</pre>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseBreadcrumbs.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <nav
+      v-if="breadcrumbs.length > 0"
+      class="hidden sm:flex"
+      aria-label="Breadcrumb"
+    >
+      <ol role="list" class="flex items-center space-x-3">
+        <li v-for="(breadcrumb, index) in breadcrumbs" :key="index">
+          <div class="flex items-center">
+            <Icon
+              v-if="index > 0"
+              icon="heroicons-solid:chevron-right"
+              class="h-5 w-5 flex-shrink-0 text-slate-400"
+              aria-hidden="true"
+            />
+            <router-link
+              v-slot="{ href, navigate, isExactActive }"
+              :to="breadcrumb.to"
+              custom
+            >
+              <a
+                :href="href"
+                class="text-sm text-slate-500"
+                :class="[
+                  { 'ml-3': index > 0 },
+                  isExactActive
+                    ? 'text-blue-600'
+                    : 'text-slate-500 hover:text-slate-700',
+                ]"
+                @click.prevent="navigate()"
+              >
+                <span v-if="breadcrumb.icon">
+                  <Icon :icon="breadcrumb.icon" />
+                </span>
+                <span v-else>
+                  {{ breadcrumb.label }}
+                </span>
+              </a>
+            </router-link>
+          </div>
+        </li>
+      </ol>
+    </nav>
+
+    <router-link
+      v-if="mobileBreadcrumb"
+      :to="mobileBreadcrumb.to"
+      class="block text-slate-500 sm:hidden"
+    >
+      <div class="flex items-center">
+        <Icon icon="heroicons-solid:arrow-left" class="mr-2" />
+        <span>
+          {{ mobileBreadcrumb.label }}
+        </span>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { Breadcrumb } from '@/types/types';
+
+const props = defineProps({
+  breadcrumbs: {
+    required: true,
+    type: Array as PropType<Breadcrumb[]>,
+  },
+});
+
+const mobileBreadcrumb = computed((): Breadcrumb | undefined => {
+  if (props.breadcrumbs.length >= 2) {
+    return props.breadcrumbs[props.breadcrumbs.length - 2];
+  }
+  return undefined;
+});
+</script>