its_ui_vite 1.1.2 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.1.2",
+  "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

@@ -2,7 +2,7 @@
   <div
     ref="root"
     :data-c-datepicker-id="datePickerId"
-    class="c-datepicker"
+    :class="['c-datepicker', color]"
     :style="`--transition: ${transition}ms; --width: ${width}; --picker-content-indent-y: ${pickerContentIndentY}px`"
   >
     <div
@@ -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,9 @@ 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,
   min?: string,
@@ -222,6 +224,8 @@ type TProps = {
 
 const props = withDefaults(defineProps<TProps>(), {
   locale: 'rus',
+  color: 'green',
+  emptyDate: false,
   showTime: true,
   isOpen: false,
   width: '100%',
@@ -238,6 +242,7 @@ type TMonthDay = {
 type TSelectOption = {
   text: string,
   value: number,
+  disable?: boolean,
 }
 
 const transition = 200;
@@ -262,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([]);
@@ -290,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();
@@ -320,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(() => {
@@ -345,6 +341,7 @@ const text = computed(() => {
       daysOfWeek: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
       months: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
       cancel: 'Отмена',
+      emptyDate: 'дд.мм.гггг',
       accept: 'OK',
     },
 
@@ -352,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',
     },
 
@@ -359,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',
     },
 
@@ -366,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',
     },
   };
@@ -374,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,
     });
   });
 
@@ -394,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,
     })
   }
 
@@ -439,6 +461,10 @@ const minuteOptions = computed(() => {
 });
 
 watch(() => isOpenPicker.value, (newValue) => {
+  if (isEmptyDate.value) {
+    isDisableDate.value = true;
+  }
+
   emit('update:isOpen', newValue);
 })
 
@@ -474,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 = [
@@ -596,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);
@@ -625,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;
@@ -665,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;
@@ -675,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);
@@ -693,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({
@@ -725,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
@@ -751,8 +816,38 @@ $timeWidth: 54px;
 
   gap: 15px;
 
+  // prop.color
+  &.green2 {
+    .c-input {
+      border-color: var(--green-dark);
+
+      background: var(--green-low);
+      color: var(--white);
+
+      &::placeholder {
+        color: var(--green-medium);
+      }
+    }
+
+    .c-datepicker__time_wrap {
+      border-color: var(--green-dark);
+      
+      background: var(--green-low);
+
+      span,
+      input {
+        color: var(--green-medium);
+      }
+    }
+  }
+  // ./prop.color
+
   &__inp {
 
+    &.empty-date .c-input::placeholder {
+      color: var(--green-medium);
+    }
+
     .c-input {
       padding: 7px 10px;
     }
@@ -857,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/CInput2Select.vue

@@ -3,7 +3,7 @@
     ref="root"
     :data-c-input2-select-id="CInput2SelectId"
     :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
-    :class="[classes.root, variant, size, { disabled, open: isOpen }]"
+    :class="[classes.root, variant, color, size, { disabled, open: isOpen }]"
   >
     <CInput
       :placeholder="activePlaceholder"
@@ -12,7 +12,7 @@
       :width="width"
       :iconPosition="iconInfo.position.value"
       v-model.trim="findValue"
-      :class="[classes.input, {open: isOpen}]"
+      :class="[classes.input, {open: isOpen}, { 'have-value': activeOptions.size > 0 }]"
     >
       <template #customIcon>
         <div class="c-input2-select__inp_icon-content">
@@ -25,7 +25,7 @@
           <CIcon
             :class="['c-input2-select__inp_icon', 'c-input2-select__inp_icon-clear', { visible: activeOptions.size > 0 }]"
             :size="24"
-            :name="{ 'Cross': true }"
+            :name="iconInfo.clearable.value"
 
             @click.stop="clear"
           />
@@ -114,11 +114,13 @@ type TProps = {
   options?: TOption[],
   variant?: 'default' | 'multiple',
   size?: 'lg' | 'md' | 'sm',
+  color?: 'green' | 'green2',
   selectAll?: boolean,
   autocomplete?: boolean,
   disabled?: boolean,
   transformVal?: boolean,
   iconPosition?: Array<'left' | 'right'>,
+  clearable?: keyof TIcon,
   iconName?: keyof TIcon,
   isOpen?: boolean,
   locale?: 'rus' | 'usa' | 'tur' | 'spa',
@@ -131,6 +133,7 @@ const props = withDefaults(defineProps<TProps>(), {
   options: () => [],
   variant: 'default',
   size: 'lg',
+  color: 'green',
   selectAll: false,
   autocomplete: false,
   disabled: false,
@@ -227,7 +230,16 @@ const iconInfo = {
     const defaultIcon = {'Dropdown': true}
 
     return props.iconName ? propIcon : defaultIcon;
-  })
+  }),
+
+  clearable: computed(() => {
+    const strIconName = String(props?.clearable)
+    const propIcon = {[strIconName]: true}
+
+    const defaultIcon = {'Cross': true}
+
+    return props.clearable ? propIcon : defaultIcon;
+  }),
 }
 
 const foundOptions = computed(() => {
@@ -646,6 +658,21 @@ defineExpose({
   }
   // ./prop.size
 
+  // prop.color
+  &.green2 {
+    .c-input {
+      border-color: var(--green-dark);
+
+      background: var(--green-low);
+      color: var(--white);
+
+      &::placeholder {
+        color: var(--green-medium);
+      }
+    }
+  }
+  // ./prop.color
+
   // prop.disabled
   &.disabled {
     opacity: 0.6;
@@ -673,6 +700,10 @@ defineExpose({
 
         order: -1;
       }
+
+      &.have-value .c-input::placeholder {
+        color: var(--white);
+      }
     }
 
     &_count {

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

@@ -830,7 +830,7 @@
           <!-- col -->
           <div class="table__col checkboxes">
             <div class="table__item">
-              <CDatepicker date="2026-02-06T00:00:00.000+03:00" @change_cdatepicker="(e) => console.log(e)" />
+              <CDatepicker date="2026-02-06T00:00:00.000+03:00" color="green2" @change_cdatepicker="(e) => console.log(e)" />
             </div>
             <div class="table__item">
               <CDatepicker date="2026-02-06T23:59:59.999+03:00" @change_cdatepicker="(e) => console.log(e)" />
@@ -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>
@@ -1144,6 +1147,7 @@
               <CInput2Select
                 :options="optionGroup"
                 v-model="VModelOption3"
+                color="green2"
                 :autocomplete="true"
                 @change_cinput2select="(evt) => log(['CInput2Select default', evt])"
               />

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>
+    `,
+  }),
+};