@avakhula/ui 0.0.33 → 0.0.35

package/package.json

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

package/src/App.vue

@@ -1,32 +1,90 @@
 <template>
-  test
-  <ib-panel>
-    <template #title>
-      Some title
-    </template>
-    <template #head-content>Some long long description</template>
-    <template #body>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-      <p>tests</p>
-    </template>
-  </ib-panel>
+  <ib-select
+    :options="connections"
+    :is-required="true"
+    :is-multiple="false"
+    :show-clear-button="false"
+  >
+  </ib-select>
+
+  <ib-select
+    :options="roles"
+    :is-required="true"
+    :is-multiple="false"
+    :show-clear-button="false"
+    :model-value="val"
+  >
+  </ib-select>
 </template>
 
 <script>
-// import IbPanel from "./components/Panel/Panel.vue"
-import { IbPanel } from "./index";
+import IbSelect from "./components/TreeSelect/Select.vue";
+
 export default {
+  data() {
+    return {
+      val: 1,
+      connections: [
+        {
+          id: 5,
+          title: "Blackboard Demo",
+          lms_connection_type: 3,
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: false,
+        },
+        {
+          id: 3,
+          title: "Ilias",
+          lms_connection_type: 16,
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: true,
+        },
+        {
+          id: 9,
+          title: "Ilias Don't Delete Pol",
+          lms_connection_type: 16,
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: false,
+        },
+        {
+          id: 10,
+          title: "Sakai Demo",
+          lms_connection_type: 18,
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: false,
+        },
+      ],
+      roles: [
+        {
+          id: 1,
+          title: "test role",
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: false,
+        },
+        {
+          id: 2,
+          title: "testset",
+          initiallyVisible: true,
+          visible: true,
+          isDisabled: false,
+          checked: false,
+        },
+      ],
+    };
+  },
   components: {
-    IbPanel,
+    IbSelect,
   },
 };
 </script>
-<style lang="scss">
-</style>
+

package/src/components/TreeSelect/Select.vue

@@ -234,6 +234,13 @@ import List from "../List.vue";
 export default {
   name: "IbTreeSelect",
   props: {
+    lang: {
+      type: Function,
+      default: (key) => key,
+    },
+    LANG_COMPONENTS: {
+      type: Object,
+    },
     placeholder: {
       type: String,
       default: "",
@@ -434,6 +441,7 @@ export default {
     },
   },
   mounted() {
+    console.log(this.lang, this.LANG_COMPONENTS)
     this.marker = new Mark(this.$refs.list.$el);
 
     this.registerDependency();
@@ -481,45 +489,48 @@ export default {
       uid: `f${(~~(Math.random() * 1e8)).toString(16)}`,
       actualStrings: {
         ...{
-          searchPlaceholder: "Search placeholder",
-          // this.lang(
-          //   this.searchPlaceholderText.length
-          //     ? this.searchPlaceholderText
-          //     : "search_placeholder",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          emptyTitle: "Empty title",
-          // this.lang(
-          //   "empty_title",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          selectAllOptions: "All Options",
-          // this.lang(
-          //   "all_options",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          allSelected: "All selected",
-          //  this.lang(
-          // "all_selected",
-          // LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          loading: "loading",
-          // this.lang("loading", LANG_COMPONENTS.COMPONENT_SELECT) + "...",
-          selectedCount: "Selected {selected} of {all} items",
-          // this.lang(
-          //   "selected_count",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
-          buttonTitle: "Button title",
-          // this.buttonTitle ||
-          // this.lang("button_title", LANG_COMPONENTS.COMPONENT_SELECT),
-          requiredDependencyNotFilled: "Required dependency are not filled",
-          // // eslint-disable-next-line vue/no-computed-properties-in-data
-          // this.requiredDependencyNotFilled ||
-          // this.lang(
-          //   "required_dependency_are_not_filled",
-          //   LANG_COMPONENTS.COMPONENT_SELECT
-          // ),
+          // searchPlaceholder: "Search placeholder",
+          searchPlaceholder: this.lang(
+            this.searchPlaceholderText.length
+              ? this.searchPlaceholderText
+              : "search_placeholder",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          // emptyTitle: "Empty title",
+          emptyTitle: this.lang(
+            "empty_title",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          // selectAllOptions: "All Options",
+          selectAllOptions: this.lang(
+            "all_options",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          // allSelected: "All selected",
+          allSelected: this.lang(
+            "all_selected",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          // loading: "loading",
+          loading:
+            this.lang("loading", this.LANG_COMPONENTS?.COMPONENT_SELECT) + "...",
+          // selectedCount: "Selected {selected} of {all} items",
+          selectedCount: this.lang(
+            "selected_count",
+            this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
+          // buttonTitle: "Button title",
+          buttonTitle:
+            this.buttonTitle ||
+            this.lang("button_title", this.LANG_COMPONENTS?.COMPONENT_SELECT),
+          // requiredDependencyNotFilled: "Required dependency are not filled",
+          requiredDependencyNotFilled:
+            // eslint-disable-next-line vue/no-computed-properties-in-data
+            this.requiredDependencyNotFilled ||
+            this.lang(
+              "required_dependency_are_not_filled",
+              this.LANG_COMPONENTS?.COMPONENT_SELECT
+          ),
         },
         ...this.strings,
       },