classcard-ui 0.2.1475 → 0.2.1476

package/src/components/CIconSelect/CIconSelect.vue

@@ -1,182 +1,182 @@
-<template>
-  <div>
-    <slot></slot>
-    <div
-      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
-    >
-      <div>
-        <button
-          type="white"
-          @click.stop="toggle($event)"
-          @blur="close()"
-          :class="
-            customClasses
-              ? iconClasses
-              : 'icon-select-button inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100'
-          "
-          :style="computedStyles"
-          aria-haspopup="true"
-          aria-expanded="true"
-        >
-          <div>
-            <c-icon
-              :name="icon.name"
-              :type="icon.type"
-              :class="icon.class"
-              :cursorType="cursorType"
-              :viewBox="icon.viewBox"
-            ></c-icon>
-          </div>
-        </button>
-      </div>
-
-      <div
-        v-show="toggleDropdown"
-        @mouseenter="toggle($event)"
-        @mouseleave="close()"
-        :class="classes"
-        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
-      >
-        <div
-          class="w-max py-1"
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="option-menu"
-        >
-          <div v-for="(item, index) in items" v-bind:key="item.text">
-            <a
-              @mousedown.stop.prevent="dropdownAction(item)"
-              @touchend="dropdownAction(item)"
-              class="flex cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
-              :class="item.class"
-              role="menuitem"
-              :disabled="item.disabled"
-            >
-              <c-icon
-                v-if="item.icon"
-                :name="dropdownIcons[index].name"
-                :type="dropdownIcons[index].type"
-                :class="dropdownIcons[index].class"
-                :viewBox="dropdownIcons[index].viewBox"
-                :cursorType="cursorType"
-              ></c-icon>
-              {{ item.text }}
-              <p
-                v-if="selectedOption != null && selectedOption == item.text"
-                class="flex flex-1 items-center justify-end"
-              >
-                <c-icon
-                  name="check-outline-v2"
-                  type="outline-v2"
-                  class="h-5 w-5 text-gray-400"
-                >
-                </c-icon>
-              </p>
-            </a>
-            <hr v-if="item.border" class="my-1" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import { COLOR_CONFIG } from "../../colorConfig";
-export default {
-  name: "CIconSelect",
-  components: { CIcon },
-  props: {
-    items: {
-      type: Array,
-      required: true,
-    },
-    customClasses: {
-      type: Boolean,
-      default: false,
-    },
-    iconClasses: {
-      type: String,
-    },
-    icon: {
-      type: Object,
-    },
-    dropdownIcons: {
-      type: Array,
-    },
-    classes: {
-      type: String,
-    },
-    action: {
-      type: Function,
-    },
-    isDropDownRelative: {
-      type: Boolean,
-      default: true,
-    },
-    cursorType: {
-      type: String,
-      default: "cursor-pointer",
-    },
-    selectedOption: {
-      type: String,
-      default: null,
-    },
-    preferredColor: {
-      type: String,
-      default: "indigo",
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-    };
-  },
-  computed: {
-    computedStyles() {
-      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
-      return {
-        "--primary-ring-color": colors.shade600,
-      };
-    },
-  },
-  methods: {
-    toggle(event) {
-      this.toggleDropdown = true;
-      if (event.target.tagName == "path") {
-        if (this.toggleDropdown) {
-          event.target.parentElement.parentElement.parentElement.parentElement.focus();
-        } else {
-          event.target.parentElement.parentElement.parentElement.parentElement.blur();
-        }
-      } else if (event.target.tagName == "svg") {
-        if (this.toggleDropdown) {
-          event.target.parentElement.parentElement.parentElement.focus();
-        } else {
-          event.target.parentElement.parentElement.parentElement.blur();
-        }
-      } else {
-        if (this.toggleDropdown) {
-          event.target.focus();
-        } else {
-          event.target.blur();
-        }
-      }
-    },
-    dropdownAction(item) {
-      this.$emit("action", item);
-    },
-    close() {
-      this.toggleDropdown = false;
-    },
-  },
-};
-</script>
-
-<style scoped>
-.icon-select-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
-}
-</style>
+<template>
+  <div>
+    <slot></slot>
+    <div
+      :class="`${isDropDownRelative ? 'relative' : ''} inline-block text-left`"
+    >
+      <div>
+        <button
+          type="white"
+          @click.stop="toggle($event)"
+          @blur="close()"
+          :class="
+            customClasses
+              ? iconClasses
+              : 'icon-select-button inline-flex w-full justify-center rounded-full border-none p-2 hover:bg-gray-100'
+          "
+          :style="computedStyles"
+          aria-haspopup="true"
+          aria-expanded="true"
+        >
+          <div>
+            <c-icon
+              :name="icon.name"
+              :type="icon.type"
+              :class="icon.class"
+              :cursorType="cursorType"
+              :viewBox="icon.viewBox"
+            ></c-icon>
+          </div>
+        </button>
+      </div>
+
+      <div
+        v-show="toggleDropdown"
+        @mouseenter="toggle($event)"
+        @mouseleave="close()"
+        :class="classes"
+        class="absolute z-10 mt-2 -mr-1 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-gray-900 ring-opacity-5"
+      >
+        <div
+          class="w-max py-1"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="option-menu"
+        >
+          <div v-for="(item, index) in items" v-bind:key="item.text">
+            <a
+              @mousedown.stop.prevent="dropdownAction(item)"
+              @touchend="dropdownAction(item)"
+              class="flex cursor-pointer px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 disabled:pointer-events-none disabled:opacity-50"
+              :class="item.class"
+              role="menuitem"
+              :disabled="item.disabled"
+            >
+              <c-icon
+                v-if="item.icon"
+                :name="dropdownIcons[index].name"
+                :type="dropdownIcons[index].type"
+                :class="dropdownIcons[index].class"
+                :viewBox="dropdownIcons[index].viewBox"
+                :cursorType="cursorType"
+              ></c-icon>
+              {{ item.text }}
+              <p
+                v-if="selectedOption != null && selectedOption == item.text"
+                class="flex flex-1 items-center justify-end"
+              >
+                <c-icon
+                  name="check-outline-v2"
+                  type="outline-v2"
+                  class="h-5 w-5 text-gray-400"
+                >
+                </c-icon>
+              </p>
+            </a>
+            <hr v-if="item.border" class="my-1" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import { COLOR_CONFIG } from "../../colorConfig";
+export default {
+  name: "CIconSelect",
+  components: { CIcon },
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    customClasses: {
+      type: Boolean,
+      default: false,
+    },
+    iconClasses: {
+      type: String,
+    },
+    icon: {
+      type: Object,
+    },
+    dropdownIcons: {
+      type: Array,
+    },
+    classes: {
+      type: String,
+    },
+    action: {
+      type: Function,
+    },
+    isDropDownRelative: {
+      type: Boolean,
+      default: true,
+    },
+    cursorType: {
+      type: String,
+      default: "cursor-pointer",
+    },
+    selectedOption: {
+      type: String,
+      default: null,
+    },
+    preferredColor: {
+      type: String,
+      default: "indigo",
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+    };
+  },
+  computed: {
+    computedStyles() {
+      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
+      return {
+        "--primary-ring-color": colors.shade600,
+      };
+    },
+  },
+  methods: {
+    toggle(event) {
+      this.toggleDropdown = true;
+      if (event.target.tagName == "path") {
+        if (this.toggleDropdown) {
+          event.target.parentElement.parentElement.parentElement.parentElement.focus();
+        } else {
+          event.target.parentElement.parentElement.parentElement.parentElement.blur();
+        }
+      } else if (event.target.tagName == "svg") {
+        if (this.toggleDropdown) {
+          event.target.parentElement.parentElement.parentElement.focus();
+        } else {
+          event.target.parentElement.parentElement.parentElement.blur();
+        }
+      } else {
+        if (this.toggleDropdown) {
+          event.target.focus();
+        } else {
+          event.target.blur();
+        }
+      }
+    },
+    dropdownAction(item) {
+      this.$emit("action", item);
+    },
+    close() {
+      this.toggleDropdown = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.icon-select-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary-ring-color) !important;
+}
+</style>

package/src/components/CIconSelect/index.js

@@ -1,3 +1,3 @@
-import CIconSelect from "./CIconSelect.vue";
-
-export default CIconSelect;
+import CIconSelect from "./CIconSelect.vue";
+
+export default CIconSelect;