@avakhula/ui 0.0.150 → 0.0.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.150",
+  "version": "0.0.153",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",

package/src/App.vue

@@ -1,25 +1,31 @@
 <template>
-  <div class="test">
-    <div>
-      <ib-radio value="a" label="Item 1" name="Checkbox" v-bind="{}" />
-      <ib-radio isChecked style="margin-left: 15px" value="b" label="Item 2" name="Checkbox" v-bind="{}" />
-    </div>
-  </div>
+  <ib-form-group class="form-group">
+    <ib-label for=email required>
+      Email address
+    </ib-label>
+
+    <ib-input required autofocus type="email" id="email" name="email" ref="email"
+      placeholder="Enter your email address" />
+  </ib-form-group>
+
+  <ib-form-group class="form-group">
+    <ib-label for=password required>
+      Password
+    </ib-label>
+
+    <ib-input required autofocus type="password" id="password" name="password" />
+  </ib-form-group>
 </template>
 
 <script>
-import IbRadio from "./components/Form/Radio/Radio.vue";
+import IbInput from "./components/Form/Input/Input.vue"
+import IbLabel from "./components/Form/Label/Label.vue"
+import IbFormGroup from "./components/Form/FormGroup/FormGroup.vue"
+
 
 export default {
   components: {
-    IbRadio
+    IbInput, IbLabel, IbFormGroup
   }
 }
-
-</script>
-
-<style>
-.test {
-  padding-top: 110vh;
-}
-</style>
+</script>

package/src/components/Form/Input/Input.vue

@@ -13,6 +13,7 @@
         @input="onInput($event)"
         @blur="onBlur($event)"
         @focus="onFocus($event)"
+        @keypress.stop
       />
 
       <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
@@ -20,6 +21,7 @@
       <ib-icon-button
         kind="ghost"
         class="button-clear"
+        prevent-default
         :disabled="readonly"
         :help-text="clearButtonMessage"
         @click.prevent="clearInput"
@@ -31,6 +33,7 @@
       <ib-icon-button
         kind="ghost"
         class="toggle-password"
+        prevent-default
         :disabled="readonly"
         :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
         @click.prevent="toggleShowPassword"
@@ -49,6 +52,7 @@
       >
         <template #trigger>
           <ib-icon-button
+            prevent-default
             :help-text="settingsButtonMessage"
             class="options-trigger"
             kind="ghost"
@@ -228,6 +232,9 @@ export default {
     value(newVal) {
       this.actualValue = newVal;
     },
+    disabled(val) {
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, val);
+    },
   },
   components: {
     IbAlert,

package/src/components/Form/Label/Label.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="classes">
+  <label :class="classes" :for="for">
     <span v-if="required" class="required">* </span>
     <slot></slot>
 
@@ -24,6 +24,9 @@ import IbIcon from "../../Icon.vue";
 export default {
   name: "IbLabel",
   props: {
+    for: {
+      type: String,
+    },
     required: {
       type: Boolean,
       default: false,
@@ -36,6 +39,16 @@ export default {
       type: String,
     },
   },
+  mounted() {
+    // this.$globalEvents.$on(`label:disabled:${this.for}`, (value) => {
+    //   this.disabled = value;
+    // });
+  },
+  data() {
+    return {
+      disabled: false,
+    };
+  },
   computed: {
     classes() {
       const classList = ["ib-label"];
@@ -44,6 +57,10 @@ export default {
         classList.push("has-info-text");
       }
 
+      if (this.disabled) {
+        classList.push("label-disabled");
+      }
+
       return classList;
     },
   },
@@ -74,6 +91,16 @@ export default {
     align-items: center;
   }
 
+  &.label-disabled {
+    color: $neutral-500;
+
+    .info-button {
+      .ib-icon {
+        color: $neutral-500;
+      }
+    }
+  }
+
   .info-button {
     display: inline-block;
     margin-left: 3px;

package/src/components/Pagination/pagination.scss

@@ -25,7 +25,7 @@
 }
 
 .report-controls {
-     display: flex;
+    display: flex;
     justify-content: space-between;
     align-items: center;
 
@@ -62,7 +62,6 @@
       input[type=number] {
         -moz-appearance: textfield;
       }
-
     }
 
     .button-prev {
@@ -87,13 +86,12 @@
     .icon-button-wrapper.button-prev {
       &.disabled {
         pointer-events: none;
-        
+
         button {
           color: $neutral-500;
         }
       }
     }
-    
 
     .pagination-wrapper {
       display: flex;
@@ -101,14 +99,13 @@
       margin: 0;
       position: relative;
 
-      
-
       .pagination-item {
         list-style: none;
         @include Ib-H4-medium;
         margin: 0 5px;
         height: 36px;
-        width: 36px;
+        min-width: 36px;
+        width: fit-content;
         background: $gray-100;
         border-radius: 4px;
         @include Ib-H4-medium;
@@ -117,7 +114,7 @@
         &.dots-left {
           position: relative;
           margin-left: 29px;
-  
+
           &::before {
             content: '...';
             position: absolute;
@@ -128,13 +125,12 @@
             transform: translateX(-50%);
             width: 14px;
           }
-  
         }
 
         &.dots-right {
           position: relative;
           margin-right: 29px;
-  
+
           &::after {
             content: '...';
             position: absolute;
@@ -145,7 +141,6 @@
             transform: translateX(50%);
             width: 14px;
           }
-  
         }
 
         &.active button {
@@ -155,7 +150,7 @@
 
         button {
           height: inherit;
-          width: inherit;
+          width: 100%;
           border: none;
           background: $gray-100;
           border-radius: 4px;
@@ -171,7 +166,7 @@
             color: $blue-700;
             background: $blue-100;
           }
-    
+
           &:active {
             border-color: transparent;
             color: $blue-900;
@@ -181,7 +176,6 @@
           &:focus {
             @include focus(2px);
           }
-
         }
       }
     }

package/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-3920d97c51b8ad2521918fb1205babd22b0ed3d7

@@ -1 +0,0 @@
-{"value":{"id":"kGkbBgDq7MDeYMZ2Nc7gM","lastUsed":1690197070909},"type":"Object","created":"2023-07-24T11:11:10.910Z","ttl":0}

package/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-43fdebe5fc35e4e9fabee9a83c7faea931b05ea0

@@ -1 +0,0 @@
-{"value":1690197067886,"type":"Number","created":"2023-07-24T11:11:07.886Z","ttl":0}

package/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-64f3ef45467d4722d7a1f900d5dd06071eac4f63

@@ -1 +0,0 @@
-{"value":{"success":true,"cached":false,"data":{"latest":{"version":"7.1.0","info":{"plain":"Storybook 7.1 is here! 🎉\n\n- 🏄‍♀️ [**In-app onboarding**](https://storybook.js.org/blog/in-app-tour-for-new-users/) to help you set up new projects\n- 💅 [**Zero-config styling support**](https://storybook.js.org/blog/zero-config-support-for-tailwind-mui-styled-components-and-emotion/) for major libraries\n- 🗃️ [**API reference documentation**](https://storybook.js.org/blog/docs-updates/) and TypeScript-first snippets\n- 📇 [**Table of Contents for docs**](https://storybook.js.org/docs/7.1/react/writing-docs/autodocs#generate-a-table-of-contents)\n- 🎨 [**Figma** **Design addon**](https://github.com/storybookjs/addon-designs) official support\n- 📗 **Vue3 source snippets** and reactivity improvements\n- 💯 **Hundreds more** fixes and improvements\n\n7.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `7.1.0-alpha.*`, `7.1.0-beta.*`, and `7.1.0-rc.*` for the full list of changes.\n\nFor a better upgrade experience, please use one of the following commands:\n\nnpm or yarn 1:\n`npx storybook@latest upgrade`\n\npnpm:\n`pnpm dlx storybook@latest upgrade`\n\nyarn berry:\n`yarn dlx storybook@latest upgrade`"}},"next":{"version":"7.2.0-alpha.0","info":{"plain":"- Angular: Make enableProdMode optional - [#23489](https://github.com/storybookjs/storybook/pull/23489), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Features: For 7.2 - [#23446](https://github.com/storybookjs/storybook/pull/23446), thanks [@ndelangen](https://github.com/ndelangen)!\n- Svelte-vite: Improve error when sveltekit plugins found in non-sveltekit projects - [#23472](https://github.com/storybookjs/storybook/pull/23472), thanks [@yannbf](https://github.com/yannbf)!\n- Svelte-vite: Remove unused import - [#23475](https://github.com/storybookjs/storybook/pull/23475), thanks [@yannbf](https://github.com/yannbf)!"}}},"time":1690197066594},"type":"Object","created":"2023-07-24T11:11:07.118Z","ttl":0}

package/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-d227207cad914a4f490b34ea9dfafe6ab1e6a0ab

@@ -1 +0,0 @@
-{"type":"Undefined","created":"2023-07-24T11:11:10.513Z","ttl":0}

package/.cache/storybook/dev-server/a5a8bf6e622aef57065c6498611f40c911543d7d-f086b87885981c04ce7a583ff90a49313de83de7

@@ -1 +0,0 @@
-{"value":{"boot":{"body":{"eventType":"boot","eventId":"T80WNSRsoCZkPnq1TWlUc","sessionId":"kGkbBgDq7MDeYMZ2Nc7gM","payload":{"eventType":"dev"},"context":{"inCI":false,"isTTY":true,"cliVersion":"7.1.0"}},"timestamp":1690197067119},"version-update":{"body":{"eventType":"version-update","eventId":"VdTA2WWuKA17-2gX6E_Qe","sessionId":"kGkbBgDq7MDeYMZ2Nc7gM","metadata":{"generatedAt":1690197067920,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.5.1"},"features":{"storyStoreV7":true},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","storybookVersion":"7.1.0","storybookVersionSpecifier":"^7.1.0","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.1.0"},"@storybook/testing-library":{"version":"0.2.0"},"@storybook/vue3":{"version":"7.1.0"},"@storybook/vue3-vite":{"version":"7.1.0"},"eslint-plugin-storybook":{"version":"0.6.13"},"storybook":{"version":"7.1.0"}},"addons":{"@storybook/addon-docs":{"version":"7.1.0"},"@storybook/addon-links":{"version":"7.1.0"},"@storybook/addon-essentials":{"version":"7.1.0"},"@storybook/addon-interactions":{"version":"7.1.0"},"@storybook/addon-a11y":{"version":"7.1.0"},"@storybook/addon-mdx-gfm":{"version":"7.1.0"}}},"payload":{},"context":{"inCI":false,"isTTY":true,"cliVersion":"7.1.0","anonymousId":"b7c813caa4cfbc9fa043b566d041be374aa5a7a7880900529f85a724d5eed236"}},"timestamp":1690197068558},"error":{"body":{"eventType":"error","eventId":"uf6Jupc1GJu7nnLdu29Oa","sessionId":"kGkbBgDq7MDeYMZ2Nc7gM","metadata":{"generatedAt":1690197067920,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"packageManager":{"type":"npm","version":"9.5.1"},"features":{"storyStoreV7":true},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","storybookVersion":"7.1.0","storybookVersionSpecifier":"^7.1.0","language":"javascript","storybookPackages":{"@storybook/addon-actions":{"version":"7.1.0"},"@storybook/testing-library":{"version":"0.2.0"},"@storybook/vue3":{"version":"7.1.0"},"@storybook/vue3-vite":{"version":"7.1.0"},"eslint-plugin-storybook":{"version":"0.6.13"},"storybook":{"version":"7.1.0"}},"addons":{"@storybook/addon-docs":{"version":"7.1.0"},"@storybook/addon-links":{"version":"7.1.0"},"@storybook/addon-essentials":{"version":"7.1.0"},"@storybook/addon-interactions":{"version":"7.1.0"},"@storybook/addon-a11y":{"version":"7.1.0"},"@storybook/addon-mdx-gfm":{"version":"7.1.0"}}},"payload":{"eventType":"dev","error":{"stack":"Error: Could not create/find cache directory\n    at $SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:3584\n    at Array.map (<anonymous>)\n    at wrapManagerEntries ($SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:3422)\n    at getConfig ($SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:5992)\n    at async Promise.all (index 1)\n    at async getData ($SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:4512)\n    at async starter ($SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:7556)\n    at async Module.start ($SNIP/node_modules/@storybook/builder-manager/dist/index.js:1:9838)\n    at async storybookDevServer ($SNIP/node_modules/@storybook/core-server/dist/index.js:113:6556)\n    at async buildDevStandalone ($SNIP/node_modules/@storybook/core-server/dist/index.js:128:2592)","message":"Could not create/find cache directory"},"errorHash":"fcc953fd5b0e3b47f04fc4db6f5be2f939c44fa04809beb08ae2f3666c59a812"},"context":{"inCI":false,"isTTY":true,"cliVersion":"7.1.0","anonymousId":"b7c813caa4cfbc9fa043b566d041be374aa5a7a7880900529f85a724d5eed236"}},"timestamp":1690197070912}},"type":"Object","created":"2023-07-24T11:11:10.912Z","ttl":0}