sprintify-ui 0.10.63 → 0.10.65

package/src/components/BaseDateSelect.stories.js

@@ -1,68 +1,68 @@
-import BaseDateSelect from "./BaseDateSelect.vue";
-import ShowValue from "@/../.storybook/components/ShowValue.vue";
-import { createFieldStory, sizes } from "../../.storybook/utils";
-
-export default {
-  title: "Form/BaseDateSelect",
-  component: BaseDateSelect,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: sizes,
-    },
-  },
-};
-
-const Template = (args) => ({
-  components: { BaseDateSelect, ShowValue },
-  setup() {
-    const value = ref(null);
-    return { value, args };
-  },
-  template: `
-  <BaseDateSelect v-model="value" v-bind="args">
-  </BaseDateSelect>
-  <ShowValue :value="value" />
-  `,
-});
-
-export const Demo = Template.bind({});
-Demo.args = {};
-
-export const MinYear = Template.bind({});
-MinYear.args = {
-  minYear: 1980,
-};
-
-export const MaxYear = Template.bind({});
-MaxYear.args = {
-  maxYear: 2010,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  modelValue: "2022-11-16",
-  disabled: true,
-};
-
-const TemplateSizes = (args) => ({
-  components: { BaseDateSelect },
-  setup() {
-    const value = ref(null);
-    return { args, value, sizes };
-  },
-  template: `
-  <div v-for="size in sizes" :key="size" class="mb-4">
-    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
-    <BaseDateSelect v-model="value" v-bind="args" :size="size" class="w-full"></BaseDateSelect>
-  </div>
-  `,
-});
-
-export const Sizes = TemplateSizes.bind({});
-
-export const Field = createFieldStory({
-  component: BaseDateSelect,
-  componentName: "BaseDateSelect",
-  label: "Date",
-});
+import BaseDateSelect from "./BaseDateSelect.vue";
+import ShowValue from "@/../.storybook/components/ShowValue.vue";
+import { createFieldStory, sizes } from "../../.storybook/utils";
+
+export default {
+  title: "Form/BaseDateSelect",
+  component: BaseDateSelect,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: sizes,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseDateSelect, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { value, args };
+  },
+  template: `
+  <BaseDateSelect v-model="value" v-bind="args">
+  </BaseDateSelect>
+  <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+Demo.args = {};
+
+export const MinYear = Template.bind({});
+MinYear.args = {
+  minYear: 1980,
+};
+
+export const MaxYear = Template.bind({});
+MaxYear.args = {
+  maxYear: 2010,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  modelValue: "2022-11-16",
+  disabled: true,
+};
+
+const TemplateSizes = (args) => ({
+  components: { BaseDateSelect },
+  setup() {
+    const value = ref(null);
+    return { args, value, sizes };
+  },
+  template: `
+  <div v-for="size in sizes" :key="size" class="mb-4">
+    <p class="text-xs text-slate-600 leading-tight mb-1">{{ size }}</p>
+    <BaseDateSelect v-model="value" v-bind="args" :size="size" class="w-full"></BaseDateSelect>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
+export const Field = createFieldStory({
+  component: BaseDateSelect,
+  componentName: "BaseDateSelect",
+  label: "Date",
+});

package/src/components/BaseDateSelect.vue

@@ -1,222 +1,222 @@
-<template>
-  <div>
-    <div
-      class="flex"
-      :class="[
-        sizeInternal === 'xs' ? 'gap-0.5' : '',
-        sizeInternal === 'sm' ? 'gap-0.5' : '',
-        sizeInternal === 'md' ? 'gap-1' : '',
-        sizeInternal === 'lg' ? 'gap-1' : '',
-        sizeInternal === 'xl' ? 'gap-1' : '',
-      ]"
-    >
-      <BaseSelect
-        v-model="date.year"
-        :disabled="disabled"
-        :required="requiredInternal"
-        data-cy="year"
-        :has-error="hasErrorInternal"
-        :placeholder="t('sui.year')"
-        :size="sizeInternal"
-        @update:model-value="update()"
-      >
-        <option
-          v-for="year in years"
-          :key="year"
-          :value="year"
-        >
-          {{ year }}
-        </option>
-      </BaseSelect>
-
-      <BaseSelect
-        v-model="date.month"
-        :disabled="disabled"
-        :required="requiredInternal"
-        data-cy="month"
-        class="capitalize"
-        :has-error="hasErrorInternal"
-        :placeholder="t('sui.month')"
-        :size="sizeInternal"
-        @update:model-value="update()"
-      >
-        <option
-          v-for="(month, i) in months"
-          :key="month"
-          :value="i + 1"
-        >
-          {{ month }}
-        </option>
-      </BaseSelect>
-
-      <BaseSelect
-        v-model="date.day"
-        :disabled="dayDisabled"
-        :required="requiredInternal"
-        data-cy="day"
-        :has-error="hasErrorInternal"
-        :placeholder="t('sui.day')"
-        :size="sizeInternal"
-        @update:model-value="update()"
-      >
-        <option
-          v-for="day in days"
-          :key="day"
-          :value="day"
-        >
-          {{ day }}
-        </option>
-      </BaseSelect>
-    </div>
-
-    <button
-      v-if="clearable"
-      type="button"
-      :disabled="disabled"
-      class="mt-1 appearance-none border-transparent bg-transparent text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      :class="[
-        sizeInternal === 'xs' ? 'text-xs' : '',
-        sizeInternal === 'sm' ? 'text-xs' : '',
-        sizeInternal === 'md' ? 'text-sm' : '',
-      ]"
-      @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';
-import BaseSelect from './BaseSelect.vue';
-import { Size } from '@/utils/sizes';
-
-const props = defineProps({
-  modelValue: {
-    required: true,
-    type: [String, null] as PropType<string | null>,
-  },
-  required: {
-    default: undefined,
-    type: Boolean,
-  },
-  size: {
-    default: undefined,
-    type: String as PropType<Size>,
-  },
-  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, requiredInternal, sizeInternal } = useField({
-  name: computed(() => props.name),
-  required: computed(() => props.required),
-  size: computed(() => props.size),
-  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;
-    } else {
-      clear();
-    }
-  },
-  { 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="flex"
+      :class="[
+        sizeInternal === 'xs' ? 'gap-0.5' : '',
+        sizeInternal === 'sm' ? 'gap-0.5' : '',
+        sizeInternal === 'md' ? 'gap-1' : '',
+        sizeInternal === 'lg' ? 'gap-1' : '',
+        sizeInternal === 'xl' ? 'gap-1' : '',
+      ]"
+    >
+      <BaseSelect
+        v-model="date.year"
+        :disabled="disabled"
+        :required="requiredInternal"
+        data-cy="year"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.year')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="year in years"
+          :key="year"
+          :value="year"
+        >
+          {{ year }}
+        </option>
+      </BaseSelect>
+
+      <BaseSelect
+        v-model="date.month"
+        :disabled="disabled"
+        :required="requiredInternal"
+        data-cy="month"
+        class="capitalize"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.month')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="(month, i) in months"
+          :key="month"
+          :value="i + 1"
+        >
+          {{ month }}
+        </option>
+      </BaseSelect>
+
+      <BaseSelect
+        v-model="date.day"
+        :disabled="dayDisabled"
+        :required="requiredInternal"
+        data-cy="day"
+        :has-error="hasErrorInternal"
+        :placeholder="t('sui.day')"
+        :size="sizeInternal"
+        @update:model-value="update()"
+      >
+        <option
+          v-for="day in days"
+          :key="day"
+          :value="day"
+        >
+          {{ day }}
+        </option>
+      </BaseSelect>
+    </div>
+
+    <button
+      v-if="clearable"
+      type="button"
+      :disabled="disabled"
+      class="mt-1 appearance-none border-transparent bg-transparent text-slate-700 underline outline-none disabled:cursor-not-allowed disabled:opacity-50"
+      :class="[
+        sizeInternal === 'xs' ? 'text-xs' : '',
+        sizeInternal === 'sm' ? 'text-xs' : '',
+        sizeInternal === 'md' ? 'text-sm' : '',
+      ]"
+      @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';
+import BaseSelect from './BaseSelect.vue';
+import { Size } from '@/utils/sizes';
+
+const props = defineProps({
+  modelValue: {
+    required: true,
+    type: [String, null] as PropType<string | null>,
+  },
+  required: {
+    default: undefined,
+    type: Boolean,
+  },
+  size: {
+    default: undefined,
+    type: String as PropType<Size>,
+  },
+  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, requiredInternal, sizeInternal } = useField({
+  name: computed(() => props.name),
+  required: computed(() => props.required),
+  size: computed(() => props.size),
+  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;
+    } else {
+      clear();
+    }
+  },
+  { 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: "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 = {};
+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>