@avakhula/ui 0.0.83 → 0.0.85

package/package.json

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

package/src/components/Avatar/Avatar.stories.js

@@ -0,0 +1,23 @@
+import Avatar from "./Avatar.vue";
+import { avatarSizes } from "./constants";
+
+export default {
+  title: "Avatar",
+  component: Avatar,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: Object.values(avatarSizes),
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { Avatar },
+  setup() {
+    return { args };
+  },
+  template: `<avatar v-bind="args"></avatar>`,
+});
+
+export const Default = Template.bind({});

package/src/components/Avatar/Avatar.vue

@@ -21,18 +21,26 @@
 
 <script>
 import IbIcon from "../Icon.vue";
+import { avatarSizes } from "./constants";
+
 export default {
   name: "IbAvatar",
   props: {
-    name: String,
-    src: String,
+    name: {
+      type: String,
+      default: "",
+    },
+    src: {
+      type: String,
+      default: "",
+    },
     userAvatar: {
       type: Boolean,
       default: false,
     },
     size: {
       type: String,
-      default: "m",
+      default: avatarSizes.M,
     },
   },
   computed: {

package/src/components/Avatar/constants.js

@@ -0,0 +1,4 @@
+export const avatarSizes = {
+  M: "m",
+  L: "l",
+};

package/src/components/Modal/Modal.vue

@@ -101,7 +101,7 @@ export default {
     );
 
     document.addEventListener("keydown", (e) => {
-      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation) {
+      if (e.keyCode === ESC_KEY_CODE && !this.stopPropagation && this.active) {
         this.close();
       }
     });

package/src/components/StatusIndicator/icons.js

@@ -1,25 +1,25 @@
 export const icons = {
-  new: `<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="4.5" cy="4.5" r="4" fill="#0369E8"/>
-    </svg>
+  new: `<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle id="Ellipse" cx="5.5" cy="5.5" r="5" fill="#0369E8"/>
+  </svg>
   `,
 
   success: `
-  <svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="4.5" cy="4.5" r="4" fill="#0D7F39"/>
-  </svg>
+  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle id="Ellipse" cx="5.5" cy="5.5" r="5" fill="#0D7F39"/>
+  </svg>  
   `,
 
   error: `
-  <svg width="8" height="9" viewBox="0 0 8 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.30688 6.75114C7.74427 6.10987 8 5.3348 8 4.5C8 2.29086 6.20914 0.5 4 0.5C3.1652 0.5 2.39013 0.755729 1.74885 1.19312L7.30688 6.75114ZM0.693121 2.24885C0.255729 2.89013 0 3.6652 0 4.5C0 6.70914 1.79086 8.5 4 8.5C4.8348 8.5 5.60987 8.24427 6.25114 7.80688L0.693121 2.24885Z" fill="#C8182E"/>
+  <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M9.1336 8.31393C9.68034 7.51234 10 6.5435 10 5.5C10 2.73858 7.76142 0.5 5 0.5C3.9565 0.5 2.98766 0.819661 2.18607 1.3664L9.1336 8.31393ZM0.866401 2.68607C0.319661 3.48766 0 4.4565 0 5.5C0 8.26142 2.23858 10.5 5 10.5C6.0435 10.5 7.01234 10.1803 7.81393 9.6336L0.866401 2.68607Z" fill="#C8182E"/>
   </svg>
   `,
 
   warning: `
-  <svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M5 0.5L10 8.5H0L5 0.5Z" fill="#F1BC19"/>
-  </svg>
+  <svg width="12" height="11" viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6 0.5L12 10.5H0L6 0.5Z" fill="#F1BC19"/>
+  </svg>  
   `,
 
   incomplete: `

package/src/components/TreeSelect/Select.stories.js

@@ -4,90 +4,12 @@ import IbIcon from "../Icon.vue";
 
 export default {
   title: "Form/Select",
-  components: IbSelect,
+  component: IbSelect,
   argTypes: {
     onResize: { action: "resize" },
     onSearch: { action: "search" },
     onSubmit: { action: "submit" },
     onInput: { action: "input" },
-    placeholder: {
-      control: { type: "text" },
-    },
-    searchPlaceholderText: {
-      control: { type: "text" },
-    },
-    clearButtonMessage: {
-      control: { type: "text" },
-    },
-    showClearButton: {
-      control: { type: "boolean" },
-    },
-    isResizable: {
-      control: { type: "boolean" },
-    },
-    name: {
-      control: { type: "text" },
-    },
-    maxSelectedNames: {
-      control: { type: "number" },
-    },
-    isMultiple: {
-      control: { type: "boolean" },
-    },
-    parentAutoCheck: {
-      control: { type: "boolean" },
-    },
-    strings: {
-      control: { type: "object" },
-    },
-    onlyEndNodes: {
-      control: { type: "boolean" },
-    },
-    isRequired: {
-      control: { type: "boolean" },
-    },
-    htmlOptionTitle: {
-      control: { type: "boolean" },
-    },
-    showInputs: {
-      control: { type: "boolean" },
-    },
-    dependency: {
-      control: { type: "text" },
-    },
-    filterId: {
-      control: { type: "text" },
-    },
-    staticPlaceholder: {
-      control: { type: "boolean" },
-    },
-    useSearch: {
-      control: { type: "boolean" },
-    },
-    isWatching: {
-      control: { type: "boolean" },
-    },
-    vertical: {
-      control: { type: "text" },
-    },
-    emptyMessage: {
-      control: { type: "text" },
-    },
-    errorMessage: {
-      control: { type: "text" },
-    },
-    allOptions: {
-      control: { type: "boolean" },
-    },
-    watchClearValue: {
-      control: { type: "boolean" },
-    },
-    isToggle: {
-      control: { type: "boolean" },
-    },
-    alphabetSort: {
-      control: { type: "boolean" },
-    },
   },
 };
 

package/src/directives/tooltip/readme.mdx

@@ -0,0 +1,17 @@
+# TooltipDirectives
+Use the v-tooltip directive on any element or component where you would like a tooltip to appear.
+
+## Usage
+```html
+<script>
+  import { TooltipDirective as Tooltip } from "ib/ui";// change when we deployed on npm
+
+  export default {
+    directives: { Tooltip },
+  };
+</script>
+
+<template>
+  <div v-tooltip="'Tooltip Content'">Hover to me</div>
+</template>
+```

package/src/directives/tooltip/tooltip.stories.js

@@ -0,0 +1,30 @@
+import IbButton from "../../components/Button/Button.vue";
+import { TooltipDirective } from "./tooltip";
+import readme from "./readme.mdx";
+
+export default {
+  title: "directives/tooltip",
+  component: TooltipDirective,
+  parameters: {
+    docs: {
+      page: readme,
+    },
+  },
+};
+
+const Template = (args) => ({
+  components: { IbButton },
+  directives: { tooltip: TooltipDirective },
+  setup() {
+    return { args };
+  },
+  template: `<ib-button v-tooltip="'Tooltip Content'" v-bind="args">Hover to me</ib-button>`,
+});
+
+export const Default = Template.bind({});
+Default.decorators = [
+  () => ({
+    template:
+      '<div style="display: flex; align-items:center; justify-content: center; width: 400px; height: 400px; margin: 0 auto"><story /></div>',
+  }),
+];