its_ui_vite 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "its_ui_vite",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "main": "./src/libIndex.js",
   "module": "./src/libIndex.js",
   "files": [

package/src/components/CIcons/CIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="svg" :style="`--svg-size: ${size}px`" v-html="iconHTML">
+  <div class="svg" :style="`--svg-width: ${iconWidth}px; --svg-height: ${iconHeight}px;`" v-html="iconHTML">
 
   </div>
 </template>
@@ -11,6 +11,8 @@ import { TIcon, iconContent } from '../../assets/icon/icons-manifest';
 const prop = withDefaults(defineProps<{
   name: TIcon,
   size?: number,
+  width?: number,
+  height?: number,
 }>(), {
   size: 24
 })
@@ -20,15 +22,23 @@ const iconHTML = computed(() => {
   return iconContent[iconName] || '<span>ico</span>'
 });
 
+const iconWidth = computed(() => {
+  return prop.width  || prop.size
+});
+
+const iconHeight = computed(() => {
+  return prop.height  || prop.size
+});
+
 </script>
 <style lang="scss" scoped>
   .svg {
-    width: var(--svg-size, 20px);
-    height: var(--svg-size, 20px);
+    width: var(--svg-width, 20px);
+    height: var(--svg-height, 20px);
   }
 
   .svg:deep(svg) {
-    width: var(--svg-size, 20px);
-    height: var(--svg-size, 20px);
+    width: var(--svg-width, 20px);
+    height: var(--svg-height, 20px);
   }
 </style>

package/src/components/CScroll2.vue

@@ -30,8 +30,8 @@
 </template>
 
 <script lang="ts" setup>
-import { CClasses } from '../assets/js/helpers' 
-import { ref, onMounted, onUnmounted, computed } from 'vue';
+import { CClasses } from '../assets/js/helpers'
+import { ref, nextTick, onMounted, onUnmounted, computed } from 'vue';
 
 type TProps = {
   scrollY?: number,
@@ -54,30 +54,31 @@ const root = ref<null | HTMLDivElement>(null);
 const content = ref<null | HTMLDivElement>(null);
 const scrollRail = ref<null | HTMLDivElement>(null);
 
-let observer: MutationObserver;
+let resizeObserver: ResizeObserver;
+let mutationObserver: MutationObserver;
 let lockThumbDrag = ref<boolean>(true);
 let isShow = ref<boolean>(false);
 let mousePosition: number = 0;
 
 onMounted(() => {
-  setTimeout(() => {
-    if (!content.value && !content.value) return;
-
-    document.body.addEventListener('mousemove', handleDrag);
-    document.body.addEventListener('mouseup', removeDragThumb);
-    
-    handleContent();
-
-    observer = new MutationObserver(handleContent);
-    observer.observe(content.value, {
-      childList: true,
-      subtree: true,
-    });
-  }, 40);
+  if (!root.value || !content.value) return;
+
+  document.body.addEventListener('mousemove', handleDrag);
+  document.body.addEventListener('mouseup', removeDragThumb);
+
+  resizeObserver = new ResizeObserver(handleContent);
+  resizeObserver.observe(root.value);
+
+  mutationObserver = new MutationObserver(handleContent);
+  mutationObserver.observe(content.value, {
+    childList: true,
+    subtree: true,
+  });
 });
 
 onUnmounted(() => {
-  observer?.disconnect();
+  resizeObserver?.disconnect();
+  mutationObserver?.disconnect();
 
   document.body.removeEventListener('mousemove', handleDrag);
   document.body.removeEventListener('mouseup', removeDragThumb);
@@ -109,11 +110,12 @@ function handleContent() {
   isShow.value = rootHeight < contentHeight;
   if (!isShow.value) return;
 
-  const scrollRailHeight = scrollRail.value?.offsetHeight || 1;
-
-  scrollStyle.value.thumbHeight = scrollRailHeight / (contentHeight / rootHeight);
-  scrollStyle.value.content = 0;
-  scrollStyle.value.thumb = 0;
+  nextTick(() => {
+    const scrollRailHeight = scrollRail.value?.offsetHeight || 1;
+    scrollStyle.value.thumbHeight = scrollRailHeight / (contentHeight / rootHeight);
+    scrollStyle.value.content = 0;
+    scrollStyle.value.thumb = 0;
+  });
 }
 
 function handleDrag(evt: MouseEvent) {

package/src/pages/index.vue

@@ -1981,8 +1981,8 @@ body {
 
 .table-icon {
   display: grid;
-  grid-template-rows: repeat(3, 70px);
-  grid-template-columns: repeat(14, 70px);
+  grid-template-rows: repeat(5, 70px);
+  grid-template-columns: repeat(24, 70px);
 }
 
 .scroll-item {

package/src/stories/CSelect.stories.js

@@ -17,6 +17,14 @@ const manyOptions = [
   { value: 6, text: 'Option 6' },
   { value: 7, text: 'Option 7' },
   { value: 8, text: 'Option 8' },
+  { value: 9, text: 'Option 9' },
+  { value: 10, text: 'Option 10' },
+  { value: 11, text: 'Option 11' },
+  { value: 12, text: 'Option 12' },
+  { value: 13, text: 'Option 13' },
+  { value: 14, text: 'Option 14' },
+  { value: 15, text: 'Option 15' },
+  { value: 16, text: 'Option 16' },
 ];
 
 export default {