plugin-ui-for-kzt 0.0.20 → 0.0.22

package/example/App.vue

@@ -1,198 +1,43 @@
 <template>
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
-    <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
     <section>
-      <BaseField 
-        size="large" 
-        id="BaseInputEmail" 
-        label="BaseInputEmail" 
-        :focusable="false"
-        :tabIndex="8" 
-        :error="errorValue"
-      >
-      <template #default="data">
-        <BaseInputEmail
-          id="BaseInputEmail" 
-          v-model="calendarModel" 
-          label="Select date hereBaseInputEmail"
-          placeholder="Select date"
-          :error="data.error"
-          :size="data.size"
-        />
-        </template>
-    </BaseField>
-      <BaseField 
-        size="small" 
-        id="calendar-input" 
-        label="calendar Input" 
-        :tabIndex="7" 
-        :error="errorValue"
-      >
-      <template #default="data">
-        <base-input-calendar 
-          id="calendar" 
-          v-model="calendarModel" 
-          label="Select date here"
-          :size="data.size"
-          placeholder="Select date"
-          :error="data.error"
-          :min-date="new Date()"
-          @validationError="handleError"
-        />
-        </template>
-    </BaseField>
-    <BaseField 
-        size="medium" 
-        id="textarea-input" 
-        label="text Input" 
-        :tabIndex="6" 
-        :error="errorValue"
-      >
-      <template #default="data">
-          <BaseTextarea 
-            :size="data.size" 
-            v-model="inputValue" 
-            id="textarea-input"
-            :error="data.error"
-          >
-          </BaseTextarea>
-        </template>
-    </BaseField>
-    <BaseField 
-        size="medium" 
-        id="select-input" 
-        label="select input" 
-        :tabIndex="5" 
-        :error="errorValue"
-      >
-      <template #default="data">
-          <BaseSelect 
-            :size="data.size" 
-            v-model="selectValue"
-            :options="options" 
-            id="select-input"
-            :error="data.error"
-          >
-            <template #left-icon>
-              <BaseIcon name="star" />
-            </template>
-            <template #right-icon>
-              <BaseIcon name="close" />
-            </template>
-          </BaseSelect>
-        </template>
-    </BaseField>
-      <BaseField 
-        size="medium" 
-        id="BaseInput " 
-        label="BaseInput " 
-        :tabIndex="0" 
-        :error="errorValue"
-      >
-          <template #default="data">
-            <BaseInput 
-              :size="data.size"
-              v-model="inputValue"
-              type="text" 
-              placeholder="Type here" 
-              id="BaseInput "
-              :error="data.error"
-            >
-              <template #left-icon>
-                <BaseIcon name="star" />
-              </template>
-              <template #right-icon>
-                <BaseIcon name="close" />
-              </template>
-            </BaseInput>
-          </template>
-    </BaseField>
-    <BaseField 
-        size="medium" 
-        id="input-phone" 
-        label="input-phone" 
-        :tabIndex="1" 
-        :error="errorValue"
-      >
-      <template #default="data">
-          <BaseInputPhone 
-            :size="data.size" 
-            v-model="inputValue4"
-            type="text" 
-            placeholder="Type here" 
-            id="phone-input"
-            :error="`${data.error}`"
-            :focusable="false"
-          />
-        </template>
-    </BaseField>
-
-    <BaseField
-        size="medium" 
-        id="BaseInputCurrency" 
-        label="BaseInputCurrency" 
-        :tabIndex="2" 
-        :error="errorValue"
-    >
-    <template #default="data">
-          <BaseInputCurrency
-            :size="data.size" 
-            v-model="inputValue3"
-            type="text" 
-            placeholder="Type here" 
-            id="BaseInputCurrency"
-            :error="`${data.error}`"
-          />
-        </template>
-    </BaseField>
-
-    <BaseField
-        size="medium" 
-        id="BaseSiteInput" 
-        label="BaseSiteInput" 
-        :tabIndex="3" 
-        :focusable="false"
-        :error="errorValue"
-    >
-    <template #default="data">
-          <BaseSiteInput
-            :size="data.size" 
-            v-model="inputValue3"
-            placeholder="write site url" 
-            id="BaseSiteInput"
-            :error="`${data.error}`"
-          />
-        </template>
-    </BaseField>
-    
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
+        size="extra-small"
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
+        size="small"
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
+        size="medium"
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
+        size="large"
+      />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 
-const inputValue = ref('as');
-const selectValue = ref('');
-const options = ref([
-  { id: '1', name: 'Option 1', value: 'option1' },
-  { id: '2', name: 'Option 2', value: 'option2' },
-  { id: '3', name: 'Option 3', value: 'option3' },
-]);
-const inputValue3 = ref('');
-const calendarModel = ref('');
-const inputValue4 = ref('');
-const errorValue = ref('');
-errorValue.value = errorValue.value.length < 3 ? 'Input must be at least 3 characters long' : '';
-watch(inputValue, (newValue) => {
-  console.log('Input 1 value changed:', newValue);
-  errorValue.value = newValue.length < 3 ? 'Input must be at least 3 characters long' : '';
-});
+const options = [
+  { value: '0', label: 'Компоненты', disabled: true },
+  { value: '1', label: 'Композиции' },
+  { value: '2', label: 'Стили' },
+];
 
-const handleError = (value: string) => {
-  console.error('Validation error:', value);
-  errorValue.value = value;
-};
+const currentSlide = ref('0');
 </script>
 
 <style lang="scss" scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/BaseSegmentedButtons/BaseSegmentedButtons.vue

@@ -5,6 +5,7 @@
             v-for="option in options"
             :key="option.value"
             v-bind="buttonAttrs"
+            :disabled="option.disabled"
             :color="modelValue === option.value ? 'primary' : 'secondary'"
             @click="handleClick(option.value)"
             >

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 & {