sprintify-ui 0.0.0

package/src/components/BaseDatePicker.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="relative">
+    <div
+      class="pointer-events-none absolute top-0 left-0 flex h-full items-center justify-center pl-2.5"
+    >
+      <Icon
+        class="relative -top-px h-5 w-5 text-slate-400"
+        icon="heroicons:calendar"
+      />
+    </div>
+    <input
+      ref="datepicker"
+      :value="modelValue"
+      type="text"
+      readonly
+      :disabled="disabled"
+      class="w-full rounded pl-10 pr-16 disabled:cursor-not-allowed disabled:text-gray-300"
+      :class="inputClass"
+      :placeholder="$t('sui.click_or_select_date')"
+    />
+    <div
+      v-if="modelValue && !disabled"
+      class="absolute top-0 right-0 flex h-full items-center justify-center p-1"
+    >
+      <button
+        type="button"
+        class="flex h-8 items-center rounded p-1 hover:bg-slate-200"
+        @click="clear()"
+      >
+        <Icon class="h-5 w-5 text-slate-600" icon="heroicons:x-mark" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, Ref } from 'vue';
+import Pikaday from 'pikaday';
+import { capitalize, padStart } from 'lodash';
+import { DateTime, Info } from 'luxon';
+import { config } from 'src';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  inputClass: {
+    default: '',
+    type: String,
+  },
+  minDate: {
+    default: undefined,
+    type: Date,
+  },
+  maxDate: {
+    default: undefined,
+    type: Date,
+  },
+  yearRange: {
+    default: undefined,
+    type: [Number, Array] as PropType<number | [number, number]>,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const i18n = useI18n();
+
+const datepicker = ref(null) as Ref<HTMLInputElement | null>;
+
+const months = Info.months('long', { locale: config.i18n.global.locale }).map(
+  (m) => capitalize(m)
+);
+const weekdays = arrayRotate(
+  Info.weekdays('long', { locale: config.i18n.global.locale }).map((m) =>
+    capitalize(m)
+  ),
+  true
+);
+const weekdaysShort = arrayRotate(
+  Info.weekdays('short', { locale: config.i18n.global.locale }).map((m) =>
+    capitalize(m)
+  ),
+  true
+);
+
+let picker = null as Pikaday | null;
+
+onMounted(() => {
+  if (!datepicker.value) {
+    return;
+  }
+
+  picker = new Pikaday({
+    theme: 'pikaday-white',
+    field: datepicker.value,
+    yearRange: props.yearRange,
+    i18n: {
+      previousMonth: i18n.t('sui.previous_month'),
+      nextMonth: i18n.t('sui.next_month'),
+      months: months,
+      weekdays: weekdays,
+      weekdaysShort: weekdaysShort,
+    },
+    toString(date) {
+      const day = padStart(date.getDate() + '', 2, '0');
+      const month = padStart(date.getMonth() + 1 + '', 2, '0');
+      const year = padStart(date.getFullYear() + '', 4, '0');
+
+      return `${year}-${month}-${day}`;
+    },
+    parse(dateString) {
+      const datetime = DateTime.fromISO(dateString);
+      const year = datetime.year;
+      const month = datetime.month - 1;
+      const day = datetime.day;
+
+      return new Date(year, month, day);
+    },
+    minDate: props.minDate,
+    maxDate: props.maxDate,
+    onSelect(date) {
+      if (!date) {
+        clear();
+        return;
+      }
+
+      const datetime = DateTime.fromJSDate(date);
+
+      if (!datetime) {
+        clear();
+        return;
+      }
+
+      emit('update:modelValue', datetime.toISODate());
+    },
+  });
+});
+
+onBeforeUnmount(() => {
+  if (picker) {
+    picker.destroy();
+  }
+});
+
+function clear() {
+  picker?.clear();
+  emit('update:modelValue', null);
+}
+
+// https://stackoverflow.com/a/23368052
+function arrayRotate(arr: any[], reverse = false): any[] {
+  if (reverse) arr.unshift(arr.pop());
+  else arr.push(arr.shift());
+  return arr;
+}
+</script>

package/src/components/BaseDateSelect.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div class="-m-0.5 flex">
+      <div class="w-auto p-0.5">
+        <select
+          v-model="date.year"
+          :disabled="disabled"
+          :required="required"
+          data-cy="year"
+          class="w-full rounded"
+          :class="[
+            {
+              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
+            },
+            inputClass,
+          ]"
+          :placeholder="$t('sui.year')"
+          @change="update()"
+        >
+          <option disabled selected hidden :value="null">
+            {{ $t('sui.year') }}
+          </option>
+          <option v-for="year in years" :key="year" :value="year">
+            {{ year }}
+          </option>
+        </select>
+      </div>
+
+      <div class="w-auto p-0.5">
+        <select
+          v-model="date.month"
+          :disabled="disabled"
+          :required="required"
+          data-cy="month"
+          class="w-full rounded capitalize"
+          :class="[
+            {
+              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
+            },
+            inputClass,
+          ]"
+          :placeholder="$t('sui.month')"
+          @change="update()"
+        >
+          <option disabled selected hidden :value="null">
+            {{ $t('sui.month') }}
+          </option>
+          <option v-for="(month, i) in months" :key="month" :value="i + 1">
+            {{ month }}
+          </option>
+        </select>
+      </div>
+
+      <div class="w-auto p-0.5">
+        <select
+          v-model="date.day"
+          :disabled="disabled"
+          :required="required"
+          data-cy="day"
+          class="w-full rounded capitalize"
+          :class="[
+            {
+              'cursor-not-allowed bg-slate-100 text-slate-500': disabled,
+            },
+            inputClass,
+          ]"
+          :placeholder="$t('sui.day')"
+          @change="update()"
+        >
+          <option disabled selected hidden :value="null">
+            {{ $t('sui.day') }}
+          </option>
+          <option v-for="day in days" :key="day" :value="day">
+            {{ day }}
+          </option>
+        </select>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      :disabled="disabled"
+      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none"
+      @click="clear()"
+    >
+      <span>{{ $t('sui.clear') }}</span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+import { range, padStart } from 'lodash';
+import { DateTime, Info } from 'luxon';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, null] as PropType<string | null>,
+  },
+  required: {
+    default: false,
+    type: Boolean,
+  },
+  disabled: {
+    default: false,
+    type: Boolean,
+  },
+  minYear: {
+    default: DateTime.now().year - 90,
+    type: Number,
+  },
+  maxYear: {
+    default: DateTime.now().year,
+    type: Number,
+  },
+  inputClass: {
+    default: '',
+    type: String,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const i18n = useI18n();
+
+const years = range(props.maxYear, props.minYear) as number[];
+const months = Info.months('short', { locale: i18n.locale.value });
+const days = computed(() => {
+  if (!date.value.year) {
+    return [];
+  }
+
+  if (!date.value.month) {
+    return [];
+  }
+
+  const d = new Date(date.value.year, date.value.month, 0);
+  return range(1, d.getDate() + 1);
+});
+
+const date = ref({
+  year: null as number | null,
+  month: null as number | null,
+  day: null as number | null,
+});
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (props.modelValue) {
+      const datetime = DateTime.fromISO(props.modelValue);
+      date.value.year = datetime.year;
+      date.value.month = datetime.month;
+      date.value.day = datetime.day;
+    }
+  },
+  { immediate: true }
+);
+
+function update() {
+  const dateTime = getDateTime();
+
+  if (dateTime) {
+    emit('update:modelValue', dateTime.toISODate());
+  } else {
+    emit('update:modelValue', null);
+  }
+}
+
+function clear() {
+  date.value.day = null;
+  date.value.month = null;
+  date.value.year = null;
+
+  emit('update:modelValue', null);
+}
+
+function getDateTime(): DateTime | null {
+  if (!date.value.year || !date.value.month || !date.value.day) {
+    return null;
+  }
+
+  return DateTime.fromISO(
+    padStart(date.value.year + '', 4, '0') +
+      '-' +
+      padStart(date.value.month + '', 2, '0') +
+      '-' +
+      padStart(date.value.day + '', 2, '0')
+  );
+}
+</script>

package/src/components/BaseDescriptionList.vue

@@ -0,0 +1,11 @@
+<template>
+  <BaseCard>
+    <div class="">
+      <dl class="divide-y divide-slate-200">
+        <slot />
+      </dl>
+    </div>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup></script>

package/src/components/BaseDescriptionListItem.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="px-4 py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
+    <dt class="text-sm font-medium text-slate-500">
+      <slot name="left" />
+    </dt>
+    <dd class="mt-1 text-sm text-slate-900 sm:col-span-2 sm:mt-0">
+      <slot name="right" />
+    </dd>
+  </div>
+</template>
+
+<script lang="ts" setup></script>

package/src/components/BaseDialog.vue

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+  >
+    <div class="sm:flex sm:items-start">
+      <div
+        class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10"
+        :class="{
+          'bg-primary-100': color == 'info',
+          'bg-red-100': color == 'danger',
+          'bg-yellow-100': color == 'warning',
+          'bg-green-100': color == 'success',
+        }"
+      >
+        <Icon
+          v-if="color == 'danger'"
+          class="h-6 w-6 text-red-600"
+          icon="heroicons:exclaimation-triangle"
+        />
+        <Icon
+          v-else-if="color == 'warning'"
+          class="h-6 w-6 text-yellow-600"
+          icon="heroicons:exclaimation-circle"
+        />
+        <Icon
+          v-else-if="color == 'success'"
+          class="h-6 w-6 text-green-600"
+          icon="heroicons:check-circle"
+        />
+        <Icon
+          v-else
+          class="h-6 w-6 text-primary-600"
+          icon="heroicons:information-circle"
+        />
+      </div>
+      <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+        <slot>
+          <h3
+            id="modal-title"
+            class="text-lg font-medium leading-6 text-slate-900"
+          >
+            {{ title }}
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-slate-500">
+              {{ message }}
+            </p>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+      <button
+        type="button"
+        class="btn mb-2 w-full sm:mb-0 sm:w-auto"
+        :class="{
+          'btn-primary': color == 'info',
+          'btn-danger': color == 'danger',
+          'btn-warning': color == 'warning',
+          'btn-success': color == 'success',
+        }"
+        @click="$emit('confirm')"
+      >
+        {{ confirmText ?? $t('sui.confirm') }}
+      </button>
+      <button
+        type="button"
+        class="btn w-full sm:mr-2 sm:w-auto"
+        @click="$emit('cancel')"
+      >
+        {{ cancelText ?? $t('sui.cancel') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+defineProps({
+  color: {
+    required: true,
+    type: String as PropType<'info' | 'success' | 'danger' | 'warning'>,
+  },
+  title: {
+    default: '',
+    type: String,
+  },
+  message: {
+    default: '',
+    type: String,
+  },
+  confirmText: {
+    default: '',
+    type: String,
+  },
+  cancelText: {
+    default: '',
+    type: String,
+  },
+});
+
+defineEmits(['cancel', 'confirm']);
+</script>

package/src/components/BaseFilePicker.vue

@@ -0,0 +1,101 @@
+<template>
+  <button
+    type="button"
+    :class="buttonClass"
+    :disabled="disabled"
+    @drop.prevent="
+      dragging = false;
+      handleDrop($event);
+    "
+    @dragleave.prevent="dragging = false"
+    @dragover.prevent="dragging = true"
+    @dragenter.prevent="dragging = true"
+    @click="pickFile"
+  >
+    <slot :selecting="selecting" :dragging="dragging" />
+  </button>
+  <input
+    ref="input"
+    type="file"
+    :accept="accept"
+    hidden="true"
+    @change="onInputChange"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    disabled: {
+      default: false,
+      type: Boolean,
+    },
+    buttonClass: {
+      default: '',
+      type: String,
+    },
+    accept: {
+      default: undefined,
+      type: String,
+    },
+  },
+  emits: ['upload'],
+  data() {
+    return {
+      selecting: false,
+      dragging: false,
+    };
+  },
+  computed: {
+    inputElement(): HTMLInputElement | undefined {
+      return this.$refs.input as HTMLInputElement | undefined;
+    },
+  },
+  methods: {
+    async pickFile() {
+      if (this.disabled) {
+        return;
+      }
+
+      (this.$refs.input as HTMLElement | undefined)?.click();
+    },
+    onInputChange() {
+      const files = (this.inputElement?.files ?? []) as File[];
+      this.upload(files);
+    },
+    handleDrop(e: any) {
+      if (this.disabled) {
+        return;
+      }
+
+      const files = e?.dataTransfer?.files ?? [];
+
+      this.upload(files);
+    },
+    async upload(files: File[]) {
+      if (this.disabled) {
+        return;
+      }
+
+      if (!files || files.length == 0 || !(files[0] instanceof File)) {
+        return;
+      }
+
+      this.selecting = true;
+
+      try {
+        const file = files[0];
+
+        this.$emit('upload', file);
+      } finally {
+        if (this.inputElement) {
+          this.inputElement.value = '';
+        }
+        this.selecting = false;
+      }
+    },
+  },
+});
+</script>