its_ui_vite 1.1.3 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [
@@ -17,7 +17,9 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "icons": "node ./icon.js"
+    "icons": "node ./icon.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "compression": "^1.7.4",
@@ -31,7 +33,18 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",
     "sass": "^1.69.5",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "storybook": "^10.2.8",
+    "@storybook/vue3-vite": "^10.2.8",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-vitest": "^10.2.8",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-onboarding": "^10.2.8",
+    "vitest": "^4.0.18",
+    "playwright": "^1.58.2",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18"
   },
   "peerDependencies": {
     "sass": ">=1"

package/src/components/CDatepicker.vue

@@ -11,7 +11,7 @@
       @click="setIsOpen(!isOpenPicker)"
     >
       <CInput
-        class="c-datepicker__inp"
+        :class="['c-datepicker__inp', { 'empty-date': isEmptyDate }]"
         size="sm"
         :width="width"
         :placeholder="datePlaceholder"
@@ -37,7 +37,7 @@
     <div
       v-if="showTime"
       ref="time"
-      :class="['c-datepicker__time_wrap', { open: isOpenTime }]"
+      :class="['c-datepicker__time_wrap', { open: isOpenTime, 'empty-date': isEmptyDate }]"
     >
       <div
         class="c-datepicker__time_inps"
@@ -176,14 +176,14 @@
               class="c-datepicker__action_btn"
               variant="outlined"
               size="md"
-              @click="setIsOpen(false)"
+              @click="cancelDate"
             >
               {{ text.cancel }}
             </CButton>
             <CButton
               class="c-datepicker__action_btn"
               size="md"
-              :disabled="isDisableDay(activeDate.toISO())"
+              :disabled="isDisableDate"
               @click="setDate"
             >
               {{ text.accept }}
@@ -210,7 +210,8 @@ import { computed, ref, watch, onMounted, onUnmounted, Teleport } from 'vue';
 
 type TProps = {
   date?: string,
-  showTime: boolean,
+  emptyDate?: boolean,
+  showTime?: boolean,
   color?: 'green' | 'green2',
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
   max?: string,
@@ -224,6 +225,7 @@ type TProps = {
 const props = withDefaults(defineProps<TProps>(), {
   locale: 'rus',
   color: 'green',
+  emptyDate: false,
   showTime: true,
   isOpen: false,
   width: '100%',
@@ -240,6 +242,7 @@ type TMonthDay = {
 type TSelectOption = {
   text: string,
   value: number,
+  disable?: boolean,
 }
 
 const transition = 200;
@@ -264,6 +267,8 @@ let oldDateISO = ref<any>(defaultDate.toISO())
 let activeDate = ref<any>(defaultDate);
 let activeMonth = ref<number>(defaultDate.month);
 let activeYear = ref<number>(defaultDate.year);
+let isEmptyDate = ref<boolean>(false);
+let isDisableDate = ref<boolean>(false);
 
 let modelMonth: any = ref([]);
 let modelYear: any = ref([]);
@@ -292,27 +297,7 @@ const TracingElement = addTracingElement(root, handlePicker);
 const TracingTime = addTracingElement(time, handleTime);
 
 onMounted(() => {
-  if (props.date) {
-    if (typeof props.date === 'string') {
-      activeDate.value = DateTime.fromISO(props.date)
-    }
-
-    if (!activeDate.value?.isValid) {
-      activeDate.value = defaultDate
-    }
-  }
-
-  const currentDate = activeDate.value.toISO();
-
-  oldDateISO.value = currentDate;
-
-  activeMonth.value = activeDate.value.month;
-  activeYear.value = activeDate.value.year;
-
-  fillMonthDays(currentDate);
-
-  setTime('hour', activeDate.value.toFormat('HH'));
-  setTime('minute', activeDate.value.toFormat('mm'));
+  isEmptyDate.value = props.emptyDate && !props.date;
 
   TracingElement.addListeners();
   TracingTime.addListeners();
@@ -322,6 +307,15 @@ onMounted(() => {
   fullscreenEvents.forEach((eventName) => {
     document.addEventListener(eventName, setTeleportTo);
   });
+
+  if (isEmptyDate.value) {
+    isDisableDate.value = true;
+
+    setTime('hour', '00');
+    setTime('minute', '00');
+  } else {
+    initDate(props.date)
+  }
 });
 
 onUnmounted(() => {
@@ -347,6 +341,7 @@ const text = computed(() => {
       daysOfWeek: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
       months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
       cancel: 'Отмена',
+      emptyDate: 'дд.мм.гггг',
       accept: 'OK',
     },
 
@@ -354,6 +349,7 @@ const text = computed(() => {
       daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       cancel: 'Cancel',
+      emptyDate: 'dd.mm.yyyy',
       accept: 'OK',
     },
 
@@ -361,6 +357,7 @@ const text = computed(() => {
       daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       cancel: 'Cancel',
+      emptyDate: 'dd.mm.yyyy',
       accept: 'OK',
     },
 
@@ -368,6 +365,7 @@ const text = computed(() => {
       daysOfWeek: [ 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' ],
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       cancel: 'Cancel',
+      emptyDate: 'dd.mm.aaaa',
       accept: 'OK',
     },
   };
@@ -376,17 +374,31 @@ const text = computed(() => {
 });
 
 const datePlaceholder = computed(() => {
-  const currentDateISO = activeDate.value.toISO();
+  if (isEmptyDate.value) return text.value.emptyDate
+
+  const currentDateISO = activeDate.value.toISO()
   return DateTime.fromISO(currentDateISO).setLocale(props.locale).toFormat('dd LLLL yyyy')
 });
 
 const monthsOption = computed(() => {
   let options: TSelectOption[] = [];
 
+  const maxDateStr = props?.max || '';
+  const minDateStr = props?.min || '';
+  const maxDate = DateTime.fromISO(maxDateStr);
+  const minDate = DateTime.fromISO(minDateStr);
+
   text.value.months.forEach((item, index) => {
+    const monthIndex = index + 1;
+
+    const isMaxMonth = activeDate.value.year === maxDate.year && monthIndex > maxDate.month;
+    const isMinMonth = activeDate.value.year === minDate.year && monthIndex < minDate.month;
+    const isDisable = isMaxMonth || isMinMonth;
+
     options.push({
       text: item,
-      value: index + 1,
+      value: monthIndex,
+      disable: isDisable,
     });
   });
 
@@ -396,14 +408,22 @@ const monthsOption = computed(() => {
 const yearOption = computed(() => {
   let options: TSelectOption[] = [];
 
+  const maxDateStr = props?.max || '';
+  const minDateStr = props?.min || '';
+  const maxDate = DateTime.fromISO(maxDateStr);
+  const minDate = DateTime.fromISO(minDateStr);
+
   const range = 10;
-  const minYear = activeDate.value.year - range;
-  const maxYear = activeDate.value.year + range;
+  const minYear = defaultDate.year - range;
+  const maxYear = defaultDate.year + range;
 
   for(let i = minYear; i < maxYear; i++) {
+    const isDisable = i > maxDate.year || i < minDate.year;
+
     options.push({
       text: String(i),
       value: i,
+      disable: isDisable,
     })
   }
 
@@ -441,6 +461,10 @@ const minuteOptions = computed(() => {
 });
 
 watch(() => isOpenPicker.value, (newValue) => {
+  if (isEmptyDate.value) {
+    isDisableDate.value = true;
+  }
+
   emit('update:isOpen', newValue);
 })
 
@@ -476,6 +500,24 @@ function handlePicker(positionInfo?: any) {
   setIsOpen(false);
 }
 
+function initDate(date?: string) {
+  const currentDate = DateTime.fromISO(date || '');
+  
+  activeDate.value = currentDate.isValid ? currentDate : defaultDate;
+
+  const currentDateISO = activeDate.value.toISO();
+
+  oldDateISO.value = currentDateISO;
+
+  activeMonth.value = activeDate.value.month;
+  activeYear.value = activeDate.value.year;
+
+  fillMonthDays(currentDateISO);
+
+  setTime('hour', activeDate.value.toFormat('HH'));
+  setTime('minute', activeDate.value.toFormat('mm'));  
+}
+
 function handleClickPicker(evt: MouseEvent) {
   const target = (evt.target as HTMLElement);
   const classesArr = [
@@ -598,8 +640,10 @@ function setTime(name: 'hour' | 'minute', value: string) {
 
   const format = name === 'hour' ? 'HH' : 'mm';
 
-  const maxDate = DateTime.fromISO(props?.max);
-  const minDate = DateTime.fromISO(props?.min);
+  const maxDateStr = props?.max || '';
+  const minDateStr = props?.min || '';
+  const maxDate = DateTime.fromISO(maxDateStr);
+  const minDate = DateTime.fromISO(minDateStr);
 
   // max Day
   const isMismatchMaxDay = maxDate.isValid && (maxDate.day === activeDate.value.day && maxDate.month === activeDate.value.month && maxDate.year === activeDate.value.year);
@@ -627,9 +671,10 @@ function getTimeStr(value: number | string) {
 }
 
 function isDisableTime(name: 'hour' | 'minute', value: number) {
-  const maxDate = DateTime.fromISO(props?.max);
-  const minDate = DateTime.fromISO(props?.min);
-
+  const maxDateStr = props?.max || '';
+  const minDateStr = props?.min || '';
+  const maxDate = DateTime.fromISO(maxDateStr);
+  const minDate = DateTime.fromISO(minDateStr);
 
   // max Day
   const isMismatchMaxDay = maxDate.day !== activeDate.value.day || maxDate.month !== activeDate.value.month || maxDate.year !== activeDate.value.year;
@@ -667,6 +712,8 @@ function setOldDate(value: boolean) {
   if (value) {
     oldDateISO.value = activeDate.value.toISO()
   } else {
+    if (isEmptyDate.value && !isDisableDate.value) return;
+
     activeDate.value = DateTime.fromISO(oldDateISO.value);
     activeMonth.value = activeDate.value.month;
     activeYear.value = activeDate.value.year;
@@ -677,12 +724,23 @@ function setOldDate(value: boolean) {
 }
 
 function setDate() {
+  isDisableDate.value = false;
+  isEmptyDate.value = false;
+
   setTime('hour', activeDate.value.toFormat('HH'));
   setTime('minute', activeDate.value.toFormat('mm'));
 
   dispatchEmit();
 }
 
+function cancelDate() {
+  if (isEmptyDate.value) {
+    isDisableDate.value = false;
+  }
+
+  setIsOpen(false);
+}
+
 function dispatchEmit() {
   const currentDateISO = activeDate.value.toISO();
   setIsOpen(false);
@@ -695,6 +753,7 @@ function dispatchEmit() {
 function setActiveDay(ISO: string) {
   if (isDisableDay(ISO)) return;
 
+  isDisableDate.value = false;
   const currentDate = DateTime.fromISO(ISO);
 
   const currentActiveDate = DateTime.fromISO(activeDate.value.toISO()).set({
@@ -727,11 +786,15 @@ function setSelect(dateName: 'month' | 'year', value: number) {
   activeDate.value = DateTime.fromISO(currentISO).set({ month: activeMonth.value, year: activeYear.value });
   const currentDate = activeDate.value.toISO();
   
+  isDisableDate.value = isDisableDay(currentDate)
+
   monthDays.value = [];
   fillMonthDays(currentDate);
 }
 
 function isActiveDay(ISO: string): boolean {
+  if (isDisableDate.value) return false;
+  
   const currentDate = DateTime.fromISO(ISO);
 
   return activeDate.value.year === currentDate.year && activeDate.value.month === currentDate.month && activeDate.value.day === currentDate.day
@@ -781,6 +844,10 @@ $timeWidth: 54px;
 
   &__inp {
 
+    &.empty-date .c-input::placeholder {
+      color: var(--green-medium);
+    }
+
     .c-input {
       padding: 7px 10px;
     }
@@ -885,6 +952,14 @@ $timeWidth: 54px;
       &:hover {
         border: 1px solid var(--green-light);
       }
+
+      &.empty-date {
+        pointer-events: none;
+
+        .c-datepicker__time_inps {
+          color: var(--green-medium);
+        }
+      }
     }
   }
 }

package/src/components/CSelect.vue

@@ -51,7 +51,7 @@
             v-for="item in foundOptions"
             :key="item.value"
             @click="debounceEvent(item, $event)"
-            :class="classes.optionBtn"
+            :class="[classes.optionBtn, { disable: item.disable }]"
           >
             <component 
               :class="classes.option"
@@ -91,6 +91,7 @@ type TOption = {
   text?: string,
   value?: any,
   id?: any,
+  disable?: boolean,
   [key: string]: any,
 } 
 
@@ -317,14 +318,15 @@ function getCheckboxProp(option: TOption) {
   if (!isMultiple.value) return {}
   return {
     size: 'sm',
-    modelValue: isChecked,
+    modelValue: !option.disable && isChecked,
+    disable: option.disable,
   }
 }
 
 function setAllOption(evt: MouseEvent) {
   const target = (evt.target as HTMLElement);
   const list = target.closest(`.${classes.list}`);
-  const inputs = (list!.querySelectorAll<HTMLInputElement>(`.${classes.optionBtn} input`));
+  const inputs = (list!.querySelectorAll<HTMLInputElement>(`.${classes.optionBtn}:not(.disable) input`));
   const inputsChecked = list!.querySelectorAll(`.${classes.optionBtn}:not(:first-child) input:checked`);
   const selectAllInput = inputs[0];
 
@@ -337,7 +339,8 @@ function setAllOption(evt: MouseEvent) {
     });
 
     props.options.forEach((option) => {
-      activeOptions.value[selectAllInput.checked ? 'add' : 'delete'](option);
+      const isAdd = selectAllInput.checked && !option.disable;
+      activeOptions.value[isAdd ? 'add' : 'delete'](option);
     });
   } else {
     selectAllInput.checked = isOneNotChecked;
@@ -550,6 +553,11 @@ defineExpose({
         background: var(--green-dark);
       }
 
+      &.disable {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
       .c-checkbox__wrap {
         min-height: var(--option-height);
 

package/src/pages/index.vue

@@ -843,11 +843,14 @@
             <div class="table__item" style="display: flex; flex-direction: column;">
               <CDatepicker
                 date="2025-10-10T00:00:00.000+03:00"
-                max="2025-10-10T04:04:00.000+03:00"
-                min="2025-01-07T01:01:00.000+03:00"
+                max="2026-10-10T04:04:00.000+03:00"
+                min="2024-02-07T01:01:00.000+03:00"
                 @change_cdatepicker="(e) => console.log(e)"
               />
             </div>
+            <div class="table__item">
+              <CDatepicker :empty-date="true" @change_cdatepicker="(e) => console.log(e)" />
+            </div>
           </div>
           <!-- ./col -->
         </div>

package/src/stories/CAlert.stories.js

@@ -0,0 +1,66 @@
+import CAlert from '../components/CAlert.vue';
+
+export default {
+  title: 'Components/CAlert',
+  component: CAlert,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['notification', 'success', 'error'],
+    },
+    liveTime: { control: 'number' },
+    width: { control: 'text' },
+    text: { control: 'text' },
+    default: {
+      control: 'text',
+      description: 'Slot content',
+    },
+  },
+  args: {
+    variant: 'notification',
+    liveTime: 10000,
+    width: 'auto',
+    default: 'Время ожидания сервером истекло. Повторите попытку позже или обратитесь к администратору',
+  },
+  render: (args) => ({
+    components: { CAlert },
+    setup() { return { args }; },
+    template: `<CAlert v-bind="args">{{ args.default }}</CAlert>`,
+  }),
+};
+
+export const Notification = {};
+
+export const Success = {
+  args: {
+    variant: 'success',
+    default: 'Очередь успешно отправлена',
+  },
+};
+
+export const Error = {
+  args: {
+    variant: 'error',
+    default: 'Ошибка соединения. Обратитесь к администратору',
+  },
+};
+
+export const AllVariants = {
+  render: () => ({
+    components: { CAlert },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 16px;">
+        <CAlert variant="notification">
+          Время ожидания сервером истекло. Повторите попытку позже
+        </CAlert>
+        <CAlert variant="success">
+          Очередь успешно отправлена
+        </CAlert>
+        <CAlert variant="error">
+          Ошибка соединения. Обратитесь к администратору
+        </CAlert>
+      </div>
+    `,
+  }),
+};

package/src/stories/CButton.stories.js

@@ -0,0 +1,105 @@
+import CButton from '../components/CButton.vue';
+
+export default {
+  title: 'Components/CButton',
+  component: CButton,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['lg', 'md', 'sm'],
+    },
+    variant: {
+      control: 'select',
+      options: ['tonal', 'outlined', 'text', 'nav_item'],
+    },
+    color: {
+      control: 'select',
+      options: ['green', 'black'],
+    },
+    disabled: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    active: { control: 'boolean' },
+    default: {
+      control: 'text',
+      description: 'Slot content',
+    },
+  },
+  args: {
+    size: 'lg',
+    variant: 'tonal',
+    color: 'green',
+    disabled: false,
+    loading: false,
+    active: false,
+    default: 'Button',
+  },
+  render: (args) => ({
+    components: { CButton },
+    setup() { return { args }; },
+    template: `<CButton v-bind="args">{{ args.default }}</CButton>`,
+  }),
+};
+
+export const Tonal = {};
+
+export const Outlined = {
+  args: { variant: 'outlined', default: 'Outlined' },
+};
+
+export const Text = {
+  args: { variant: 'text', default: 'Text' },
+};
+
+export const NavItem = {
+  args: { variant: 'nav_item', default: 'Nav Item' },
+};
+
+export const Black = {
+  args: { color: 'black', default: 'Black' },
+};
+
+export const Disabled = {
+  args: { disabled: true, default: 'Disabled' },
+};
+
+export const Loading = {
+  args: { loading: true, default: 'Loading' },
+};
+
+export const SizeMedium = {
+  args: { size: 'md', default: 'Medium' },
+};
+
+export const SizeSmall = {
+  args: { size: 'sm', default: 'Small' },
+};
+
+export const AllVariants = {
+  render: () => ({
+    components: { CButton },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
+        <CButton>Tonal</CButton>
+        <CButton variant="outlined">Outlined</CButton>
+        <CButton variant="text">Text</CButton>
+        <CButton color="black">Black</CButton>
+        <CButton :disabled="true">Disabled</CButton>
+        <CButton :loading="true">Loading</CButton>
+      </div>
+    `,
+  }),
+};
+
+export const AllSizes = {
+  render: () => ({
+    components: { CButton },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 16px; align-items: center;">
+        <CButton size="lg">Large</CButton>
+        <CButton size="md">Medium</CButton>
+        <CButton size="sm">Small</CButton>
+      </div>
+    `,
+  }),
+};