sprintify-ui 0.0.0

package/src/components/BaseNavbarItemContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <div :class="classes">
+    <div class="flex grow items-center">
+      <Icon v-if="icon" :icon="icon" :class="iconClasses" />
+      {{ label }}
+    </div>
+    <div v-if="count" class="relative -top-px ml-[5px]">
+      <BaseCounter :count="count" :max-digit="2" :color="'primary'" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const buttonClasses =
+  'px-3 py-2 text-left rounded-md md:text-sm flex text-base font-normal w-full';
+const buttonInactiveClasses =
+  'hover:bg-slate-700 hover:text-white text-slate-300';
+const buttonActiveClasses = 'bg-slate-900 text-white';
+
+const props = defineProps({
+  label: {
+    default: undefined,
+    type: String,
+  },
+  icon: {
+    default: undefined,
+    type: String,
+  },
+  active: {
+    default: false,
+    type: Boolean,
+  },
+  count: {
+    default: undefined,
+    type: Number,
+  },
+});
+
+const classes = computed(() => {
+  return [
+    buttonClasses,
+    props.active ? buttonActiveClasses : buttonInactiveClasses,
+  ];
+});
+
+const iconClasses = computed((): string => {
+  let baseClasses = ' w-5 h-5 shrink-0 mr-2 leading-none inline-block';
+
+  if (props.active) {
+    baseClasses += ' text-white';
+  } else {
+    baseClasses += ' text-slate-300';
+  }
+
+  return baseClasses;
+});
+</script>

package/src/components/BasePagination.vue

@@ -0,0 +1,82 @@
+<template>
+  <nav
+    v-if="lastPage > 1 || lastPage < modelValue"
+    class="flex items-center justify-between border-t border-slate-200 px-4 sm:px-0"
+  >
+    <div class="-mt-px flex w-0 flex-1">
+      <button
+        type="button"
+        :disabled="modelValue == 1"
+        class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
+        @click="previous()"
+      >
+        <Icon
+          class="mr-3 h-5 w-5 text-slate-400"
+          icon="heroicons-solid:arrow-narrow-left"
+        />
+        {{ $t('sui.previous') }}
+      </button>
+    </div>
+    <div class="hidden md:-mt-px md:flex">
+      <button
+        v-for="i in lastPage"
+        :key="i"
+        type="button"
+        class="inline-flex items-center border-t-2 px-4 py-4 text-sm font-medium hover:border-slate-300 hover:text-slate-700"
+        :class="
+          i == modelValue
+            ? 'border-primary-500 text-primary-600'
+            : 'border-transparent text-slate-500 hover:border-slate-300 hover:text-slate-700'
+        "
+        @click="$emit('model-value:update', i)"
+      >
+        {{ i }}
+      </button>
+    </div>
+    <div class="-mt-px flex w-0 flex-1 justify-end">
+      <button
+        :disabled="modelValue >= lastPage"
+        class="inline-flex items-center border-t-2 border-transparent px-1 py-4 text-sm font-medium text-slate-500 hover:enabled:border-slate-300 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:opacity-60"
+        @click="next()"
+      >
+        {{ $t('sui.next') }}
+        <Icon
+          class="ml-3 h-5 w-5 text-slate-400"
+          icon="heroicons-solid:arrow-narrow-right"
+        />
+      </button>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: true,
+      type: Number,
+    },
+    lastPage: {
+      required: true,
+      type: Number,
+    },
+  },
+  emits: ['model-value:update'],
+  methods: {
+    next() {
+      if (this.modelValue >= this.lastPage) {
+        return;
+      }
+      this.$emit('model-value:update', this.modelValue + 1);
+    },
+    previous() {
+      if (this.modelValue == 1) {
+        return;
+      }
+      this.$emit('model-value:update', this.modelValue - 1);
+    },
+  },
+});
+</script>

package/src/components/BasePaginationSimple.vue

@@ -0,0 +1,60 @@
+<template>
+  <nav
+    v-if="lastPage > 1 || lastPage < modelValue"
+    class="flex items-center space-x-1 sm:px-0"
+  >
+    <button
+      type="button"
+      :disabled="modelValue == 1"
+      class="flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 text-sm font-medium text-slate-400 outline-none hover:enabled:border-slate-400 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:border-transparent disabled:opacity-60"
+      @click="previous()"
+    >
+      <Icon
+        class="h-5 w-5 text-slate-400"
+        icon="heroicons-solid:chevron-left"
+      />
+    </button>
+    <button
+      :disabled="modelValue >= lastPage"
+      class="flex h-8 w-8 items-center justify-center rounded-md border border-slate-300 text-sm font-medium text-slate-400 outline-none hover:enabled:border-slate-400 hover:enabled:text-slate-700 disabled:cursor-not-allowed disabled:border-transparent disabled:opacity-60"
+      @click="next()"
+    >
+      <Icon
+        class="h-5 w-5 text-slate-400"
+        icon="heroicons-solid:chevron-right"
+      />
+    </button>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      required: true,
+      type: Number,
+    },
+    lastPage: {
+      required: true,
+      type: Number,
+    },
+  },
+  emits: ['model-value:update'],
+  methods: {
+    next() {
+      if (this.modelValue >= this.lastPage) {
+        return;
+      }
+      this.$emit('model-value:update', this.modelValue + 1);
+    },
+    previous() {
+      if (this.modelValue == 1) {
+        return;
+      }
+      this.$emit('model-value:update', this.modelValue - 1);
+    },
+  },
+});
+</script>

package/src/components/BasePanel.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="pb-8 md:grid md:grid-cols-3 md:gap-8"
+    :class="[bordered ? 'mb-8 border-b border-slate-300' : '']"
+  >
+    <div class="px-4 md:col-span-1 md:px-0">
+      <h3 class="text-lg font-medium leading-tight text-slate-900">
+        {{ title }}
+      </h3>
+      <p v-if="description" class="mt-2 text-sm leading-tight text-slate-500">
+        {{ description }}
+      </p>
+    </div>
+    <div class="mt-5 md:col-span-2 md:mt-0">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    title: {
+      required: true,
+      type: String,
+    },
+    description: {
+      default: null,
+      type: String,
+    },
+    bordered: {
+      default: false,
+      type: Boolean,
+    },
+  },
+});
+</script>

package/src/components/BasePassword.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="flex border bg-white">
+    <input
+      ref="input"
+      :value="modelValue"
+      :type="showPassword ? 'text' : 'password'"
+      :name="name"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :required="required"
+      class="grow rounded-l border-none focus:ring-2 focus:ring-primary-500"
+      :class="inputClass"
+      @input="onInput"
+    />
+    <div class="flex shrink-0 pl-3">
+      <button
+        tabindex="-1"
+        type="button"
+        class="pr-3 text-slate-500"
+        @click="showPassword = !showPassword"
+      >
+        <Icon v-if="!showPassword" icon="heroicons:eye-off" class="h-5 w-5" />
+        <Icon v-else icon="heroicons:eye" class="h-5 w-5" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { trim } from 'lodash';
+import { defineComponent, PropType } from 'vue';
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      default: '',
+      type: [String, null] as PropType<string | null>,
+    },
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    name: {
+      default: undefined,
+      type: String,
+    },
+    placeholder: {
+      default: undefined,
+      type: String,
+    },
+    required: {
+      default: undefined,
+      type: Boolean,
+    },
+    inputClass: {
+      default: '',
+      type: String,
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      showPassword: false,
+    };
+  },
+  methods: {
+    onInput(event: any) {
+      const value = event.target.value + '';
+      this.$emit('update:modelValue', trim(value));
+    },
+  },
+});
+</script>

package/src/components/BaseProcessRing.vue

@@ -0,0 +1,56 @@
+<template>
+  <svg :height="radius * 2" :width="radius * 2">
+    <circle
+      stroke="currentColor"
+      :stroke-dasharray="`${circumference} ${circumference}`"
+      :style="{ strokeDashoffset: strokeDashoffset }"
+      :stroke-width="stroke"
+      fill="transparent"
+      :r="normalizedRadius"
+      :cx="radius"
+      :cy="radius"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    radius: {
+      default: 10,
+      type: Number,
+    },
+    stroke: {
+      default: 1,
+      type: Number,
+    },
+    progress: {
+      default: 0.5,
+      type: Number,
+    },
+  },
+  computed: {
+    normalizedRadius(): number {
+      return this.radius - this.stroke * 2;
+    },
+    circumference(): number {
+      return this.normalizedRadius * 2 * Math.PI;
+    },
+    strokeDashoffset(): number {
+      const offset =
+        this.circumference - Math.min(1, this.progress) * this.circumference;
+      return offset;
+    },
+  },
+});
+</script>
+
+<style scoped>
+circle {
+  transition: stroke-dashoffset 0.35s;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+}
+</style>

package/src/components/BaseReadMore.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <p
+      ref="content"
+      class="overflow-hidden whitespace-pre-line"
+      :style="showMore ? undefined : lineClampStyle"
+    >
+      <slot />
+    </p>
+    <button
+      v-if="!showMore && isClamped"
+      type="button"
+      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>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMutationObserver } from '@vueuse/core';
+import { Ref, StyleValue } from 'vue';
+
+const content = ref(null) as Ref<null | HTMLParagraphElement>;
+
+const props = defineProps({
+  maxLines: {
+    default: 3,
+    type: Number,
+  },
+});
+
+const showMore = ref(false);
+const isClamped = ref(false);
+
+const lineClampStyle = computed((): StyleValue | undefined => {
+  return {
+    display: '-webkit-box',
+    '-webkit-line-clamp': props.maxLines,
+    '-webkit-box-orient': 'vertical',
+  };
+});
+
+onMounted(() => {
+  init();
+
+  useMutationObserver(
+    content.value,
+    () => {
+      showMore.value = false;
+      nextTick(() => {
+        init();
+      });
+    },
+    {
+      childList: true,
+      subtree: true,
+    }
+  );
+});
+
+function init() {
+  const el = content.value;
+
+  if (!el) {
+    return;
+  }
+
+  isClamped.value = el.scrollHeight > el.clientHeight;
+}
+</script>

package/src/components/BaseSelect.vue

@@ -0,0 +1,59 @@
+<template>
+  <select
+    :value="modelValue"
+    :name="name"
+    :disabled="disabled"
+    :required="required"
+    class="rounded"
+    @change="onChange($event)"
+  >
+    <option v-if="required" selected disabled hidden value="">
+      {{ placeholder ? placeholder : $t('sui.select_an_option') }}
+    </option>
+    <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,
+    },
+  },
+  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);
+    },
+  },
+});
+</script>

package/src/components/BaseSideNavigation.vue

@@ -0,0 +1,7 @@
+<template>
+  <nav class="space-y-1" aria-label="Sidebar">
+    <slot />
+  </nav>
+</template>
+
+<script setup lang="ts"></script>

package/src/components/BaseSideNavigationItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <router-link v-slot="{ href, navigate, isActive }" :to="to" custom>
+    <a
+      :href="disabled ? undefined : href"
+      :disabled="disabled"
+      class="flex items-center rounded-md px-3 py-2 text-sm font-medium"
+      :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',
+        disabled ? 'cursor-not-allowed opacity-60' : '',
+      ]"
+      @click.prevent="onClick(navigate)"
+    >
+      <slot />
+    </a>
+  </router-link>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+
+const props = defineProps({
+  to: {
+    required: true,
+    type: [Object, String] as PropType<RouteLocationRaw>,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+});
+
+const onClick = (navigate: () => void) => {
+  if (props.disabled) {
+    return;
+  }
+
+  navigate();
+};
+</script>

package/src/components/BaseSkeleton.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="relative isolate overflow-hidden rounded" :class="[background]">
+    <div
+      class="absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] border-t border-white/80 bg-gradient-to-r from-transparent via-white/80 to-transparent"
+      :style="{
+        animationDelay: delay,
+      }"
+    ></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  delay: {
+    default: '0s',
+    type: String,
+  },
+  background: {
+    default: 'bg-slate-200',
+    type: String,
+  },
+});
+</script>

package/src/components/BaseSpinner.vue

@@ -0,0 +1,47 @@
+<template>
+  <svg
+    class="spinner h-20 w-20"
+    viewBox="0 0 66 66"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      class="path"
+      fill="transparent"
+      stroke-width="2"
+      cx="33"
+      cy="33"
+      r="30"
+      stroke="url(#gradient)"
+    />
+    <linearGradient id="gradient">
+      <stop offset="50%" stop-color="#2563eb" stop-opacity="1" />
+      <stop offset="65%" stop-color="#2563eb" stop-opacity=".5" />
+      <stop offset="100%" stop-color="#2563eb" stop-opacity="0" />
+    </linearGradient>
+  </svg>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({});
+</script>
+
+<style scoped>
+.spinner {
+  animation: rotate 1s linear infinite;
+  -webkit-animation: rotate 1s linear infinite;
+  -moz-animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.path {
+  stroke-dasharray: 170;
+  stroke-dashoffset: 20;
+}
+</style>