@avakhula/ui 0.0.168 → 0.0.170

package/package.json

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

package/src/App.vue

@@ -1,33 +1,59 @@
 <template>
-  <ib-select is-toggle :options="roles" @input="changeRole" :value="roles.map(role => role.id)">
+  <div class="hello">
+    <div v-for="item in items" :key="item.id">
+      {{ item.name }}
 
-    <template v-slot:trigger="{ selectedCount }">
-      <ib-button kind="tertiary">
-        Org Role ({{ roles.length - selectedCount }} hidden)
-        <ib-icon style="paddingLeft: 5px" name="chevron-down-outline"></ib-icon>
-      </ib-button>
-    </template>
-  </ib-select>
+      <ib-icon-button @click="deleteItem(item.id)" v-tooltip="'DELETE'">
+        <ib-icon name="close-outline" />
+      </ib-icon-button>
+    </div>
+  </div>
 </template>
 
 <script>
-import IbSelect from "./components/TreeSelect/Select.vue"
+import { TextOverflowTooltipDirective as TextOverflowTooltip } from "./directives/tooltip/textOverflowTooltip";
+import { TooltipDirective as Tooltip } from "./directives/tooltip/tooltip";
+
+import IbIconButton from "./components/IconButton/IconButton.vue";
+import IbIcon from "./components/Icon.vue"
 export default {
   data() {
     return {
-      roles: [{ "id": 1, "title": "ALL Access", "checked": true, "initiallyVisible": true, "visible": true, "isDisabled": false }, { "id": 2, "title": "Manager", "checked": true, "initiallyVisible": true, "visible": true, "isDisabled": false }, { "id": 3, "title": "Department Chair", "checked": true, "initiallyVisible": true, "visible": true, "isDisabled": false }, { "id": 4, "title": "test role", "checked": true, "initiallyVisible": true, "visible": true, "isDisabled": false }]
-    }
+      items: [
+        { id: 1, name: "Item 1" },
+        { id: 2, name: "Item 2" },
+        { id: 3, name: "Item 3" },
+        { id: 4, name: "Item 4" },
+        { id: 5, name: "Item 5" },
+      ],
+    };
   },
   methods: {
-    changeRole(a) {
-      setTimeout(() => {
-        console.log(a)
-
-      })
-    }
+    deleteItem(id) {
+      const idx = this.items.findIndex((item) => item.id === id);
+      this.items.splice(idx, 1);
+    },
+  },
+  directives: {
+    TextOverflowTooltip,
+    Tooltip
   },
   components: {
-    IbSelect
+    IbIconButton,
+    IbIcon
   }
+};
+</script>
+
+<style lang="scss">
+@import "./assets/scss/mixins.scss";
+
+.hello {
+  padding: 200px;
+}
+
+.test {
+  max-width: 20px;
+  @include lineClamp(1);
 }
-</script>
+</style>

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

@@ -14,6 +14,7 @@
         @input="onInput($event)"
         @blur="onBlur($event)"
         @focus="onFocus($event)"
+        @change="onChange($event)"
       />
 
       <ib-icon v-if="showIcon" class="icon-search" name="search-outline" />
@@ -21,7 +22,7 @@
       <ib-icon-button
         kind="ghost"
         class="button-clear"
-        :disabled="readonly"
+        :disabled="readonly || disabled"
         :help-text="clearButtonMessage"
         prevent-default
         type="button"
@@ -37,7 +38,7 @@
         class="toggle-password"
         prevent-default
         type="button"
-        :disabled="readonly"
+        :disabled="readonly || disabled"
         :help-text="showPassword ? hidePasswordMessage : showPasswordMessage"
         @click.prevent="toggleShowPassword"
         v-if="actualValue?.length && type === 'password'"
@@ -195,6 +196,9 @@ export default {
         this.$emit("input", this.actualValue);
       }
     },
+    onChange(event) {
+      console.log('test', event, this.name)
+    },
     delayedInput(value) {
       if (this.timer) {
         clearTimeout(this.timer);
@@ -241,7 +245,7 @@ export default {
       this.actualValue = newVal;
     },
     disabled(val) {
-      // this.$globalEvents.$emit(`label:disabled:${this.id}`, val);
+      this.$globalEvents.$emit(`label:disabled:${this.id}`, val);
     },
   },
   emits: [
@@ -249,7 +253,7 @@ export default {
     "blur",
     "focus",
     "update:modelValue",
-    // `label:disabled:${this.id}`,
+    `label:disabled:${this?.id}`,
   ],
   components: {
     IbAlert,

package/src/components/Form/Input/input.scss

@@ -105,6 +105,15 @@ $input-border-error-color: $red-800;
       background-color: $input-disabled-bg;
       border-bottom-color: $input-disabled-border-color;
 
+      &::-ms-reveal {
+        display: none;
+      }
+
+      &:-webkit-autofill {
+        color: $input-disabled-color;
+        background-color: $input-disabled-bg;
+      }
+
       &::placeholder {
         color: $input-disabled-placeholder-color;
       }