plugin-ui-for-kzt 0.0.18 → 0.0.20

package/src/composables/kit/state.ts

@@ -8,7 +8,7 @@ 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,
     },

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/webpack.config.js

@@ -97,7 +97,7 @@ module.exports = (env, argv) => {
     devServer: {
       static: path.join(__dirname, "example"),
       compress: true,
-      port: 9000,
+      port: 9001,
       hot: false,
       liveReload: true,
       open: true,