plugin-ui-for-kzt 0.0.22 → 0.0.23

package/dist/index.js.LICENSE.txt

@@ -1 +1,16 @@
 /*! #__NO_SIDE_EFFECTS__ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */

package/example/App.vue

@@ -1,43 +1,49 @@
 <template>
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
-    <section>
-      <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 style="display: flex; flex-direction: column; gap: 10px;">
+    <base-upload :enableCrop="true" :crop-texts="{ cancel: 'Cancel', confirm: 'Apply' }" :accepted-formats="accept" :on-update:files="onFilesUpdate" />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, markRaw } from 'vue';
+import TestImage from './TestImage.vue';
 
-const options = [
-  { value: '0', label: 'Компоненты', disabled: true },
-  { value: '1', label: 'Композиции' },
-  { value: '2', label: 'Стили' },
-];
+const accept = ['.png', '.jpg', '.jpeg', '.pdf', '.doc', '.docx'];
 
-const currentSlide = ref('0');
+const uploadedFiles = ref<{ name: string; size: number; file: File }[]>([]);
+
+const onFilesUpdate = (files: typeof uploadedFiles.value) => {
+  uploadedFiles.value = files;
+};
+
+const activeTab = ref(2);
+const options = ref([
+  {
+    title: 'title 1',
+    id: 1,
+    icon: markRaw(TestImage),
+    disabled: true,
+  },
+  {
+    title: 'title 2',
+    id: 2,
+    icon: markRaw(TestImage),
+  },
+  {
+    title: 'title 4',
+    id: 4,
+  },
+  {
+    title: 'title 5',
+    id: 5,
+  },
+  {
+    title: 'title 6',
+    id: 6,
+  },
+])
 </script>
 
 <style lang="scss" scoped>

package/example/TestImage.vue

@@ -0,0 +1,6 @@
+<template>
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M15.7999 2.20999C15.3899 1.79999 14.6799 2.07999 14.6799 2.64999V6.13999C14.6799 7.59999 15.9199 8.80999 17.4299 8.80999C18.3799 8.81999 19.6999 8.81999 20.8299 8.81999C21.3999 8.81999 21.6999 8.14999 21.2999 7.74999C19.8599 6.29999 17.2799 3.68999 15.7999 2.20999Z" fill="currentColor"/>
+        <path d="M20.5 10.19H17.61C15.24 10.19 13.31 8.26 13.31 5.89V3C13.31 2.45 12.86 2 12.31 2H8.07C4.99 2 2.5 4 2.5 7.57V16.43C2.5 20 4.99 22 8.07 22H15.93C19.01 22 21.5 20 21.5 16.43V11.19C21.5 10.64 21.05 10.19 20.5 10.19ZM11.5 17.75H7.5C7.09 17.75 6.75 17.41 6.75 17C6.75 16.59 7.09 16.25 7.5 16.25H11.5C11.91 16.25 12.25 16.59 12.25 17C12.25 17.41 11.91 17.75 11.5 17.75ZM13.5 13.75H7.5C7.09 13.75 6.75 13.41 6.75 13C6.75 12.59 7.09 12.25 7.5 12.25H13.5C13.91 12.25 14.25 12.59 14.25 13C14.25 13.41 13.91 13.75 13.5 13.75Z" fill="currentColor"/>
+    </svg>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plugin-ui-for-kzt",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "plugin-ui for kazaktelekom",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,6 +51,7 @@
     "maska": "^3.1.1",
     "pinia": "^2.3.1",
     "vue": "^3.0.0",
+    "vue-advanced-cropper": "^2.8.9",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   }
 }

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -4,29 +4,25 @@
         :class="classList"
     >
         <div class="base-checkbox__wrapper" @click="handleToggle">
-
-          <div class="base-checkbox__input-wrapper">
-            <input
-              v-model="model"
-              v-bind="inputAttrs"
-              type="checkbox"
-              class="base-checkbox__input"
-            />
-          </div>
-
-            <div class="base-checkbox__icon-wrapper">
-                <base-icon
-                    class="base-checkbox__icon"
-                    name="checkbox"
-                    :size="size"
+            <div class="base-checkbox__input-wrapper">
+                <input
+                    v-model="model"
+                    v-bind="inputAttrs"
+                    type="checkbox"
+                    class="base-checkbox__input"
                 />
+                <div class="base-checkbox__icon-wrapper">
+                    <base-icon
+                        class="base-checkbox__icon"
+                        name="checkbox"
+                        size="custom"
+                    />
+                </div>
             </div>
-
             <div class="base-checkbox__label-wrapper">
-                      <span v-if="label" class="base-checkbox__label">{{ label }}</span>
-
-                      <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
-              </div>
+                <span v-if="label" class="base-checkbox__label">{{ label }}</span>
+                <span v-if="subLabel" class="base-checkbox__sublabel">{{ subLabel }}</span>
+            </div>
         </div>
     </div>
 </template>
@@ -39,42 +35,42 @@ import { useAttrs, computed } from 'vue';
 import BaseIcon from '../BaseIcon/BaseIcon.vue';
 
 const props = withDefaults(defineProps<IBaseRadioProps>(), {
-  size: 'medium',
+    size: 'medium',
 });
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
+    (e: 'update:modelValue', value: boolean): void;
 }>();
 
 const { sizeClassList } = useKitSize(props);
 const { stateClassList, stateAttrs } = useKitState(props);
 
 const model = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+    get: () => props.modelValue,
+    set: (val) => emit('update:modelValue', val),
 });
 
 const attrs = useAttrs();
 
 const inputAttrs = computed(() => {
-  return {
-    ...attrs,
-    ...stateAttrs.value,
-    id: props.id,
-  };
+    return {
+        ...attrs,
+        ...stateAttrs.value,
+        id: props.id,
+    };
 });
 
 function handleToggle() {
-  model.value = !model.value;
+    model.value = !model.value;
 }
 
 const classList = computed(() => [
-  sizeClassList.value,
-  stateClassList.value,
-  {
-    '--is-active': model.value,
-    '--is-readonly': props.readonly,
-  },
+    sizeClassList.value,
+    stateClassList.value,
+    {
+        '--is-active': model.value,
+        '--is-readonly': props.readonly,
+    },
 ]);
 </script>
 
@@ -85,8 +81,6 @@ const classList = computed(() => [
 .base-checkbox {
     $item: &;
 
-    --icon-size: 18px;
-
     &__wrapper {
         display: flex;
         column-gap: 10px;
@@ -99,31 +93,36 @@ const classList = computed(() => [
         pointer-events: none;
     }
 
-    &.--medium-size {
+    &.--small-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-m);
+                column-gap: var(--spacing-s);
             }
 
             &__label {
-                font: var(--typography-text-m-medium);
+                font: var(--typography-text-s-medium);
             }
 
             &__sublabel {
-                font: var(--typography-text-s-regular);
+                font: var(--typography-text-xs-regular);
             }
 
             &__icon-wrapper {
-                width: 32px;
-                height: 32px;
+                width: 20px;
+                height: 20px;
+            }
+
+            &__icon {
+                width: 15px;
+                height: 15px;
             }
         }
     }
 
-    &.--small-size {
+    &.--medium-size {
         #{$item} {
             &__wrapper {
-                column-gap: var(--spacing-s);
+                column-gap: var(--spacing-m);
             }
 
             &__label {
@@ -138,6 +137,37 @@ const classList = computed(() => [
                 width: 24px;
                 height: 24px;
             }
+
+            &__icon {
+                width: 18px;
+                height: 18px;
+            }
+        }
+    }
+
+    &.--large-size {
+        #{$item} {
+            &__wrapper {
+                column-gap: var(--spacing-l);
+            }
+
+            &__label {
+                font: var(--typography-text-m-medium);
+            }
+
+            &__sublabel {
+                font: var(--typography-text-s-regular);
+            }
+
+            &__icon-wrapper {
+                width: 32px;
+                height: 32px;
+            }
+
+            &__icon {
+                width: 22.4px;
+                height: 22.4px;
+            }
         }
     }