plugin-ui-for-kzt 0.0.19 → 0.0.21

package/example/App.vue

@@ -1,156 +1,43 @@
 <template>
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
-    <p>Ниже представлены все компоненты библиотеки с примерами их использования.</p>
     <section>
-     <base-site-input
-        id="phone-input"
-        v-model="phoneNumber"
-        size="large"
-        placeholder="Введите номер телефона"
-        :error="phoneError"
-        hint="Номер телефона должен быть не менее 5 символов"
-      />
-    </section>
-    <section>
-      <h2>BaseBadgeGroup.vue</h2>
-
-      <base-badge-group
-        size="medium"
-        color="primary"
-        badge-position="right"
-      >
-        <template #badge-text-container>
-          New feature
-        </template>
-        <template #badge-text>
-          We’ve just released a new feature
-        </template>
-      </base-badge-group>
-      <base-badge-group
-        size="large"
-        color="gray"
-        arrowRightIcon
-      >
-        <template #badge-text-container>
-          New feature
-        </template>
-        <template #badge-text>
-          We’ve just released a new feature
-        </template>
-      </base-badge-group>
-    </section>
-    <section>
-      <h2>BaseBadge.vue</h2>
-      <base-badge
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
         size="extra-small"
-        color="primary"
-        class="badge-example"
-        closable
-      >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
         size="small"
-        color="gray"
-        class="badge-example"
-        has-dot
-      >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
         size="medium"
-        color="error"
-        class="badge-example"
-        arrow-up-icon
-      >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
-        size="large"
-        color="warning"
-        class="badge-example"
-        arrow-right-icon
-      >
-        <template #text>Пример бейджа</template>
-      </base-badge>
-      <base-badge
+      />
+      <br/>
+      <base-segmented-buttons
+        v-model="currentSlide"
+        :options="options"
         size="large"
-        color="success"
-        class="badge-example"
-      >
-        <template #text>
-          <base-icon size="custom" name="help"></base-icon>
-        </template>
-      </base-badge>
-    </section>
-
-    <section>
-      <h2>BaseUpload.vue</h2>
-      <base-upload
-      :accepted-formats="accept"
-      >
-      <template #title>my title</template>
-      </base-upload>
-    </section>
-
-    <section>
-      <div>
-    <base-swiper
-      :images="[
-        'https://i0.wp.com/vasilemovileanu.com/wp-content/uploads/2018/09/Autumn.-2001.-Oil-on-canvas-65-x-60-cm.jpg?fit=1231%2C1400&ssl=1',
-        'https://i.pinimg.com/originals/00/1b/7b/001b7bc4a4cd9132918accae2c7d5c23.png',
-        'https://i.pinimg.com/736x/90/71/bc/9071bcfb179dafd923d0f90653338ea1.jpg'
-      ]"
-      :paginationSettings="{ type: 'dotsWithBackground', color: 'primary' }"
-      v-model:current-slide="currentSlide"
-    />
-      <!-- :autoplay="true"
-      :autoplay-interval="2000" -->
-  </div>
-  <section>
-  medium size
-    <base-textarea class="text-area" size="medium" placeholder="test"></base-textarea>
-  </section>
-    </section>
-    <section style="height: 300px;">
-    <p></p>
-    <base-textarea class="text-area" size="custom" placeholder="test"></base-textarea>
-    </section>
-
-    <section>
-      <div>
-        <base-button @click="openModal">Открыть модал</base-button>
-      </div>
+      />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-import { useModal } from '../src/composables/useModal';
-import MyCustomModal from './MyCustomModal.vue';
-
-const accept = ['.jpg', '.pdf']
-const phoneNumber = ref('');
-const phoneError = ref('');
-watch(phoneNumber, (newValue) => {
-  console.log('Новый номер телефона:', newValue.length);
-  if (newValue.length > 17) {
-    console.log('Номер телефона должен быть не менее 5 символов');
-    phoneError.value = 'Некорректный номер телефона';
-  } else {
-    console.log('Номер телефона корректен');
-    phoneError.value = '';
-  }
-});
-
-const modal = useModal();
+import { ref } from 'vue';
 
-const openModal = () => {
-  modal.open('myModal', { closable: true }, MyCustomModal);
-};
+const options = [
+  { value: '0', label: 'Компоненты', disabled: true },
+  { value: '1', label: 'Композиции' },
+  { value: '2', label: 'Стили' },
+];
 
-const currentSlide = ref(0);
+const currentSlide = ref('0');
 </script>
 
 <style lang="scss" scoped>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "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 & {