@avakhula/ui 0.1.22 → 0.1.24

package/dist/main.js

@@ -0,0 +1,10 @@
+import { createApp as e } from "vue";
+import i from "./App.js";
+import n from "./EventEmmiter.js";
+window.lang = (t, p, m = {}) => t;
+const o = e(i);
+o.config.globalProperties.$globalEvents = new n();
+o.config.globalProperties.$emitEvent = function(t, ...p) {
+  this.$emit.apply(this, arguments), this.$emit("all", { event: t, args: p });
+};
+o.mount("#app");

package/dist/mixins/expandAnimation.js

@@ -0,0 +1,24 @@
+const s = {
+  methods: {
+    enter(t) {
+      const i = getComputedStyle(t).width;
+      t.style.width = i, t.style.position = "absolute", t.style.visibility = "hidden", t.style.height = "auto";
+      const h = getComputedStyle(t).height;
+      t.style.width = null, t.style.position = null, t.style.visibility = null, t.style.height = 0, getComputedStyle(t).height, requestAnimationFrame(() => {
+        t.style.height = h;
+      });
+    },
+    afterEnter(t) {
+      t.style.height = "auto";
+    },
+    leave(t) {
+      const i = getComputedStyle(t).height;
+      t.style.height = i, getComputedStyle(t).height, requestAnimationFrame(() => {
+        t.style.height = 0;
+      });
+    }
+  }
+};
+export {
+  s as default
+};

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.1.22",
-  "main": "dist/index.js",
-  "module": "dist/index.umd.cjs",
-  "source": "src/index.js",
+  "version": "0.1.24",
   "type": "module",
+  "module": "dist/index.js",
   "private": false,
+  "sideEffects": [
+     "*.css",
+     "*.scss"
+   ],
+  "files": [ "dist", "src" ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/components/Form/Textarea/Textarea.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="textarea-wrapper" :class="{ disabled: disabled, hasActins: $slots.actions }">
+  <div
+    class="textarea-wrapper"
+    :class="{ disabled: disabled, hasActins: $slots.actions }"
+    @focusout="onFocusOut"
+  >
     <ib-character-count
       v-if="characterLimit"
       :character-limit="characterLimit"
@@ -16,7 +20,6 @@
       v-model="val"
       :id="id"
       @input="onInput"
-      @blur="onBlur"
       class="ib-textarea"
       :class="classes"
       :disabled="disabled"
@@ -84,8 +87,9 @@ export default {
     onInput() {
         this.$emit("input", this.val);
     },
-    onBlur() {
-        this.$emit("blur", this.val);
+    onFocusOut(event) {
+      if (this.$el.contains(event.relatedTarget)) return;
+      this.$emit("blur", this.val);
     },
   },
   computed: {

package/src/components/TreeSelect/Select.vue

@@ -524,10 +524,7 @@ export default {
       ) {
         this.setPreparedValues(this.actualOptions).then(() => {
           const values = Object.keys(this.selected);
-          this.$globalEvents.$emit("select-" + this.filterId + ":update", {
-            values,
-            filter: this.filterId,
-          });
+          this.broadcastUpdate(values);
         });
       }
     },
@@ -557,11 +554,8 @@ export default {
 
       if ((this.isInitialized && !isOptionsEqual) || this.isWatching) {
         this.setPreparedValues().then(() => {
-          const values = Object.keys(this.selected);
-          this.$globalEvents.$emit("select-" + this.filterId + ":update", {
-            values,
-            filter: this.filterId,
-          });
+            const values = Object.keys(this.selected);
+          this.broadcastUpdate(values);
         });
       }
     },
@@ -609,6 +603,10 @@ export default {
       this.virtualizer?.measure();
     }, 1000);
 
+    this.broadcastUpdate = debounce(function(values) {
+      this.$globalEvents.$emit("select-" + this.filterId + ":update", { values, filter: this.filterId });
+    }, 100);
+
     return {
       virtualizer: null,
       initialOptions: typeof this.options === "function" ? this.options : copy(this.options),
@@ -752,7 +750,7 @@ export default {
       if (this.dependency) {
           this.$globalEvents.$on("select-" + this.dependency + ":update", (dependencyValue) => {
               this.clear();
-            this.dependencyValue = dependencyValue;
+              this.dependencyValue = dependencyValue;
 
             if (this.dependencyValue && this.dependencyValue.values && (!Array.isArray(this.dependencyValue.values) || this.dependencyValue.values.length)) {
               this.setPreparedValues();
@@ -827,6 +825,7 @@ export default {
        this.$emit("input", empty);
        this.$emit("clear-value", empty);
        this.$nextTick(() => (this.isInternalChange = false));
+       this.broadcastUpdate(empty);
        this.setPreparedValues();
     },
     prepare(options, checkInitialVisibility = true) {
@@ -963,7 +962,7 @@ export default {
          this.$emit("input", values[0]);
        }
        this.$nextTick(() => (this.isInternalChange = false));
-       this.$globalEvents.$emit("select-" + this.filterId + ":update", { values, filter: this.filterId });
+       this.broadcastUpdate(values);
        if (!this.isMultiple) this.$refs.dropdown.close();
     },
     checkIfOptionsChecked(options) {
@@ -998,6 +997,7 @@ export default {
           this.$emit("update:modelValue", values);
           this.$emit("input", values);
           this.$nextTick(() => (this.isInternalChange = false));
+          this.broadcastUpdate(values);
         }
     },
     toggleDuplicateOptions(options, optionId, checked) {

package/.babelrc.json

@@ -1,14 +0,0 @@
-{
-  "sourceType": "unambiguous",
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "targets": {
-          "chrome": 100
-        }
-      }
-    ]
-  ],
-  "plugins": []
-}

package/.eslintrc.cjs

@@ -1,22 +0,0 @@
-/* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
-module.exports = {
-    root: true,
-    extends: [
-        "plugin:vue/vue3-essential",
-        "eslint:recommended",
-        "@vue/eslint-config-prettier",
-        "plugin:storybook/recommended",
-    ],
-    parserOptions: {
-        ecmaVersion: "latest",
-    },
-    globals: {
-      lang: "readonly",
-      langComponents: "readonly",
-    },
-    rules: {
-      "indent": ["warm", 2]
-    },
-};

package/.nvmrc

@@ -1 +0,0 @@
-v16.18.1

package/.prettierrc.json

@@ -1 +0,0 @@
-{}

package/.storybook/intelliboardTheme.js

@@ -1,10 +0,0 @@
-import { create } from '@storybook/theming';
-import logo from '../static/Logo.svg';
-
-export default create({
-  base: 'light',
-  brandTitle: 'Intelliboard UI',
-  brandUrl: 'https://intelliboard.net/',
-  brandImage: logo,
-  brandTarget: '_self',
-});

package/.storybook/main.js

@@ -1,25 +0,0 @@
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-docs",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-a11y",
-    "@storybook/addon-mdx-gfm",
-  ],
-  staticDirs: ['../static'],
-  framework: {
-    name: "@storybook/vue3-vite",
-    options: {},
-  },
-  async viteFinal(config, options) {
-    return config;
-  },
-  features: {
-    storyStoreV7: true,
-  },
-  docs: {
-    autodocs: true,
-  },
-};

package/.storybook/manager.js

@@ -1,7 +0,0 @@
-import { addons } from '@storybook/addons';
-import IntelliboardTheme from "./intelliboardTheme";
-addons.setConfig({
-  theme: IntelliboardTheme,
-  isFullscreen: false,
-  panelPosition: 'right',
-});

package/.storybook/preview-head.html

@@ -1,12 +0,0 @@
-<script
-  type="module"
-  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
-></script>
-<script
-  nomodule
-  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
-></script>
-<script>
-  window.global = window;
-  window.lang = (key, component, params = {}) => key
-</script>

package/.storybook/preview.js

@@ -1,25 +0,0 @@
-import { setup } from '@storybook/vue3';
-import { withSource } from "./withSource";
-import EventEmitter from "../src/EventEmmiter";
-import "./scss-loader.scss";
-
-setup((app) => {
-  app.config.globalProperties.$globalEvents = new EventEmitter();
-  app.config.globalProperties.$emitEvent = function(event, ...args) {
-    this.$emit.apply(this, arguments);
-    this.$emit('all', {event, args})
-  };
-});
-
-const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-const decorators = [withSource];
-export default { parameters, decorators };

package/.storybook/scss-loader.scss

@@ -1,6 +0,0 @@
-@import '../src/assets/scss/style.scss';
-
-// Style for documentation
-table {
-    width: 100%;
-}

package/.storybook/withSource.js

@@ -1,97 +0,0 @@
-import { addons, makeDecorator } from "@storybook/addons";
-import kebabCase from "lodash.kebabcase"
-import { h, onMounted } from "vue";
-
-// this value doesn't seem to be exported by addons-docs
-export const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`;
-
-function templateSourceCode (
-  templateSource,
-  args,
-  argTypes,
-  replacing = 'v-bind="args"',
-) {
-  const componentArgs = {}
-  for (const [k, t] of Object.entries(argTypes)) {
-    const val = args[k]
-    if (typeof val !== 'undefined' && t.table && t.table.category === 'props' && val !== t.defaultValue) {
-      componentArgs[k] = val
-    }
-  }
-
-  const propToSource = (key, val) => {
-    const type = typeof val
-    switch (type) {
-      case "boolean":
-        return val ? key : ""
-      case "string":
-        return `${key}="${val}"`
-      default:
-        return `:${key}="${val}"`
-    }
-  }
-
-  return templateSource.replace(
-    replacing,
-    Object.keys(componentArgs)
-      .map((key) => " " + propToSource(kebabCase(key), args[key]))
-      .join(""),
-  )
-}
-
-export const withSource = makeDecorator({
-  name: "withSource",
-  wrapper: (storyFn, context) => {
-    const story = storyFn(context);
-
-    // this returns a new component that computes the source code when mounted
-    // and emits an events that is handled by addons-docs
-    // this approach is based on the vue (2) implementation
-    // see https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/vue/sourceDecorator.ts
-    return {
-      components: {
-        Story: story,
-      },
-
-      setup() {
-        onMounted(() => {
-          try {
-            // get the story source
-            const src = context.originalStoryFn().template;
-            
-            // generate the source code based on the current args
-            const code = templateSourceCode(
-              src,
-              context.args,
-              context.argTypes
-            );
-
-            const channel = addons.getChannel();
-
-            const emitFormattedTemplate = async () => {
-              const prettier = await import("prettier/standalone");
-              const prettierHtml = await import("prettier/parser-html");
-
-              // emits an event  when the transformation is completed
-              channel.emit(
-                SNIPPET_RENDERED,
-                (context || {}).id,
-                prettier.format(`<template>${code}</template>`, {
-                  parser: "vue",
-                  plugins: [prettierHtml],
-                  htmlWhitespaceSensitivity: "ignore",
-                })
-              );
-            };
-
-            setTimeout(emitFormattedTemplate, 0);
-          } catch (e) {
-            console.warn("Failed to render code", e);
-          }
-        });
-
-        return () => h(story);
-      },
-    };
-  },
-});