@avakhula/ui 0.0.14 → 0.0.16

package/src/components/Form/Textarea/readme.mdx

@@ -1,14 +1,13 @@
 # IbTextArea
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as TextareaStories from "./Textarea.stories";
 
 The IbTextarea component is a customizable textarea input that provides additional features such as character count and error messages. It can be used to receive and display large amounts of text input from the user.
 
 ### Default
 
-<Canvas>
-  <Story id="form-textarea--default" />
-</Canvas>
+<Canvas of={TextareaStories.Default}/>
 
 ### Props
 
@@ -33,13 +32,7 @@ This component has no slots.
 | blur       | String     | Emitted when the input loses focus. The payload is the current input value. |
 
 ### Disabled
-
-<Canvas>
-  <Story id="form-textarea--disabled" />
-</Canvas>
+<Canvas of={TextareaStories.Disabled}/>
 
 ### Width Form Group
-
-<Canvas>
-  <Story id="form-textarea--width-form-group" />
-</Canvas>
+<Canvas of={TextareaStories.WidthFormGroup}/>

package/src/components/Form/Toggle/readme.mdx

@@ -1,6 +1,7 @@
 # IbToogle
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as ToggleStories from "./Toggle.stories";
 
 A toggle is used to quickly switch between two possible states. They are commonly used for “on/off” switches.
 
@@ -9,10 +10,7 @@ A toggle is used to quickly switch between two possible states. They are commonl
 Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.
 
 ### Default
-
-<Canvas>
-  <Story id="form-toggle--default" />
-</Canvas>
+<Canvas of={ToggleStories.Default}/>
 
 ### Props
 

package/src/components/IconButton/readme.mdx

@@ -1,6 +1,7 @@
 # IbIconButton
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as IconButtonStories from "./IconButton.stories";
 
 Icon buttons allow users to take actions, and make choices, with a single tap. The icon Button should always have a tooltip.
 
@@ -42,25 +43,14 @@ Do not use buttons as navigational elements. Instead, use [links](?path=/story/l
 
 ### Default
 
-<Canvas>
-  <Story id="icon-button--default" />
-</Canvas>
+<Canvas of={IconButtonStories.Default}/>
 
 ### Rounded
-
-<Canvas>
-  <Story id="icon-button--rounded-button" />
-</Canvas>
+<Canvas of={IconButtonStories.RoundedButton}/>
 
 ### With tooltip
-
-<Canvas>
-  <Story id="icon-button--button-with-tooltip" />
-</Canvas>
+<Canvas of={IconButtonStories.ButtonWithTooltip}/>
 
 
 ### All sizes
-
-<Canvas>
-  <Story id="icon-button--sizes" />
-</Canvas>
+<Canvas of={IconButtonStories.Sizes}/>

package/src/components/Modal/readme.mdx

@@ -1,6 +1,7 @@
 # IbModal
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as ModalStories from "./Modal.stories";
 
 Modals focus the user’s attention exclusively on one task or piece of information via a window that sits on top of the page content.
 
@@ -72,6 +73,4 @@ Modal content should never scroll horizontally; instead, use a larger size modal
 
 ### Default
 
-<Canvas>
-  <Story id="modal--default" />
-</Canvas>
+<Canvas of={Modal.Default}/>

package/src/components/Popover/readme.mdx

@@ -1,5 +1,6 @@
 # IbPopover
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as PopoverStories from "./Popover.stories";
 
 A popover is a layer that pops up over all other elements on a page and has wide variation of passive content to display.
 
@@ -20,9 +21,8 @@ A popover is controlled by a trigger button. By default, we use an icon button t
 
 ### Usage
 For correct use component `<ib-popover>`, need to insert inside the element that should show this `<ib-popover>` when hovering and focusing.
-<Canvas>
-  <Story id="popover--default" />
-</Canvas>
+
+<Canvas of={PopoverStories.Default}/>
 
 
 ### Props

package/src/components/ProgressBar/readme.mdx

@@ -1,6 +1,7 @@
 # IbProgressBar
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as ProgressBarStories from "./ProgressBar.stories";
 
 A progress bar provides feedback about the duration and progression of a process, such as a download, file transfer, or installation, to indicate how long a user will be waiting.
 
@@ -28,9 +29,7 @@ Determinate progress bars are used when the loading progress can be tracked and
 Use a determinate progress bar when the progress can be calculated against a specific goal.
 It’s best to give the user transparency about the process which usually leads to increased trust in the software or platform.
 
-<Canvas>
-  <Story id="progress-bar--default" />
-</Canvas>
+<Canvas of={ProgressBarStories.Default}/>
 
 ### Props
 
@@ -55,9 +54,7 @@ There are four states for the progress bar: in progress, success, error, cancell
  - **Success.** The success loading state, conveyed by a full-width green progress bar and checkmark icon, indicates that the action completed successfully.
  - **Error.** The error loading state indicates that the action did not successfully complete. If an error occurs, an inline notification or error handling within the form should appear. As soon as a process fails, the indicator bar’s progress spans full width, turns red, and remains visible. A failed icon is also shown.
  - **Cancelled.** -
-<Canvas>
-  <Story id="progress-bar--states" />
-</Canvas>
+<Canvas of={ProgressBarStories.States}/>
 
 ### Percent-done animation
 

package/src/components/SplitButton/readme.mdx

@@ -1,6 +1,7 @@
 # IbSplitButton
 
 import { Story, Canvas } from "@storybook/addon-docs";
+import * as SplitButtonStories from "./SplitButton.stories";
 
 Split buttons are for presenting several related tools if one option is used most frequently. Making the most commonly accessed option a default lowers the interaction cost to use that option since it removes the need to open the menu before selecting the item.
 
@@ -18,9 +19,8 @@ It is a hybrid between a [button](?path=/docs/button--default) and a [drop-down
 
 ### Default
 
-<Canvas>
-  <Story id="splitbutton--default" />
-</Canvas>
+
+<Canvas of={SplitButtonStories.Default} />
 
 ### Props
 

package/src/components/TagPill/readme.mdx

@@ -1,6 +1,7 @@
 # IbTagPill
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as TagPillStories from "./TagPill.stories";
 
 A status Pill is a visual indicator used to highlight an item's status for quick recognition.
 
@@ -9,9 +10,7 @@ Use the icon together with the label in Lozenge to help user quicker understand
 
 ### Default
 
-<Canvas>
-  <Story id="tag-pill--default" />
-</Canvas>
+<Canvas of={TagPillStories.Default} />
 
 ### Temporary status Pills
 

package/src/components/ToggleTip/readme.mdx

@@ -1,6 +1,7 @@
 # IbToggleTip
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as ToggleTipStories from "./ToggleTip.stories";
 
 Toggletips use the disclosure pattern to toggle the visibility of a popover. They display additional, hidden information upon the click of a UI trigger element and can contain interactive elements.
 Toggletip should be used in place of tooltip if your content will contain interactive elements. If it does not have any interactive content, consider using [Tooltip](?path=/story/tooltip--default) or [Popover](?path=/story/popover--default) instead.
@@ -41,6 +42,4 @@ The toggletip component has two states—active and inactive. By default, the to
 | close      |            | Emitted when the Toggletip is closed. |
 
 ### Default
-<Canvas>
-  <Story id="toggletip--has-buttons" />
-</Canvas>
+<Canvas of={ToggleTipStories.HasButtons} />

package/src/components/Tooltip/readme.mdx

@@ -1,6 +1,7 @@
 # IbTooltip
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as TooltipStories from "./Tooltip.stories";
 
 Tooltips display additional information upon hover or focus. The information included should be contextual, helpful, and nonessential while providing that extra ability to communicate and give clarity to a user.
 
@@ -22,10 +23,8 @@ A tooltip is a message box that is displayed when a user hovers over or gives fo
 
 ### Usage
 For correct use component `<ib-polltip>`, need to insert inside the element that should show this `<ib-polltip>` when hovering and focusing.
-<Canvas>
-  <Story id="tooltip--default" />
-</Canvas>
 
+<Canvas of={TooltipStories.Default} />
 
 ### Props
 | Name  | type   | Default Value  | required | Description                                                                                                                                                                                                                                         |

package/src/components/TreeSelect/Option.vue

@@ -200,7 +200,13 @@ export default {
       }
     },
     onChange() {
-      this.$refs.component?.onChange();
+      if (!this.isMultiple && !this.isChecked) {
+        this.$refs.component?.onChange();
+      }
+
+      if (this.isMultiple) {
+        this.$refs.component?.onChange();
+      }
     },
     toggle(value, checkChildren = true) {
       this.check(this.option, value, true, checkChildren);

package/src/components/TreeSelect/Select.vue

@@ -273,6 +273,12 @@ export default {
         return [];
       },
     },
+    modelValue: {
+      type: [Number, String, Array],
+      default() {
+        return [];
+      },
+    },
     value: {
       type: [Number, String, Array],
       default() {
@@ -365,7 +371,11 @@ export default {
     },
   },
   watch: {
-    value(value) {
+    modelValue(value) {
+      this.val = value;
+      this.setPreparedValues();
+    },
+    val(value) {
       if (
         this.watchClearValue &&
         (!value || (Array.isArray(value) && !value.length))
@@ -445,6 +455,7 @@ export default {
     };
 
     return {
+      val: this.modelValue ? this.modelValue : this.value,
       size: {
         left: (this.initialSize && this.initialSize.left) || 0,
         right: (this.initialSize && this.initialSize.right) || 0,
@@ -581,6 +592,7 @@ export default {
       this.allOptionsIsChecked = false;
       this.countVisibleChildren = 0;
       this.selected = [];
+      this.$emit("update:modelValue", null);
     },
     clearValue() {
       this.clear();
@@ -616,9 +628,9 @@ export default {
               option.isDisabled = false;
 
               option.checked = this.isMultiple
-                ? this.value !== null &&
-                  this.value.findIndex((el) => option.id == el) > -1
-                : this.value !== null && this.value == option.id;
+                ? this.val !== null &&
+                  this.val.findIndex((el) => option.id == el) > -1
+                : this.val !== null && this.val == option.id;
 
               if (option.checked) {
                 if (!this.onlyEndNodes || !option.children) {
@@ -711,8 +723,10 @@ export default {
     change() {
       const values = Object.keys(this.selected);
       if (this.isMultiple) {
+        this.$emit("update:modelValue", values);
         this.$emit("input", values);
       } else {
+        this.$emit("update:modelValue", values[0]);
         this.$emit("input", values[0]);
       }
       this.$globalEvents.$emit("select-" + this.filterId + ":update", {
@@ -733,6 +747,7 @@ export default {
           ) {
             this.selected[option.id] = option;
             this.$emit("input", Object.keys(this.selected));
+            this.$emit("update:modelValue", Object.keys(this.selected));
           }
         } else {
           const selectedOptionKey = Object.keys(this.selected)[0];
@@ -748,6 +763,7 @@ export default {
         delete this.selected[option.id];
         option.checked = false;
         this.$emit("input", Object.keys(this.selected));
+        this.$emit("update:modelValue", Object.keys(this.selected));
       }
 
       this.toggleDuplicateOptions(this.actualOptions, option.id, isChecked);

package/src/stories/link.readme.mdx

@@ -1,6 +1,7 @@
 # IbLink
 
-import { Story, Canvas } from "@storybook/addon-docs";
+import { Canvas } from "@storybook/addon-docs";
+import * as LinkStories from "./Link.stories";
 
 ## Inline Link
 
@@ -10,9 +11,7 @@ Links are used as navigational elements and can be used on their own or inline w
 
 For usage need add class `.ib-link` to tag `a`.
 
-<Canvas>
-  <Story id="links--inline-link" />
-</Canvas>
+<Canvas of={LinkStories.InlineLink} />
 
 ### Use links when you want users to:
 
@@ -33,9 +32,7 @@ Links are used as navigational elements and can be used on their own or inline w
 
 For usage need add class `.ib-standalone-link` to tag `a`.
 
-<Canvas>
-  <Story id="links--standalone-link" />
-</Canvas>
+<Canvas of={LinkStories.StandaloneLink} />
 
 ### Use links when you want users to:
 
@@ -52,6 +49,5 @@ Use a button instead of a link for actions that will change data or manipulate h
 
 The standalone link component can be paired with an icon. Use 16px icons and place them to the right of the link. Icons should always be the same color as the link text.
 
-<Canvas>
-  <Story id="links--standalone-link-with-icon" />
-</Canvas>
+<Canvas of={LinkStories.StandaloneLinkWithIcon} />
+