plugin-ui-for-kzt 0.0.20 → 0.0.21

package/src/components/BaseSiteInput/BaseSiteInput.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="classList">
         <div class="base-site-input__wrapper">
-        <div class="base-site-input__url-wrapper">
+        <div :class="{ '--is-error' : urlError }" class="base-site-input__url-wrapper">
             <span class="base-site-input__url">
                 https://
             </span>
@@ -9,10 +9,9 @@
             <base-input 
                 v-bind="{...$props, ...$attrs}"
                 v-model="modelValue"
-                :id="id"
+                id="url"
                 type="url"
                 :error="urlError || props.error"
-                class="base-site-input__input"
                 @update:modelValue="onUpdateModelValue"
             />
         </div>
@@ -23,24 +22,30 @@
 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: '',
-    focusable: true,
+    error: '',
 })
 
 const emit = defineEmits<{
   (event: 'update:modelValue', value: string): void;
 }>();
 
-const urlError = ref<string>('');
+const urlError = ref('');
 const { sizeClassList } = useKitSize(props);
+const { stateClassList } = useKitState(props);
 
 const classList = computed(() => [
     sizeClassList.value,
-    'base-site-input'
+    stateClassList.value,
+    'base-site-input',
+    {
+        '--is-has-hint': !!props.hint,
+    }
 ]);
 
 const normalizedValue = computed(() => {
@@ -77,7 +82,7 @@ watch(modelValue, (value) => {
 .base-site-input {
     $input: &;
 
-    width: 100%;
+    width: fit-content;
 
     &__wrapper {
         display: flex;
@@ -92,10 +97,6 @@ watch(modelValue, (value) => {
         }
     }
 
-    &__input {
-        flex-grow: 1;
-    }
-
     &__url {
         color: var(--primary-text-tertiary);
     }
@@ -113,48 +114,99 @@ 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,6 +1,8 @@
 <template>
   <div class="base-textarea" :class="classList">
-    <div class="base-textarea__wrapper">
+    <label class="base-textarea__label" :for="id">
+      <span v-if="label" class="base-textarea__label-text">{{ label }}</span>
+
       <div class="base-textarea__wrapper">
         <textarea
           :id="id"
@@ -15,7 +17,11 @@
           {{ modelValue.length }}/{{ maxLength }}
         </span>
       </div>
-    </div>
+
+      <div v-if="(error && typeof error === 'string') || hint" class="base-textarea__hint">
+        {{ error || hint }}
+      </div>
+    </label>
   </div>
 </template>
 
@@ -28,6 +34,8 @@ import { useKitSize } from '../../composables/kit/size';
 const props = withDefaults(defineProps<ICoreTextareaProps & { maxLength?: number }>(), {
   modelValue: '',
   placeholder: '' as string,
+  error: '',
+  hint: '',
   size: 'medium',
 });
 
@@ -65,6 +73,11 @@ function handleInput(event: Event) {
     resize: none;
   }
 
+  &__hint {
+    align-self: flex-start;
+    font: var(--typography-text-s-regular);
+  }
+
   &__wrapper {
     display: flex;
     position: relative;
@@ -100,6 +113,10 @@ function handleInput(event: Event) {
         color: var(--primary-text-tertiary);
         background: var(--primary-black-100);
       }
+
+      #{$textarea}__hint {
+        color: var(--primary-text-secondary);
+      }
     }
   }
 
@@ -109,7 +126,7 @@ function handleInput(event: Event) {
     color: var(--primary-text-quaternary);
   }
 
-  &__wrapper {
+  &__label {
     display: flex;
     flex-direction: column;
     gap: 6px;
@@ -118,7 +135,17 @@ 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,9 +8,10 @@ export function useKitState(props: ICoreState) {
       '--is-selected': props.selected,
       '--is-active': props.active,
       '--is-required': props.required,
-      '--is-error': Boolean(props.error || (typeof props.error === 'string' ? props.error.length > 0 : false)),
+      '--is-error': props.error,
       '--is-loading': props.loading,
       '--is-disabled': props.disabled,
+      '--is-has-hint': props.hint,
     },
   ]);
 

package/src/index.ts

@@ -35,7 +35,6 @@ 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,
@@ -68,8 +67,7 @@ const components = {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload,
-  BaseField
+  BaseUpload
 };
 
 // Функция для загрузки sprite.svg
@@ -155,6 +153,5 @@ export {
   BaseSegmentedButtons,
   BaseChips,
   BaseSwiper,
-  BaseUpload,
-  BaseField
+  BaseUpload
 };

package/src/styles/index.scss

@@ -1,89 +1,4 @@
-*,
-*::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;
+  font-family: 'Roboto Condensed', 'Helvetica Neue', sans-serif;
+  font-size: 100%;
 }

package/src/styles/root.scss

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

package/src/styles/variables.scss

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

package/src/types/button.d.ts

@@ -5,6 +5,7 @@ export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICore
 interface IOptionButtonSegment {
     label: string;
     value: string;
+    disabled?: boolean;
 }
 
 export type TSegmentedButtonsProps = ICoreButtonProps & {

package/src/types/calendar.d.ts

@@ -5,12 +5,10 @@ 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/input.d.ts

@@ -8,16 +8,19 @@ 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 = InputProps & ICoreSize;
+export type ICorePropsBaseSiteInput = Omit<IPropsBaseSiteInput, 'id'> & ICoreSize;
 
 export type ICoreInputProps = InputProps & ICoreSize & ICoreState;
 
@@ -25,29 +28,14 @@ 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 {
@@ -65,10 +53,4 @@ 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,6 +28,7 @@ export interface ICoreState {
   required?: boolean
   error?: Nullable<string | number | boolean> | undefined
   loading?: boolean
+  hint?: Nullable<string | number | boolean> | undefined
 }
 
 export interface ICoreStyle {

package/dist/components/BaseField/BaseField.vue.d.ts

@@ -1,98 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    id: {
-        default: string;
-    };
-    label: {
-        default: string;
-    };
-    hint: {
-        default: string;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: string;
-    };
-    focusable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    tabIndex: {
-        default: number;
-    };
-    size: {
-        default: string;
-    };
-    selected: {
-        type: BooleanConstructor;
-    };
-    active: {
-        type: BooleanConstructor;
-    };
-    disabled: {
-        type: BooleanConstructor;
-    };
-    required: {
-        type: BooleanConstructor;
-    };
-    loading: {
-        type: BooleanConstructor;
-    };
-}>, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("error" | "update:modelValue")[], "error" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    id: {
-        default: string;
-    };
-    label: {
-        default: string;
-    };
-    hint: {
-        default: string;
-    };
-    error: {
-        type: (BooleanConstructor | StringConstructor)[];
-        default: string;
-    };
-    focusable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    tabIndex: {
-        default: number;
-    };
-    size: {
-        default: string;
-    };
-    selected: {
-        type: BooleanConstructor;
-    };
-    active: {
-        type: BooleanConstructor;
-    };
-    disabled: {
-        type: BooleanConstructor;
-    };
-    required: {
-        type: BooleanConstructor;
-    };
-    loading: {
-        type: BooleanConstructor;
-    };
-}>> & Readonly<{
-    onError?: ((...args: any[]) => any) | undefined;
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}>, {
-    size: string;
-    label: string;
-    error: string | boolean;
-    id: string;
-    disabled: boolean;
-    selected: boolean;
-    active: boolean;
-    required: boolean;
-    loading: boolean;
-    focusable: boolean;
-    hint: string;
-    tabIndex: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;