nuxt-glorious 1.2.3-0 → 1.2.3-2

package/dist/module.json

@@ -1,5 +1,5 @@
 {
-  "name": "glorious",
+  "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "1.2.3-0"
+  "version": "1.2.3-2"
 }

package/dist/module.mjs

@@ -3,7 +3,7 @@ import defu from 'defu';
 
 const module = defineNuxtModule({
   meta: {
-    name: "glorious",
+    name: "nuxt-glorious",
     configKey: "glorious"
   },
   // Default configuration options of the Nuxt module

package/dist/runtime/assets/style/components/input.css

@@ -91,7 +91,7 @@
 }
 
 .glorious-input-options {
-  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto;
+  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
 }
 .glorious-input-options > div {
   @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;

package/dist/runtime/assets/style/components/switch.css

@@ -0,0 +1,52 @@
+/* From Uiverse.io by namecho */
+.switch {
+  direction: ltr;
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc(
+    (var(--button-height) - var(--toggle-diameter)) / 2
+  );
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+  --color-green: #4296f4;
+}
+.switch-slider {
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+.switch-slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+.switch input[type=checkbox]:checked + .switch-slider {
+  background-color: var(--color-green);
+}
+.switch input[type=checkbox]:checked + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+.switch input[type=checkbox] {
+  display: none;
+}
+.switch input[type=checkbox]:active + .switch-slider::after {
+  width: var(--toggle-wider);
+}
+.switch input[type=checkbox]:checked:active + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}

package/dist/runtime/components/G/Input.vue

@@ -208,7 +208,8 @@ const typeInput = ref(props.type)
 
 const inputClicked = (event: any) => {
   if (props.mode === 'tag' && props.options) {
-    console.log(event.currentTarget.parentElement.children)
+    const gio = document.querySelectorAll('.glorious-input-options')
+    gio.forEach((element: any) => element.classList.add('hidden'))
 
     const optionsElement = event.currentTarget.parentElement.children[1]
     if (optionsElement.classList.contains('hidden'))
@@ -258,7 +259,7 @@ const inputClicked = (event: any) => {
 
         <div
           v-if="props.options.length > 0"
-          class="glorious-input-options"
+          class="glorious-input-options hidden"
           :class="[`size-${props.size}`]"
         >
           <div v-if="props.loadingOptions" class="flex justify-center">
@@ -391,7 +392,7 @@ const inputClicked = (event: any) => {
 }
 
 .glorious-input-options {
-  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto;
+  @apply p-1 shadow-lg absolute w-full bg-white rounded border-gray-200 border max-h-[200px] overflow-y-auto z-40;
 }
 .glorious-input-options > div {
   @apply py-2 hover:bg-gray-100 cursor-pointer rounded px-2;

package/dist/runtime/components/G/Switch.vue

@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+const props = defineProps({
+  modelValue: {
+    required: false,
+    default: true,
+    type: Boolean,
+  },
+  checked: {
+    required: false,
+    default: false,
+    type: Boolean,
+  },
+})
+
+const emits = defineEmits(['update:modelValue'])
+const input = (e: Event) => {
+  const target = e.target as HTMLInputElement
+  emits('update:modelValue', target.checked)
+}
+</script>
+
+<template>
+  <div>
+    <label class="switch">
+      <input
+        type="checkbox"
+        @input="input"
+        :checked="props.checked"
+      />
+      <span class="switch-slider"></span>
+    </label>
+  </div>
+</template>
+
+<style>
+/* From Uiverse.io by namecho */
+.switch {
+  direction: ltr;
+  --button-width: 3.5em;
+  --button-height: 2em;
+  --toggle-diameter: 1.5em;
+  --button-toggle-offset: calc(
+    (var(--button-height) - var(--toggle-diameter)) / 2
+  );
+  --toggle-shadow-offset: 10px;
+  --toggle-wider: 3em;
+  --color-grey: #cccccc;
+  --color-green: #4296f4;
+}
+.switch-slider {
+  display: inline-block;
+  width: var(--button-width);
+  height: var(--button-height);
+  background-color: var(--color-grey);
+  border-radius: calc(var(--button-height) / 2);
+  position: relative;
+  transition: 0.3s all ease-in-out;
+}
+.switch-slider::after {
+  content: "";
+  display: inline-block;
+  width: var(--toggle-diameter);
+  height: var(--toggle-diameter);
+  background-color: #fff;
+  border-radius: calc(var(--toggle-diameter) / 2);
+  position: absolute;
+  top: var(--button-toggle-offset);
+  transform: translateX(var(--button-toggle-offset));
+  box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+  transition: 0.3s all ease-in-out;
+}
+.switch input[type=checkbox]:checked + .switch-slider {
+  background-color: var(--color-green);
+}
+.switch input[type=checkbox]:checked + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
+  box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
+}
+.switch input[type=checkbox] {
+  display: none;
+}
+.switch input[type=checkbox]:active + .switch-slider::after {
+  width: var(--toggle-wider);
+}
+.switch input[type=checkbox]:checked:active + .switch-slider::after {
+  transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
+}
+</style>

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.3-0",
+  "version": "1.2.3-2",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
   "repository": "sajadhzj/nuxt-glorious",