plugin-ui-for-kzt 0.0.19 → 0.0.20

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div :class="{ '--is-error' : urlError }" class="base-site-input__url-wrapper">
+        <div class="base-site-input__url-wrapper">
             <span class="base-site-input__url">
                 https://
             </span>
@@ -9,9 +9,10 @@
             <base-input 
                 v-bind="{...$props, ...$attrs}"
                 v-model="modelValue"
-                id="url"
+                :id="id"
                 type="url"
                 :error="urlError || props.error"
+                class="base-site-input__input"
                 @update:modelValue="onUpdateModelValue"
             />
         </div>
@@ -22,30 +23,24 @@
 import { computed, ref, watch } from 'vue';
 import BaseInput from '../BaseInput/BaseInput.vue';
 import { useKitSize } from '../../composables/kit/size'
-import { useKitState } from '../../composables/kit/state';
 import type { ICorePropsBaseSiteInput } from '../../types/input'
 
 const props = withDefaults(defineProps<ICorePropsBaseSiteInput>(),{
     size: 'medium',
     modelValue: '',
-    error: '',
+    focusable: true,
 })
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
 
-const urlError = ref('');
+const urlError = ref<string>('');
 const { sizeClassList } = useKitSize(props);
-const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
     sizeClassList.value,
-    stateClassList.value,
-    'base-site-input',
-    {
-        '--is-has-hint': !!props.hint,
-    }
+    'base-site-input'
 ]);
 
 const normalizedValue = computed(() => {
@@ -82,7 +77,7 @@ watch(modelValue, (value) => {
 .base-site-input {
     $input: &;
 
-    width: fit-content;
+    width: 100%;
 
     &__wrapper {
         display: flex;
@@ -97,6 +92,10 @@ watch(modelValue, (value) => {
         }
     }
 
+    &__input {
+        flex-grow: 1;
+    }
+
     &__url {
         color: var(--primary-text-tertiary);
     }
@@ -114,99 +113,48 @@ watch(modelValue, (value) => {
     }
 
     &.--small-size {
-        &.--is-has-hint, &.--is-error {
-            #{$input} {
-                &__url-wrapper {
-                    margin-bottom: 26px;
-                }
-            }
-        }
-
         #{$input} {
             &__url-wrapper{
                 height: 40px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-s);
                 border-bottom-left-radius: var(--corner-radius-s);
-
-                &.--is-error {
-                    margin-bottom: 26px;
-                }
             }
 
             &__url {
                 padding: var(--spacing-s) var(--spacing-m) var(--spacing-s) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--medium-size {
-        &.--is-has-hint, &.--is-error {
-            #{$input} {
-                &__url-wrapper {
-                    margin-bottom: 26px;
-                }
-            }
-        }
-
         #{$input} {
             &__url-wrapper{
                 height: 48px;
                 font: var(--typography-text-m-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
-
-                &.--is-error {
-                    margin-bottom: 26px;
-                }
             }
 
             &__url {
                 padding: var(--spacing-m) var(--spacing-m) var(--spacing-m) var(--spacing-2l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-75px);
-        }
     }
 
     &.--large-size {
-        &.--is-has-hint, &.--is-error {
-            #{$input} {
-                &__url-wrapper {
-                    margin-bottom: 30px;
-                }
-            }
-        }
-
         #{$input} {
             &__url-wrapper{
                 height: 56px;
                 font: var(--typography-text-l-regular);
                 border-top-left-radius: var(--corner-radius-m);
                 border-bottom-left-radius: var(--corner-radius-m);
-
-                &.--is-error {
-                    margin-bottom: 30px;
-                }
             }
 
             &__url {
                 padding: var(--spacing-2l) var(--spacing-m) var(--spacing-2l) var(--spacing-l);
             }
         }
-
-        :deep(.base-input__label-text), 
-        :deep(.base-input__hint) {
-            transform: translateX(-83px);
-        }
     }
 }
 </style>

package/src/components/BaseTextarea/BaseTextarea.vue

@@ -1,8 +1,6 @@
 <template>
   <div class="base-textarea" :class="classList">
-    <label class="base-textarea__label" :for="id">
-      <span v-if="label" class="base-textarea__label-text">{{ label }}</span>
-
+    <div class="base-textarea__wrapper">
       <div class="base-textarea__wrapper">
         <textarea
           :id="id"
@@ -17,11 +15,7 @@
           {{ modelValue.length }}/{{ maxLength }}
         </span>
       </div>
-
-      <div v-if="(error && typeof error === 'string') || hint" class="base-textarea__hint">
-        {{ error || hint }}
-      </div>
-    </label>
+    </div>
   </div>
 </template>
 
@@ -34,8 +28,6 @@ import { useKitSize } from '../../composables/kit/size';
 const props = withDefaults(defineProps<ICoreTextareaProps & { maxLength?: number }>(), {
   modelValue: '',
   placeholder: '' as string,
-  error: '',
-  hint: '',
   size: 'medium',
 });
 
@@ -73,11 +65,6 @@ function handleInput(event: Event) {
     resize: none;
   }
 
-  &__hint {
-    align-self: flex-start;
-    font: var(--typography-text-s-regular);
-  }
-
   &__wrapper {
     display: flex;
     position: relative;
@@ -113,10 +100,6 @@ function handleInput(event: Event) {
         color: var(--primary-text-tertiary);
         background: var(--primary-black-100);
       }
-
-      #{$textarea}__hint {
-        color: var(--primary-text-secondary);
-      }
     }
   }
 
@@ -126,7 +109,7 @@ function handleInput(event: Event) {
     color: var(--primary-text-quaternary);
   }
 
-  &__label {
+  &__wrapper {
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -135,17 +118,7 @@ function handleInput(event: Event) {
     height: 100%;
   }
 
-  &__label-text {
-    align-self: flex-start;
-    font: var(--typography-text-s-medium);
-    color: var(--primary-text-primary);
-  }
-
   &.--is-error {
-    #{$textarea}__hint {
-      color: var(--error-red);
-    }
-
     #{$textarea}__field {
       border-color: var(--error-red-light-01);
 

package/src/composables/kit/state.ts

@@ -8,10 +8,9 @@ export function useKitState(props: ICoreState) {
       '--is-selected': props.selected,
       '--is-active': props.active,
       '--is-required': props.required,
-      '--is-error': props.error,
+      '--is-error': Boolean(props.error || (typeof props.error === 'string' ? props.error.length > 0 : false)),
       '--is-loading': props.loading,
       '--is-disabled': props.disabled,
-      '--is-has-hint': props.hint,
     },
   ]);
 

package/src/index.ts

@@ -35,6 +35,7 @@ import BaseUpload from "./components/BaseUpload/BaseUpload.vue";
 import BaseBadge from "./components/BaseBadge/BaseBadge.vue";
 import BaseTag from "./components/BaseTag/BaseTag.vue";
 import BaseBadgeGroup from "./components/BaseBadge/BaseBadgeGroup.vue";
+import BaseField from "./components/BaseField/BaseField.vue";
 
 const components = {
   BaseModal,
@@ -67,7 +68,8 @@ const components = {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload
+  BaseUpload,
+  BaseField
 };
 
 // Функция для загрузки sprite.svg
@@ -153,5 +155,6 @@ export {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload
+  BaseUpload,
+  BaseField
 };

package/src/styles/index.scss

@@ -1,4 +1,89 @@
-body {
-  font-family: 'Roboto Condensed', 'Helvetica Neue', sans-serif;
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
   font-size: 100%;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  background: none;
+  border: none;
+  outline: none;
+  appearance: none;
+}
+
+form {
+  margin: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: var(--primary-black-300, #ccc);
+}
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
 }

package/src/styles/root.scss

@@ -1,3 +1,4 @@
+@import "./index.scss";
 :root {
     /* Primary colors */
     --primary-blue-deep: #0085BE;

package/src/styles/variables.scss

@@ -33,7 +33,8 @@ $retina: '(min-resolution: 1.5dppx), (min-resolution: 144dpi)';
 
 @mixin focused {
     &:focus,
-    &:focus-visible {
+    &:focus-visible,
+    &:focus-within {
         @content;
     }
 }

package/src/types/calendar.d.ts

@@ -5,10 +5,12 @@ import type { InputProps } from './input';
 export type DateRange = [Date, Date] | Date | string | null;
 
 export interface IBaseCalendarProps {
+  id: string
   modelValue?: DateRange
   range?: boolean | RangeConfig | undefined
   minDate?: Date | null
   readonly?: boolean
+  error?: string | boolean
 }
 
 export type TCoreCalendarProps = IBaseCalendarProps & ICoreSize;

package/src/types/field.d.ts

@@ -0,0 +1,12 @@
+import type { ICoreSize, ICoreState } from './utils';
+
+interface IFieldProps {
+    id: string
+    label: string
+    hint?: string
+    error?: string | boolean
+    focusable?: boolean
+    tabIndex?: number
+}
+
+export type TFieldProps = IFieldProps & ICoreSize & ICoreState;

package/src/types/input.d.ts

@@ -8,19 +8,16 @@ export interface InputProps {
   mask?: string
   type?: string
   placeholder?: string
-  error?: string | boolean
+  error?: string | boolean;
   readonly?: boolean
-  hint?: string
-  label?: string
   tooltipOptions?: ITooltipProps
   validationText?: string
+  focusable?: boolean
 }
 
-interface IPropsBaseSiteInput extends InputProps {}
-
 type TTextareaProps = Omit<InputProps, 'type'>;
 
-export type ICorePropsBaseSiteInput = Omit<IPropsBaseSiteInput, 'id'> & ICoreSize;
+export type ICorePropsBaseSiteInput = InputProps & ICoreSize;
 
 export type ICoreInputProps = InputProps & ICoreSize & ICoreState;
 
@@ -28,14 +25,29 @@ export type ICoreTextareaProps = ICoreState & TTextareaProps & ICoreSize;
 
 export type TSelectValue = Nullable<string | number | boolean>;
 
+type TOptionPhoneCountry = 'KZ' | 'RU' | 'KG' | 'UZ';
+type TOptionCurrency = 'KZT' | 'RUB' | 'KGS' | 'UZS';
+export interface IOptionsSelect<T extends string> {
+  id: string;
+  name: string;
+  value: T;
+  mask: string;
+}
+
+export interface IOptionsPhone extends IOptionsSelect<TOptionPhoneCountry> {
+  icon: TOptionPhoneCountry;
+}
+
+export interface IOptionsCurrency extends IOptionsSelect<TOptionCurrency> {
+  symbol: string;
+}
+
 export interface ICoreSelectOption {
   id: TSelectValue
   name: string
   disabled?: boolean
   icon?: string
   style?: Record<string, string>
-
-
 }
 
 export interface ICoreSelectBaseProps {
@@ -53,4 +65,10 @@ export interface ICoreSelectBaseProps {
   hint?: string
 }
 
+export interface ISelectSlotProps {
+  item: ICoreSelectBaseProps;
+  index: number;
+  active: boolean;
+}
+
 export type ICoreSelectProps = ICoreSelectBaseProps & ICoreSize & ICoreState & ICoreStyle & ICorePlaceholder;

package/src/types/utils.d.ts

@@ -28,7 +28,6 @@ export interface ICoreState {
   required?: boolean
   error?: Nullable<string | number | boolean> | undefined
   loading?: boolean
-  hint?: Nullable<string | number | boolean> | undefined
 }
 
 export interface ICoreStyle {