plugin-ui-for-kzt 0.0.27 → 0.0.28

package/example/App.vue

@@ -2,17 +2,18 @@
   <div class="demo-page">
     <h1>Plugin UI KZT - Компоненты</h1>
     <section>
-      <base-calendar v-model="testDate" inline />
+      <BaseDefaultPages 
+          title="TUIELT"
+          description="DEGASG"
+          buttonText="Butootn"
+          type="tech-work"
+     />
     </section>
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 
-const testDate = ref(new Date())
-watch(()=> testDate.value,
-  ()=> console.log('test Date', testDate.value)
-)
 </script>
 
 <style lang="scss" scoped>
@@ -52,4 +53,11 @@ watch(()=> testDate.value,
     overflow-x: auto;
   }
 }
+
+.table-data__cell-actions {
+  display: flex;
+            align-items: center;
+            gap: var(--spacing-xs);
+            justify-content: flex-end;
+}
 </style>

package/package.json

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

package/src/components/BaseButton/BaseButton.vue

@@ -30,6 +30,7 @@ const props = withDefaults(defineProps<ICoreButtonProps>(), {
   tag: 'button',
   color: 'primary',
   size: 'medium',
+  onlyIcon: false,
 });
 
 const { componentTag, interactiveClassList } = useKitInteractive(props);
@@ -64,6 +65,7 @@ const classList = computed(() => [
   colorClassList.value,
   stateClassList.value,
   styleClassList.value,
+  { 'base-button--only-icon': props.onlyIcon }
 ]);
 </script>
 
@@ -72,6 +74,8 @@ const classList = computed(() => [
  @import '@/styles/root';
 
 .base-button {
+    $button: &;
+
     @include reset-button;
     @include is-disabled-state;
 
@@ -83,7 +87,12 @@ const classList = computed(() => [
     appearance: none;
     cursor: pointer;
     user-select: none;
-    transition: all var(--transition);
+    transition: 
+        background-color var(--transition),
+        color var(--transition),
+        border-color var(--transition),
+        box-shadow var(--transition),
+        opacity var(--transition);
 
 
     &.--is-loading {
@@ -105,6 +114,11 @@ const classList = computed(() => [
         font: var(--typography-text-s-medium);
         border-radius: var(--corner-radius-xs);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 32px;
+        }
+
        .loader__circle-icon {
             width: 20px;
             height: 20px;
@@ -118,6 +132,11 @@ const classList = computed(() => [
         font: var(--typography-text-m-medium);
         border-radius: var(--corner-radius-s);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 40px;
+        }
+
         .loader__circle-icon {
             width: 20px;
             height: 20px;
@@ -131,6 +150,11 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 48px;
+        }
+
         .loader__circle-icon {
             width: 24px;
             height: 24px;
@@ -144,6 +168,11 @@ const classList = computed(() => [
         font: var(--typography-text-l-medium);
         border-radius: var(--corner-radius-m);
 
+        #{$button}--only-icon {
+            padding: 0;
+            width: 56px;
+        }
+
         .loader__circle-icon {
             width: 32px;
             height: 32px;

package/src/components/BaseDefaultPages/BaseDefaultPages.vue

@@ -33,10 +33,18 @@
 import { computed } from 'vue';
 import BaseButton from '../BaseButton/BaseButton.vue';
 import type { IDefaultPagesProps } from '../../types/default-pages';
+import techWorkImage from '../../assets/tech-work.png';
+import error404Image from '../../assets/404.png';
 
 const props = defineProps<IDefaultPagesProps>(); 
 
-const imagePath = computed(()=> require(`@/assets/${props.type}.png`))
+const imagePath = computed(() => {
+  const images:Record<string, any> = {
+    'tech-work': techWorkImage,
+    '404': error404Image
+  };
+  return images[props.type] || '';
+});
 const imageContainer = computed<string[]>(()=> [
     `base-default-pages__image-container--${props.type}`
 ])

package/src/images.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.jpeg' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.gif' {
+    const value: string;
+    export default value;
+  }
+  
+  declare module '*.webp' {
+    const value: string;
+    export default value;
+  }

package/src/types/button.d.ts

@@ -1,6 +1,6 @@
 import type { ICoreColor, ICoreInteractive, ICoreSize, ICoreState, ICoreStyle } from './utils';
 
-export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle;
+export type ICoreButtonProps = ICoreSize & ICoreColor & ICoreInteractive & ICoreState & ICoreStyle & { onlyIcon?: boolean };
 
 interface IOptionButtonSegment {
     label: string;