sprintify-ui 0.2.19 → 0.2.22

package/src/components/BaseDateSelect.vue

@@ -1,241 +1,241 @@
-<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,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :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,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :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="dayDisabled"
-          :required="required"
-          data-cy="day"
-          class="w-full rounded capitalize"
-          :class="[
-            {
-              'cursor-not-allowed bg-slate-100 text-slate-500': dayDisabled,
-            },
-            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
-          ]"
-          :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
-      v-if="clearable"
-      type="button"
-      :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      @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';
-import { useField } from '@/composables/field';
-import { t } from '@/i18n';
-import { useI18nStore } from '@/stores/i18n';
-
-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,
-  },
-  name: {
-    default: undefined,
-    type: String,
-  },
-  hasError: {
-    default: false,
-    type: Boolean,
-  },
-  clearable: {
-    default: true,
-    type: Boolean,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const { hasErrorInternal, emitUpdate } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  hasError: computed(() => props.hasError),
-  emit: emit,
-});
-
-const years = range(props.maxYear, props.minYear) as number[];
-const months = Info.months('short', { locale: useI18nStore().locale });
-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, { zone: 'utc' });
-      date.value.year = datetime.year;
-      date.value.month = datetime.month;
-      date.value.day = datetime.day;
-    }
-  },
-  { immediate: true }
-);
-
-function update() {
-  const dateTime = getDateTime();
-
-  if (dateTime) {
-    emitUpdate(dateTime.toISODate());
-  } else {
-    emitUpdate(null);
-  }
-}
-
-function clear() {
-  date.value.day = null;
-  date.value.month = null;
-  date.value.year = null;
-
-  emitUpdate(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'),
-    { zone: 'utc' }
-  );
-}
-
-const dayDisabled = computed(() => {
-  return days.value.length == 0 || props.disabled;
-});
-</script>
+<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,
+            },
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
+          ]"
+          :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,
+            },
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
+          ]"
+          :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="dayDisabled"
+          :required="required"
+          data-cy="day"
+          class="w-full rounded capitalize"
+          :class="[
+            {
+              'cursor-not-allowed bg-slate-100 text-slate-500': dayDisabled,
+            },
+            [hasErrorInternal ? 'border-red-500' : 'border-slate-300'],
+          ]"
+          :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
+      v-if="clearable"
+      type="button"
+      :disabled="disabled"
+      class="mt-1 appearance-none border-transparent bg-transparent text-sm text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      @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';
+import { useField } from '@/composables/field';
+import { t } from '@/i18n';
+import { useI18nStore } from '@/stores/i18n';
+
+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,
+  },
+  name: {
+    default: undefined,
+    type: String,
+  },
+  hasError: {
+    default: false,
+    type: Boolean,
+  },
+  clearable: {
+    default: true,
+    type: Boolean,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const { hasErrorInternal, emitUpdate } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  hasError: computed(() => props.hasError),
+  emit: emit,
+});
+
+const years = range(props.maxYear, props.minYear) as number[];
+const months = Info.months('short', { locale: useI18nStore().locale });
+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, { zone: 'utc' });
+      date.value.year = datetime.year;
+      date.value.month = datetime.month;
+      date.value.day = datetime.day;
+    }
+  },
+  { immediate: true }
+);
+
+function update() {
+  const dateTime = getDateTime();
+
+  if (dateTime) {
+    emitUpdate(dateTime.toISODate());
+  } else {
+    emitUpdate(null);
+  }
+}
+
+function clear() {
+  date.value.day = null;
+  date.value.month = null;
+  date.value.year = null;
+
+  emitUpdate(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'),
+    { zone: 'utc' }
+  );
+}
+
+const dayDisabled = computed(() => {
+  return days.value.length == 0 || props.disabled;
+});
+</script>

package/src/components/BaseDescriptionList.stories.js

@@ -1,35 +1,35 @@
-import BaseBadge from './BaseBadge.vue';
-import BaseDescriptionList from './BaseDescriptionList.vue';
-import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
-
-export default {
-  title: 'Components/BaseDescriptionList',
-  component: BaseDescriptionList,
-  argTypes: {},
-};
-
-const Template = (args) => ({
-  components: { BaseDescriptionList, BaseDescriptionListItem, BaseBadge },
-  setup() {
-    return { args };
-  },
-  template: `
-    <BaseDescriptionList v-bind="args">
-      <BaseDescriptionListItem>
-        <template #left>Full name</template>
-        <template #right>Full name</template>
-      </BaseDescriptionListItem>
-      <BaseDescriptionListItem>
-        <template #left>Age</template>
-        <template #right>66 years old</template>
-      </BaseDescriptionListItem>
-      <BaseDescriptionListItem>
-        <template #left>Role</template>
-        <template #right><BaseBadge color="indigo">admin</BaseBadge></template>
-      </BaseDescriptionListItem>
-    </BaseDescriptionList>
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
+import BaseBadge from './BaseBadge.vue';
+import BaseDescriptionList from './BaseDescriptionList.vue';
+import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
+
+export default {
+  title: 'Data/BaseDescriptionList',
+  component: BaseDescriptionList,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: { BaseDescriptionList, BaseDescriptionListItem, BaseBadge },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BaseDescriptionList v-bind="args">
+      <BaseDescriptionListItem>
+        <template #left>Full name</template>
+        <template #right>Full name</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Age</template>
+        <template #right>66 years old</template>
+      </BaseDescriptionListItem>
+      <BaseDescriptionListItem>
+        <template #left>Role</template>
+        <template #right><BaseBadge color="indigo">admin</BaseBadge></template>
+      </BaseDescriptionListItem>
+    </BaseDescriptionList>
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};

package/src/components/BaseDescriptionList.vue

@@ -1,13 +1,13 @@
-<template>
-  <BaseCard>
-    <div class="">
-      <dl class="divide-y divide-slate-200">
-        <slot />
-      </dl>
-    </div>
-  </BaseCard>
-</template>
-
-<script lang="ts" setup>
-import BaseCard from './BaseCard.vue';
-</script>
+<template>
+  <BaseCard>
+    <div class="">
+      <dl class="divide-y divide-slate-200">
+        <slot />
+      </dl>
+    </div>
+  </BaseCard>
+</template>
+
+<script lang="ts" setup>
+import BaseCard from './BaseCard.vue';
+</script>

package/src/components/BaseDescriptionListItem.vue

@@ -1,47 +1,47 @@
-<template>
-  <div
-    ref="item"
-    :class="{
-      'px-4 py-4': mobile,
-      'grid grid-cols-3 gap-4 py-5 px-6': !mobile,
-    }"
-  >
-    <dt class="text-sm font-medium leading-tight text-slate-500">
-      <slot name="left" />
-    </dt>
-    <dd
-      class="text-sm leading-tight text-slate-900"
-      :class="{
-        'mt-1.5': mobile,
-        'col-span-2': !mobile,
-      }"
-    >
-      <slot name="right" />
-    </dd>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { useResizeObserver } from '@vueuse/core';
-import { debounce } from 'lodash';
-import breakpoints from '../../config/breakpoints.json';
-
-const DEFAULT_WIDTH = 800;
-
-const item = ref<HTMLElement | null>(null);
-const width = ref(DEFAULT_WIDTH);
-
-const mobile = computed(() => {
-  return width.value < breakpoints.sm;
-});
-
-function setWidth() {
-  width.value = item.value?.clientWidth ?? DEFAULT_WIDTH;
-}
-
-onMounted(() => {
-  setWidth();
-});
-
-useResizeObserver(item, debounce(setWidth, 50));
-</script>
+<template>
+  <div
+    ref="item"
+    :class="{
+      'px-4 py-4': mobile,
+      'grid grid-cols-3 gap-4 py-5 px-6': !mobile,
+    }"
+  >
+    <dt class="text-sm font-medium leading-tight text-slate-500">
+      <slot name="left" />
+    </dt>
+    <dd
+      class="text-sm leading-tight text-slate-900"
+      :class="{
+        'mt-1.5': mobile,
+        'col-span-2': !mobile,
+      }"
+    >
+      <slot name="right" />
+    </dd>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useResizeObserver } from '@vueuse/core';
+import { debounce } from 'lodash';
+import breakpoints from '../../config/breakpoints.json';
+
+const DEFAULT_WIDTH = 800;
+
+const item = ref<HTMLElement | null>(null);
+const width = ref(DEFAULT_WIDTH);
+
+const mobile = computed(() => {
+  return width.value < breakpoints.sm;
+});
+
+function setWidth() {
+  width.value = item.value?.clientWidth ?? DEFAULT_WIDTH;
+}
+
+onMounted(() => {
+  setWidth();
+});
+
+useResizeObserver(item, debounce(setWidth, 50));
+</script>