sprintify-ui 0.6.78 → 0.6.80

package/dist/types/src/components/index.d.ts

@@ -28,6 +28,7 @@ import BaseCropperModal from './BaseCropperModal.vue';
 import BaseDataIterator from './BaseDataIterator.vue';
 import BaseDataTable from './BaseDataTable.vue';
 import BaseDatePicker from './BaseDatePicker.vue';
+import BaseTimePicker from './BaseTimePicker.vue';
 import BaseDateSelect from './BaseDateSelect.vue';
 import BaseDescriptionList from './BaseDescriptionList.vue';
 import BaseDescriptionListItem from './BaseDescriptionListItem.vue';
@@ -100,4 +101,4 @@ import BaseLayoutStacked from './BaseLayoutStacked.vue';
 import BaseLayoutStackedConfigurable from './BaseLayoutStackedConfigurable.vue';
 import BaseLayoutSidebar from './BaseLayoutSidebar.vue';
 import BaseLayoutSidebarConfigurable from './BaseLayoutSidebarConfigurable.vue';
-export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };
+export { BaseActionItem, BaseAddressForm, BaseAlert, BaseApp, BaseAppDialogs, BaseAppNotifications, BaseAutocomplete, BaseAutocompleteFetch, BaseAvatar, BaseAvatarGroup, BaseBadge, BaseBelongsTo, BaseBelongsToFetch, BaseBoolean, BaseBreadcrumbs, BaseButton, BaseButtonGroup, BaseCard, BaseCardRow, BaseCharacterCounter, BaseClipboard, BaseCalendar, BaseColor, BaseContainer, BaseCounter, BaseCropper, BaseCropperModal, BaseDataIterator, BaseDataTable, BaseDatePicker, BaseTimePicker, BaseDateSelect, BaseDescriptionList, BaseDescriptionListItem, BaseDialog, BaseDisplayRelativeTime, BaseDropdown, BaseDropdownAutocomplete, BaseEmptyState, BaseField, BaseFieldI18n, BaseFilePicker, BaseFilePickerCrop, BaseFileUploader, BaseForm, BaseGantt, BaseHasMany, BaseHeader, BaseIcon, BaseIconPicker, BaseInput, BaseInputLabel, BaseInputPercent, BaseLoadingCover, BaseMediaItem, BaseMediaLibrary, BaseMediaPreview, BaseMenu, BaseMenuItem, BaseModalCenter, BaseModalSide, BaseNavbar, BaseNavbarItem, BaseNavbarItemContent, BaseNavbarSideItem, BasePagination, BasePanel, BasePassword, BaseProgressCircle, BaseRadioGroup, BaseReadMore, BaseRichText, BaseSelect, BaseShortcut, BaseSideNavigation, BaseSideNavigationItem, BaseSkeleton, BaseStatistic, BaseStepper, BaseStepperItem, BaseSwitch, BaseSystemAlert, BaseTable, BaseTableBody, BaseTableCell, BaseTableHead, BaseTableHeader, BaseTableRow, BaseTabs, BaseTabItem, BaseTagAutocomplete, BaseTagAutocompleteFetch, BaseTableColumn, BaseTextarea, BaseTextareaAutoresize, BaseTimeline, BaseTimelineItem, BaseTooltip, BaseUniqueCode, BaseLayoutStacked, BaseLayoutStackedConfigurable, BaseLayoutSidebar, BaseLayoutSidebarConfigurable, };

package/dist/types/src/index.d.ts

@@ -15,6 +15,7 @@ declare const messages: {
         month: string;
         save: string;
         sui: {
+            notes: string;
             address: string;
             address_1_placeholder: string;
             address_2_description: string;
@@ -28,6 +29,7 @@ declare const messages: {
             city: string;
             clear: string;
             click_or_select_date: string;
+            click_or_select_time: string;
             click_to_copy: string;
             columns: string;
             confirm: string;
@@ -58,7 +60,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            now: string;
             of: string;
+            ok: string;
             or: string;
             page: string;
             pagination_detail_1: string;
@@ -110,6 +114,7 @@ declare const messages: {
         month: string;
         save: string;
         sui: {
+            notes: string;
             address: string;
             address_1_placeholder: string;
             address_2_description: string;
@@ -123,6 +128,7 @@ declare const messages: {
             city: string;
             clear: string;
             click_or_select_date: string;
+            click_or_select_time: string;
             click_to_copy: string;
             columns: string;
             confirm: string;
@@ -153,7 +159,9 @@ declare const messages: {
             none: string;
             nothing_found: string;
             notifications_empty: string;
+            now: string;
             of: string;
+            ok: string;
             or: string;
             page: string;
             pagination_detail_1: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.6.78",
+  "version": "0.6.80",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/assets/base-time-picker.css

@@ -0,0 +1,10 @@
+.base-time-picker {
+  .overflow-y-auto {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    scroll-behavior: smooth;
+  }
+  .overflow-y-auto:hover {
+    scrollbar-color: #ccc white;
+  }
+}

package/src/assets/main.css

@@ -1,6 +1,7 @@
 @import "./base-calendar.css";
 @import "./base-cropper.css";
 @import "./base-date-picker.css";
+@import "./base-time-picker.css";
 @import "./base-rich-text.css";
 @import "./base-table.css";
 @import "./base-tabs.css";

package/src/components/BaseAddressForm.vue

@@ -103,6 +103,21 @@
         @update:model-value="update('region', $event)"
       />
     </BaseField>
+
+    <BaseField
+      v-if="props.showNotes"
+      :label="t('sui.notes')"
+      :name="`${namePrefix}notes`"
+      :required="isRequired('notes')"
+      class="col-span-2"
+      :size="size"
+    >
+      <BaseTextarea
+        :model-value="normalizedModelValue.notes ?? ''"
+        class="w-full"
+        @update:model-value="update('notes', $event)"
+      />
+    </BaseField>
   </div>
 </template>
 
@@ -114,6 +129,7 @@ import { Region } from '@/types/Region';
 import BaseField from './BaseField.vue';
 import BaseInput from './BaseInput.vue';
 import BaseSelect from './BaseSelect.vue';
+import BaseTextarea from './BaseTextarea.vue';
 import { t } from '@/i18n';
 import { config } from '..';
 import { Size } from '@/utils/sizes';
@@ -128,6 +144,7 @@ type Address = {
   city?: string | null;
   region?: string | null;
   country?: string | null;
+  notes?: string | null;
 };
 
 const props = withDefaults(
@@ -141,6 +158,7 @@ const props = withDefaults(
     size?: Size;
     hideRegion?: boolean;
     hideCountry?: boolean;
+    showNotes?: boolean;
     requiredFields?: (keyof Address)[];
   }>(),
   {
@@ -158,6 +176,7 @@ const props = withDefaults(
     size: undefined,
     hideRegion: false,
     hideCountry: false,
+    showNotes: false,
     requiredFields() {
       return ['address_1', 'city', 'postal_code', 'country', 'region'];
     }
@@ -176,6 +195,7 @@ const normalizedModelValue = computed((): Address => {
   form.postal_code = form.postal_code ?? '';
   form.country = form.country ?? '';
   form.region = form.region ?? '';
+  form.notes = form.notes ?? '';
   return form;
 });
 

package/src/components/BaseScrollColumn.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    v-for="time in times"
+    :key="time"
+    :ref="element"
+    class="cursor-pointer py-1 text-center rounded content"
+    :class="{ 'bg-slate-100': hoveredIndex === `${type}-${time}`, 'bg-primary-100': selectedValue === `${type}-${time}` }"
+    @mouseenter="hoveredIndex = `${type}-${time}`"
+    @mouseleave="hoveredIndex = null"
+    @click="selectTime(`${type}-${time}`, type, time)"
+  >
+    {{ time }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  value: {
+    default: undefined,
+    type: [String, null, undefined] as PropType<string | null | undefined>,
+  },
+  type: {
+    default: 'hour',
+    type: String,
+  },
+  element: {
+    type: String,
+    required: true,
+  },
+  container: {
+    type: [HTMLElement, null] as PropType<HTMLElement | null>,
+    required: true,
+  },
+  times: {
+    default: () => Array.from({ length: 24 }, (_, i) => i.toString().padStart(2, '0')),
+    type: Array as PropType<string[]>,
+  },
+});
+
+const emit = defineEmits(['selectTime']);
+
+const hoveredIndex = ref('' as string | null);
+const selectedValue = ref('' as string | null);
+const timeValue = ref('' as string | null);
+
+const hourElements = ref<Array<HTMLElement | null>>([]);
+const minuteElements = ref<Array<HTMLElement | null>>([]);
+const secondElements = ref<Array<HTMLElement | null>>([]);
+
+const selectTime = async (value: string, type: string, time: string) => {
+  selectedValue.value = value;
+
+  timeValue.value = time;
+
+  let element = [] as (HTMLElement | null)[];
+
+  if (props.type === 'hour') {
+    element = hourElements.value;
+  }
+  if (props.type === 'minute') {
+    element = minuteElements.value;
+  }
+  if (props.type === 'second') {
+    element = secondElements.value;
+  }
+
+  scrollToSelectedValue(props.container, element);
+
+  emit('selectTime', timeValue.value, type);
+};
+
+const scrollToSelectedValue = (
+  timeContainer: HTMLElement | null,
+  timeElement: (HTMLElement | null)[],
+  behavior: 'auto' | 'instant' | 'smooth' | undefined = 'smooth'
+) => {
+
+  console.log('timeContainer', timeContainer, 'timeValue', timeValue.value);
+
+  if (!timeContainer || !timeValue.value) {
+    return;
+  }
+
+  const selectedIndex = props.times.indexOf(timeValue.value);
+
+  const targetElement = timeElement[selectedIndex];
+
+  if (targetElement) {
+    const containerHeight = timeContainer.clientHeight;
+    const elementHeight = targetElement.clientHeight;
+    const offsetTop = targetElement.offsetTop;
+    const scrollTop = (offsetTop - (containerHeight - elementHeight) / 2);
+
+    timeContainer.scrollTo({ top: scrollTop, behavior: behavior as any });
+  }
+};
+
+watch(
+  () => props.container,
+  () => {
+    if (props.value) {
+      const [hour, minute, second] = props.value.split(':');
+
+      let element = [] as (HTMLElement | null)[];
+      if (props.type === 'hour') {
+        timeValue.value = hour;
+        selectedValue.value = `hour-${hour}`;
+        element = hourElements.value;
+      }
+      if (props.type === 'minute') {
+        timeValue.value = minute;
+        selectedValue.value = `minute-${minute}`;
+        element = minuteElements.value;
+      }
+      if (props.type === 'second') {
+        timeValue.value = second;
+        selectedValue.value = `second-${second}`;
+        element = secondElements.value;
+      }
+
+      scrollToSelectedValue(props.container, element, 'instant');
+    }
+
+  },
+  { immediate: true }
+);
+
+</script>

package/src/components/BaseTimePicker.stories.js

@@ -0,0 +1,71 @@
+import { createFieldStory } from '../../.storybook/utils';
+import BaseTimePicker from './BaseTimePicker.vue';
+import ShowValue from '@/../.storybook/components/ShowValue.vue';
+
+const sizes = ['xs', 'sm', 'md'];
+
+export default {
+  title: 'Form/BaseTimePicker',
+  component: BaseTimePicker,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: sizes,
+    }
+  },
+};
+
+const Template = (args) => ({
+  components: { BaseTimePicker, ShowValue },
+  setup() {
+    const value = ref(null);
+    return { value, args };
+  },
+  template: `
+    <BaseTimePicker v-model="value" v-bind="args">
+    </BaseTimePicker>
+    <ShowValue :value="value" />
+  `,
+});
+
+export const Demo = Template.bind({});
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+
+export const DisabledSeconds = Template.bind({});
+DisabledSeconds.args = {
+  disabledSeconds: true,
+};
+
+export const WithSteps = Template.bind({});
+WithSteps.args = {
+  hourStep: 3,
+  minuteStep: 15,
+  secondStep: 10,
+};
+
+const TemplateSizes = (args) => ({
+  components: { BaseTimePicker },
+  setup() {
+    const value = ref(null);
+    const sizes = ['xs', 'sm', 'md'];
+    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>
+    <BaseTimePicker v-model="value" v-bind="args" :size="size" class="w-full"></BaseTimePicker>
+  </div>
+  `,
+});
+
+export const Sizes = TemplateSizes.bind({});
+
+export const Field = createFieldStory({
+  component: BaseTimePicker,
+  componentName: 'BaseTimePicker',
+  label: 'Time',
+});