its_ui_vite 0.0.2 → 0.0.4

package/src/pages/index.vue

@@ -351,24 +351,88 @@
       <div class="table__item table__title">
         Tabs
       </div>
-      <CTabs @tabChange="log" :activeId="4756500" :tabs="[
-        {
-          id: 2,
-          text: 'tab 1'
-        },
-        {
-          id: 47565,
-          text: 'tab 2'
-        },
-        {
-          id: 'jj889',
-          text: 'tab 3'
-        },
-        {
-          id: 4756500,
-          text: 'tab 4'
-        }
-      ]" />
+      <div class="table">
+
+        <div class="table__col">
+          <div class="table__item">
+            <CTabs @tabChange="log" :activeId="null" :tabs="null" />
+          </div>
+
+          <div class="table__item">
+            <div style="max-width: 600px; white-space: nowrap;">
+              <CTabs
+                @tabChange="log"
+                :scroll="false"
+                :activeId="4756500"
+                :tabs="[
+                  {
+                    value: 2,
+                    text: 'tab 1'
+                  },
+                  {
+                    value: 47565,
+                    text: 'tab 2 Lorem Ipsum is simply dummy text of the printing'
+                  },
+                  {
+                    value: 'jj889',
+                    text: 'tab 3'
+                  },
+                  {
+                    value: 4756500,
+                    text: 'big tab 4 big tab 4'
+                  }
+                ]"
+              />
+            </div>
+          </div>
+
+          <div class="table__item">
+            <div style="max-width: 500px; white-space: nowrap;">
+              <CTabs
+                @change="log"
+                animationType="worm"
+                :scroll="true"
+                :activeId="4756500"
+                :tabs="[
+                  {
+                    value: 2,
+                    text: 'tab 1'
+                  },
+                  {
+                    value: 47565,
+                    text: 'tab 2 Lorem Ipsum is simply dummy text of the printing'
+                  },
+                  {
+                    value: 'jj889',
+                    text: 'tab 3'
+                  },
+                  {
+                    value: 4756500,
+                    text: 'big tab 4 big tab 4'
+                  },
+                  {
+                    value: 'jj889--',
+                    text: 'tab 3 Lorem Ipsum is'
+                  },
+                  {
+                    value: 47565099990,
+                    text: 'big tab 4 big tab 4 Lorem Ipsum is'
+                  }
+                ]"
+              />
+            </div>
+          </div>
+          <div class="table__item">
+            <div class="">
+              <CButton @click.native="toggleTabs">
+                toggle tabs
+              </CButton>
+            </div>
+            <CTabs @change="log" :activeId="tabs.activeId" :tabs="tabs.tabs" />
+          </div>
+        </div>
+
+      </div>
     </div>
     <!-- ./tabs -->
 
@@ -388,6 +452,10 @@
             <div class="table__item">
               <CInput v-model="inpFocus" status="focus" />
             </div>
+
+            <div class="table__item">
+              <CInput v-model="inpFocus" :disabled="true" status="focus" />
+            </div>
           </div>
           <!-- ./col -->
 
@@ -402,6 +470,22 @@
             </div>
           </div>
           <!-- ./col -->
+
+          <!-- col -->
+          <div class="table__col">
+            <div class="table__item">
+              <CInput v-model="inpSuccess" :status="successStatus"/> 
+            </div>
+
+            <div class="table__item">
+              <CInput v-model="inpError" size="md" :status="errorStatus" /> 
+            </div>
+
+            <div class="table__item">
+              <CInput v-model="inpError" size="sm" :status="errorStatus" /> 
+            </div>
+          </div>
+          <!-- ./col -->
         </div>
       </div>
     </div>
@@ -415,16 +499,17 @@
         </div>
         <div class="table">
           <!-- col -->
-          <div class="table__col">
+          <div class="table__col checkboxes">
             <div class="table__item">
-              <CCheckbox v-model:checked="checkboxes.check_1">
-                {{ checkboxes.check_1 ? 'checked' : 'default' }}
+              <CCheckbox v-model="checkboxes.checkbox_1">
+                default: {{ checkboxes.checkbox_1 ? 'true' : 'false' }}
               </CCheckbox> 
-              
             </div>
 
             <div class="table__item">
-              <CCheckbox v-model:checked="checkboxes.check_2" :text="`${checkboxes.check_2 ? 'checked' : 'default'}`" /> 
+              <CCheckbox :modelValue="true" v-model="checkboxes.checkbox_2"> 
+                checked: {{ checkboxes.checkbox_2 ? 'true' : 'false' }}
+              </CCheckbox>
             </div>
             
             <div class="table__item">
@@ -434,29 +519,29 @@
           <!-- ./col -->
 
           <!-- col -->
-          <div class="table__col">
+          <div class="table__col checkboxes">
             <div class="table__item">
-              <CCheckbox variant="radio" v-model:checked="checkboxes.radio_1" :text="checkboxes.radio_1 ? 'checked' : 'default'" /> 
+              <CCheckbox variant="radio" name="CCheckbox_radio" value="radio_1" text="default" v-model="checkboxes.radio" /> 
             </div>
 
             <div class="table__item">
-              <CCheckbox variant="radio" v-model:checked="checkboxes.radio_2" :text="checkboxes.radio_2 ? 'checked' : 'default'" /> 
+              <CCheckbox variant="radio" name="CCheckbox_radio" value="radio_2" text="checked" v-model="checkboxes.radio" /> 
             </div>
-            
+
             <div class="table__item">
-              <CCheckbox variant="radio" :disabled="true" text="disabled" />
+              <CCheckbox variant="radio" :disabled="true" :text="checkboxes.radio" />
             </div>
           </div>
           <!-- ./col -->
 
           <!-- col -->
-          <div class="table__col">
+          <div class="table__col checkboxes">
             <div class="table__item">
               <CCheckbox variant="toggle" text="default" /> 
             </div>
 
             <div class="table__item">
-              <CCheckbox variant="toggle" :checked="true" text="checked" /> 
+              <CCheckbox variant="toggle" :modelValue="true" text="checked" /> 
             </div>
             
             <div class="table__item">
@@ -479,24 +564,7 @@
           <!-- col -->
           <div class="table__col">
             <div class="table__item">
-              <CSelect :options="[
-                {
-                  id: 2,
-                  text: 'btn 1'
-                },
-                {
-                  id: 47565,
-                  text: 'btn 2'
-                },
-                {
-                  id: 'jj889',
-                  text: 'btn 3'
-                },
-                {
-                  id: 4756500,
-                  text: 'btn 4'
-                },
-              ]" />
+              <CSelect @change="(evt) => log(['CSelect default', ...evt])" v-model="VModelOption" :options="option" />
             </div>
           </div>
           <!-- ./col -->
@@ -505,43 +573,85 @@
           <div class="table__col">
             
             <div class="table__item">
-              <CSelect variant="multiple" :options="[
+              <CSelect variant="multiple" @change="(evt) => log(['CSelect multiple', ...evt])" :options="[
                 {
-                  id: 2,
+                  value: 2,
                   text: 'btn 1'
                 },
                 {
-                  id: 47565,
+                  value: 47565,
                   text: 'btn 2'
                 },
                 {
-                  id: 'jj889',
+                  value: 'jj889',
                   text: 'btn 3'
                 },
                 {
-                  id: 4756500,
+                  value: 4756500,
                   text: 'btn 4'
                 },
                 {
-                  id: 12,
+                  value: 12,
                   text: 'btn 5'
                 },
                 {
-                  id: 475651,
+                  value: 475651,
                   text: 'btn 6'
                 },
                 {
-                  id: 'jj8891',
+                  value: 'jj8891',
                   text: 'btn 7'
                 },
                 {
-                  id: 4756510,
+                  value: 4756510,
                   text: 'btn 8'
                 }
               ]" />
             </div>
           </div>
           <!-- ./col -->
+
+          <!-- col -->
+          <div class="table__col">
+            <div class="table__item">
+              <CSelect @change="(evt) => log(['CSelect default', ...evt])" :autocomplete="true" size="md" :options="[
+                {
+                  value: 2,
+                  text: 'btn 1'
+                },
+                {
+                  value: 47565,
+                  text: 'btn 2'
+                },
+                {
+                  value: 'jj889',
+                  text: 'btn 3'
+                },
+                {
+                  value: 4756500,
+                  text: 'btn 4'
+                },
+              ]" />
+            </div>
+          </div>
+          <!-- ./col -->
+
+          <!-- col -->
+          <div class="table__col">
+            
+            <div class="table__item">
+              <CSelect variant="multiple" @change="(evt) => log(['CSelect multiple', ...evt])" size="sm" :select-all="true" :options="option.slice(-2)" v-model="VModelOption" />
+            </div>
+
+            <div class="table__item">
+              <CSelect variant="multiple" @change="(evt) => log(['CSelect multiple', ...evt])" size="sm" :select-all="true" :options="option" v-model="VModelOption" />
+            </div>
+
+            <div class="table__item">
+              <CSelect @change="(evt) => log(['CSelect default', ...evt])" size="sm" :select-all="true" :disabled="true" :options="option" v-model="VModelOption" />
+            </div>
+          </div>
+          <!-- ./col -->
         </div>
       </div>
     </div>
@@ -563,13 +673,45 @@
                 </template>
               </CTooltip>
             </div>
+
+            <div class="table__item">
+              <CTooltip position="top_left" style="white-space: nowrap;">
+                <template #content>
+                  Text helper
+                </template>
+              </CTooltip>
+            </div>
+
+            <div class="table__item">
+              <CTooltip position="top_right" style="white-space: nowrap;">
+                <template #content>
+                  Text helper
+                </template>
+              </CTooltip>
+            </div>
           </div>
           <!-- ./col -->
 
           <!-- col -->
           <div class="table__col">
             <div class="table__item">
-              <CTooltip style="white-space: nowrap;" variant="bottom">
+              <CTooltip style="white-space: nowrap;" position="bottom">
+                <template #content>
+                  Text helper
+                </template>
+              </CTooltip>
+            </div>
+
+            <div class="table__item">
+              <CTooltip position="bottom_left" style="white-space: nowrap;">
+                <template #content>
+                  Text helper
+                </template>
+              </CTooltip>
+            </div>
+
+            <div class="table__item">
+              <CTooltip position="bottom_right" style="white-space: nowrap;">
                 <template #content>
                   Text helper
                 </template>
@@ -673,31 +815,71 @@ export default {
       inpFocus: 'focus',
       inpSuccess: 'success',
       inpError: 'error',
-      
-      checkboxes: {
-        check_1: false,
-        check_2: true,
 
-        radio_1: false,
-        radio_2: true,
+      isToggleTabs: true,
 
-        toggle_1: false,
-        toggle_2: true,
-      },
+      option: [
+        {
+          value: 2,
+          text: 'Регулируемый железнодорожный переезд без дежурного'
+        },
+        {
+          value: 47565,
+          text: 'btn 2'
+        },
+        {
+          value: 'jj889',
+          text: 'btn 3'
+        },
+        {
+          value: 4756500,
+          text: 'btn 4'
+        },
+        // {
+        //   value: 12,
+        //   text: 'btn 5'
+        // },
+        // {
+        //   value: 475651,
+        //   text: 'btn 6'
+        // },
+        // {
+        //   value: 'jj8891',
+        //   text: 'btn 7'
+        // },
+        // {
+        //   value: 4756510,
+        //   text: 'btn 8'
+        // }
+      ],
+      VModelOption: [
+        'jj889',
+      ],
 
       showBlock: {
         btn: true,
         tabs: true,
         input: true,
         checkbox: true,
-      }
+      },
+
+      checkboxes: {
+        checkbox_1: false,
+        checkbox_2: true,
+
+        radio: 'radio_2',
+      },
     }
   },
 
   methods: {
     log(e) {
       console.log('log', e);
-    }
+    },
+
+    toggleTabs() {
+      this.isToggleTabs = !this.isToggleTabs;
+    },
   },
 
   computed: {
@@ -706,7 +888,43 @@ export default {
     },
     successStatus() {
       return this.inpSuccess === 'success' ? 'success' : 'static';
-    } 
+    },
+
+    tabs() {
+      return this.isToggleTabs ? {
+        activeId: 'jj889',
+        tabs: [
+          {
+            value: 2,
+            text: 'v1 tab 1'
+          },
+          {
+            value: 47565,
+            text: 'v1 tab 2'
+          },
+          {
+            value: 'jj889',
+            text: 'v1 tab 3'
+          },
+        ]
+      } : {
+        activeId: 980987,
+        tabs: [
+          {
+            value: 2,
+            text: 'variant 2  tab 1'
+          },
+          {
+            value: 980987,
+            text: 'variant 2 tab 2'
+          },
+          {
+            value: 'jj889',
+            text: 'variant 2 tab 3'
+          },
+        ]
+      }
+    },
   },
 
   components: {
@@ -751,6 +969,12 @@ body {
   &__col {
     display: flex;
     flex-direction: column;
+
+    &.checkboxes {
+      .table__item {
+        justify-content: flex-start;
+      }
+    }
   }
 
   &__item {