its_ui_vite 1.1.9 → 1.1.10

package/package.json

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

package/src/components/CSelect.vue

@@ -29,7 +29,6 @@
         <CScroll2
           ref="list"
           :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
-          :scrollY="scrollY"
           :class="[classes.list, listPosition, {open: isOpen}]"
         >
           <button
@@ -58,11 +57,13 @@
               :is="isMultiple ? CCheckbox : 'div'"
               v-bind.props="getCheckboxProp(item)"
             >
-              <TextTooltip
-                :text="item.text"
-                :line-height="20"
-                :max-text-line="2"
-              />
+              <slot name="option" :item="item">
+                <TextTooltip
+                  :text="item.text"
+                  :line-height="20"
+                  :max-text-line="2"
+                />
+              </slot>
             </component>
           </button>
           <div v-if="foundOptions.length < 1" :class="[classes.option, 'not-found']">
@@ -141,7 +142,6 @@ const transition = 200,
   
 let findValue = ref(''),
   isOpen = ref(props.isOpen || false),
-  scrollY = ref<number>(0),
   root = ref(),
   list = ref(),
   activePlaceholder = ref(props.placeholder),
@@ -225,9 +225,16 @@ const iconInfo = {
 
 const foundOptions = computed(() => {
   const reg = new RegExp(findValue.value.replace(/\W/g, '\\$&'), 'i')
-  scrollY.value = Math.random();
 
-  return props.options.filter(({text}) => text && reg.test(text))
+  return props.options.filter(({ text }) => text && reg.test(text))
+    .map((option) => {
+      const isActive = !!([...activeOptions.value, ...props.modelValue].find((item) => [item.value, item].includes(option.value)));
+
+      return {
+        ...option,
+        active: isActive,
+      }
+    })
 })
 
 watch(() => props.modelValue, (options: TOption[]) => {

package/src/pages/index.vue

@@ -946,7 +946,12 @@
                 v-model="VModelOption"
                 :autocomplete="true"
                 @change_cselect="(evt) => log(['CSelect default', evt])"
-              />
+              >
+              <template #option="{ item }">
+                <span class="option-text">{{ item.text }}</span>
+                <span v-if="item.active" class="option-badge">(активен)</span>
+              </template>
+              </CSelect>
             </div>
           </div>
           <!-- ./col -->

package/src/stories/CIcon.stories.js

@@ -1,54 +1,63 @@
+import { ref } from 'vue';
 import CIcon from '../components/CIcons/CIcon.vue';
 import { iconContent } from '../assets/icon/icons-manifest';
 
+const iconNames = Object.keys(iconContent);
+
 export default {
   title: 'Components/CIcon',
   component: CIcon,
   tags: ['autodocs'],
   argTypes: {
-    size: { control: 'number' },
+    size: { control: { type: 'range', min: 12, max: 96, step: 4 } },
   },
   args: {
     size: 24,
-    name: { 'Home': true },
   },
 };
 
-export const Default = {
-  render: (args) => ({
-    components: { CIcon },
-    setup() { return { args }; },
-    template: `<CIcon v-bind="args" />`,
-  }),
-};
-
-export const LargeIcon = {
-  args: { size: 48, name: { 'Star': true } },
+export const Gallery = {
   render: (args) => ({
-    components: { CIcon },
-    setup() { return { args }; },
-    template: `<CIcon v-bind="args" />`,
-  }),
-};
-
-export const IconGallery = {
-  render: () => ({
     components: { CIcon },
     setup() {
-      const icons = Object.keys(iconContent);
-      return { icons };
+      const icons = iconNames;
+      const size = args.size;
+      return { icons, size };
     },
     template: `
-      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px;">
+      <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px;">
         <div
           v-for="icon in icons"
           :key="icon"
           style="display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 1px solid #333; border-radius: 8px;"
         >
-          <CIcon :name="{[icon]: true}" :size="24" />
+          <CIcon :name="{[icon]: true}" :size="size" />
           <span style="color: #fff; font-size: 10px; text-align: center; word-break: break-all;">{{ icon }}</span>
         </div>
       </div>
     `,
   }),
 };
+
+export const SingleIcon = {
+  argTypes: {
+    icon: {
+      control: 'select',
+      options: iconNames,
+    },
+  },
+  args: {
+    icon: iconNames[0],
+    size: 48,
+  },
+  render: (args) => ({
+    components: { CIcon },
+    setup() { return { args }; },
+    template: `
+      <div style="display: flex; flex-direction: column; align-items: center; gap: 12px;">
+        <CIcon :name="{[args.icon]: true}" :size="args.size" />
+        <span style="color: #fff;">{{ args.icon }}</span>
+      </div>
+    `,
+  }),
+};