nuxt-glorious 2.0.0-develop-32 → 2.0.0-develop-34

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-develop-32",
+  "version": "2.0.0-develop-34",
   "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",
@@ -21,14 +21,15 @@
     "dist"
   ],
   "scripts": {
-    "prepack": "bash load-style.sh && nuxt-module-build build",
+    "prepack": "nuxt-module-build build",
     "dev": "nuxi dev --port=3001 playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run prepack && npm publish",
     "lint": "eslint .",
     "test": "vitest run",
-    "test:watch": "vitest watch"
+    "test:watch": "vitest watch",
+    "style": "sass src/styles/glorious.scss playground/assets/css/glorious.css --watch"
   },
   "dependencies": {
     "@nuxt/image": "^1.8.1",

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

@@ -1,43 +0,0 @@
-<script lang="ts" setup>
-import _props from '../props/Button'
-import { getAttribute } from '../helper'
-
-const props: any = defineProps(_props)
-</script>
-
-<template>
-  <button
-    v-if="props.to === ''"
-    :aria-label="props.ariaLabel"
-    :class="[
-      `glorious-button`,
-      `button-color-${getAttribute(props.color, 'button', 'color')}`,
-      `size-${getAttribute(props.size, 'button', 'size')}`,
-      getAttribute(props.outline, 'button', 'outline') ? 'outline' : '',
-    ]"
-    :disabled="getAttribute(props.disabled, 'button', 'disable')"
-  >
-    <div
-      v-if="getAttribute(props.loading, 'button', 'loading')"
-      class="loading flex justify-center"
-    >
-      <GLoading
-        :color="getAttribute(props.loadingColor, 'button', 'loadingColor')"
-      />
-    </div>
-    <slot v-else />
-  </button>
-  <NuxtLink
-    v-else
-    :to="props.to"
-    :class="[
-      `glorious-button`,
-      `button-color-${getAttribute(props.color, 'button', 'color')}`,
-      `size-${getAttribute(props.size, 'button', 'size')}`,
-      getAttribute(props.outline, 'button', 'outline') ? 'outline' : '',
-    ]"
-    :disabled="getAttribute(props.disabled, 'button', 'disable')"
-  >
-    <slot />
-  </NuxtLink>
-</template>

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

@@ -1,28 +0,0 @@
-<script lang="ts" setup>
-import _props from '../props/CheckBox'
-import { getAttribute } from '../helper'
-
-const props: any = defineProps(_props)
-const model = defineModel()
-const inputFunction = (event: any) => (model.value = event.target.checked)
-
-model.value = props.checked
-</script>
-
-<template>
-  <label
-    class="glorious-checkbox"
-    :class="[
-      `color-${getAttribute(props.color, 'checkbox', 'color')}`,
-      `size-${getAttribute(props.size, 'checkbox', 'size')}`,
-    ]"
-  >
-    <input
-      type="checkbox"
-      :checked="getAttribute(props.checked, 'checkbox', 'checked')"
-      :disabled="getAttribute(props.disabled, 'checkbox', 'disable')"
-      @input="inputFunction($event)"
-    />
-    <div></div>
-  </label>
-</template>

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

@@ -1,280 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, watch, useGloriousCore } from '#imports'
-import { hasValidationError, getAttribute } from '../helper'
-import _props from '../props/Input'
-
-const props: any = defineProps(_props)
-const modelValue: any = defineModel()
-const { numbersWithSeparateSamePrice } = useGloriousCore()
-modelValue.value = ''
-const inputValue: any = ref(null)
-
-watch(
-  () => inputValue.value,
-  () => {
-    if (getAttribute(props.mode, 'input', 'mode') === 'tag') return
-
-    switch (getAttribute(props.display, 'input', 'display')) {
-      case 'price':
-        inputValue.value = numbersWithSeparateSamePrice(inputValue.value)
-        modelValue.value = inputValue.value.toString().replaceAll(',', '')
-        break
-      default:
-        modelValue.value = inputValue.value
-        break
-    }
-  }
-)
-
-const computeIconSize = computed(() => {
-  let iconSize = 0
-
-  switch (props.size) {
-    case 'xl':
-      iconSize = 30
-      break
-    case 'lg':
-      iconSize = 27
-      break
-    case 'md':
-      iconSize = 25
-      break
-    case 'sm':
-      iconSize = 23
-      break
-    case 'xs':
-      iconSize = 20
-      break
-    default:
-      iconSize = 30
-      break
-  }
-
-  return iconSize
-})
-
-// ------------------------------------------------------------------------------------------------ TAG
-const tags: any = ref([])
-
-const addTag = (event: any) => {
-  if (getAttribute(props.tagLockOption, 'input', 'tagLockOption')) return
-
-  if (tags.value.length === 0) tags.value = []
-
-  if (getAttribute(props.mode, 'input', 'mode') !== 'tag') return
-  const value: any = event.target.value
-  tags.value.push(value)
-  modelValue.value = tags.value
-  inputValue.value = ''
-}
-
-const isSelected = (value: any): boolean => {
-  if (typeof tags.value !== 'object' && typeof modelValue.value !== 'object')
-    return false
-
-  return (
-    tags.value.some((item: any) => item[props.keyOfValue] === value) ||
-    (typeof modelValue.value === 'object' &&
-      modelValue.value.some((item: any) => item[props.keyOfValue] === value))
-  )
-}
-const addTagViaOption = (option: any, event: any) => {
-  if (event.currentTarget.classList.contains('disabled')) {
-    event.stopPropagation()
-  }
-  //   event.stopPropagation() if want not close with window
-  if (
-    typeof tags.value === 'string' ||
-    typeof tags.value === 'undefined' ||
-    tags.value.length === 0
-  )
-    tags.value = []
-
-  if (!isSelected(option.value)) {
-    const value: any = option
-    tags.value.push(value)
-    modelValue.value = tags.value
-    inputValue.value = ''
-  }
-}
-
-const removeTag = (tag: string) => {
-  tags.value = tags.value.filter((item: any) => item !== tag)
-  modelValue.value = tags.value
-}
-
-// -------------------------------------- init value
-const initValue = () => {
-  if (getAttribute(props.mode, 'input', 'mode') === 'tag') {
-    tags.value = modelValue.value
-    return
-  }
-
-  inputValue.value = modelValue.value
-}
-initValue()
-watch(
-  () => modelValue.value,
-  () => initValue()
-)
-
-const typeInput = ref(getAttribute(props.type, 'input', 'type'))
-
-const inputClicked = (event: any) => {
-  if (getAttribute(props.mode, 'input', 'mode') === 'tag' && props.options) {
-    const gio = document.querySelectorAll('.glorious-input-options')
-    gio.forEach((element: any) => element.classList.add('hidden'))
-
-    const optionsElement = event.currentTarget.parentElement.children[1]
-    if (
-      typeof optionsElement !== 'undefined' &&
-      optionsElement.classList.contains('hidden')
-    )
-      optionsElement.classList.remove('hidden')
-  }
-}
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <span class="glorious-title text-sm font-medium text-gray-500">
-      {{ getAttribute(props.title, 'input', 'title') }}
-      <span
-        v-if="getAttribute(props.required, 'input', 'required')"
-        class="text-red-500"
-      >
-        *
-      </span>
-    </span>
-
-    <div
-      class="glorious-input"
-      :class="[
-        props.icon !== '' ? `icon-${props.size}` : '',
-        hasValidationError(props.error) ? 'validation-error' : '',
-      ]"
-    >
-      <div class="relative">
-        <input
-          v-model="inputValue"
-          :inputmode="getAttribute(props.inputMode, 'input', 'inputMode')"
-          :autocomplete="
-            getAttribute(props.autocomplete, 'input', 'autocomplete')
-          "
-          class="w-full glorious-input-field"
-          :class="[
-            `size-${props.size}`,
-            `glorious-input-${getAttribute(props.color, 'input', 'color')}`,
-            getAttribute(props.type, 'input', 'type') === 'password'
-              ? 'pl-[30px] pr-3'
-              : 'px-3',
-            `mode-${getAttribute(props.mode, 'input', 'mode')}`,
-          ]"
-          :placeholder="getAttribute(props.placeholder, 'input', 'placeholder')"
-          :disabled="getAttribute(props.disable, 'input', 'disable')"
-          :type="typeInput"
-          @keyup.enter="addTag($event)"
-          @click="inputClicked($event)"
-        />
-        <GIcon
-          v-if="
-            getAttribute(props.type, 'input', 'type') === 'password' &&
-            typeInput === 'password'
-          "
-          class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
-          :size="23"
-          name="glorious-eye-fill"
-          @click="typeInput = 'text'"
-        ></GIcon>
-        <GIcon
-          v-if="
-            getAttribute(props.type, 'input', 'type') === 'password' &&
-            typeInput === 'text'
-          "
-          class="absolute left-0 top-0 bottom-0 my-auto ml-1 cursor-pointer"
-          :size="23"
-          name="glorious-eye-off-fill"
-          @click="typeInput = 'password'"
-        ></GIcon>
-
-        <div
-          class="glorious-input-options hidden"
-          :class="[`size-${props.size}`]"
-        >
-          <div
-            v-if="getAttribute(props.loading, 'input', 'loading')"
-            class="flex justify-center"
-          >
-            <GLoading color="green" />
-          </div>
-          <div v-else>
-            <div
-              v-if="props.options.length === 0"
-              class="text-center"
-            >
-              {{ props.noItemsFound }}
-            </div>
-            <div
-              v-for="(option, index) in props.options"
-              :key="index"
-              @click="addTagViaOption(option, $event)"
-              :class="[isSelected(option[props.keyOfValue]) ? 'disabled' : '']"
-            >
-              <slot
-                name="option"
-                :item="option"
-              ></slot>
-              {{
-                option[
-                  getAttribute(props.displayTextKey, 'input', 'displayTextKey')
-                ]
-              }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        v-if="tags?.length !== 0"
-        class="glorious-input-tag"
-      >
-        <div
-          v-for="(item, index) in tags"
-          :key="index"
-        >
-          <slot
-            name="option"
-            :item="item"
-          ></slot>
-          {{
-            typeof item === 'object'
-              ? item[
-                  getAttribute(props.displayTextKey, 'input', 'displayTextKey')
-                ]
-              : item
-          }}
-          <div class="glorious-input-tag-delete-option">
-            <GIcon
-              name="glorious-x"
-              :size="10"
-              color="#ff0000"
-              @click="removeTag(item)"
-            />
-          </div>
-        </div>
-      </div>
-      <GIcon
-        v-if="props.icon !== ''"
-        class="glorious-input-icon"
-        :name="props.icon"
-        :size="computeIconSize"
-      />
-      <div
-        v-if="getAttribute(props.loading, 'input', 'loading')"
-        class="absolute top-1 bottom-0 my-auto left-1"
-      >
-        <GLoading color="green" />
-      </div>
-    </div>
-    <GErrorText :error="props.error" />
-  </div>
-</template>

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

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import _props from '../props/Loading'
-import { getAttribute } from '../helper'
-
-const props: any = defineProps(_props)
-</script>
-
-<template>
-  <div class="inline">
-    <div
-      class="glorious-loading"
-      :style="{
-        width: `${getAttribute(props.size, 'loading', 'size')}px`,
-        border: `${getAttribute(
-          props.stroke,
-          'icon',
-          'stroke'
-        )}px solid ${getAttribute(props.color, 'loading', 'color')}`,
-      }"
-    />
-  </div>
-</template>

package/dist/runtime/components/props/Button.d.ts

@@ -1,52 +0,0 @@
-declare const _default: {
-    outline: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    ariaLabel: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    to: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    loadingColor: {
-        required: boolean;
-        default: string;
-        type: () => import("../../../types").colors | string;
-    };
-    loading: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    loadingOption: {
-        required: boolean;
-        default: {
-            color: string;
-        };
-        type: {
-            color: StringConstructor;
-        };
-    };
-    disabled: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    size: {
-        required: boolean;
-        default: import("../../../types").sizes;
-        type: () => import("../../../types").sizes;
-    };
-    color: {
-        required: boolean;
-        default: string;
-        type: () => import("../../../types").colors | string;
-    };
-};
-export default _default;

package/dist/runtime/components/props/Button.mjs

@@ -1,20 +0,0 @@
-import {
-  color,
-  size,
-  disabled,
-  loading,
-  loadingColor,
-  to,
-  ariaLabel,
-  outline
-} from "./common/index.mjs";
-export default {
-  ...color(),
-  ...size(),
-  ...disabled,
-  ...loading,
-  ...loadingColor,
-  ...to,
-  ...ariaLabel,
-  ...outline()
-};

package/dist/runtime/components/props/Input.d.ts

@@ -1,125 +0,0 @@
-declare const _default: {
-    type: {
-        required: boolean;
-        default: string;
-        type: () => "button" | "checkbox" | "color" | "date" | "email" | "file" | "hidden" | "password" | "radio" | "range" | "tel" | "text" | "url" | "number";
-    };
-    autocomplete: {
-        required: boolean;
-        default: string;
-        type: () => "off" | "on" | "new-password";
-    };
-    display: {
-        required: boolean;
-        default: string;
-        type: () => "price";
-    };
-    inputMode: {
-        required: boolean;
-        default: string;
-        type: () => "text" | "none" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
-    };
-    mode: {
-        required: boolean;
-        default: string;
-        type: () => "normal" | "tag";
-    };
-    tagLockOption: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    noItemsFound: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    loading: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    loadingOption: {
-        required: boolean;
-        default: {
-            color: string;
-        };
-        type: {
-            color: StringConstructor;
-        };
-    };
-    options: {
-        required: boolean;
-        default: never[];
-        type: {
-            (arrayLength: number): object[];
-            (...items: object[]): object[];
-            new (arrayLength: number): object[];
-            new (...items: object[]): object[];
-            isArray(arg: any): arg is any[];
-            readonly prototype: any[];
-            from<T>(arrayLike: ArrayLike<T>): T[];
-            from<T, U>(arrayLike: ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
-            from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
-            of<T>(...items: T[]): T[];
-            readonly [Symbol.species]: ArrayConstructor;
-        };
-    };
-    loadingOptions: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    disabled: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    icon: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    error: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    keyOfValue: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    required: {
-        required: boolean;
-        default: boolean;
-        type: BooleanConstructor;
-    };
-    displayTextKey: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    size: {
-        required: boolean;
-        default: import("../../../types").sizes;
-        type: () => import("../../../types").sizes;
-    };
-    title: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    placeholder: {
-        required: boolean;
-        default: string;
-        type: StringConstructor;
-    };
-    color: {
-        required: boolean;
-        default: string;
-        type: () => import("../../../types").colors | string;
-    };
-};
-export default _default;

package/dist/runtime/components/props/Input.mjs

@@ -1,60 +0,0 @@
-import {
-  color,
-  placeholder,
-  title,
-  size,
-  error,
-  icon,
-  disabled,
-  options,
-  required,
-  displayTextKey,
-  keyOfValue,
-  loading,
-  noItemsFound
-} from "./common/index.mjs";
-export default {
-  ...color(),
-  ...placeholder(),
-  ...title(),
-  ...size(),
-  ...displayTextKey(),
-  ...required(),
-  ...keyOfValue(),
-  ...error,
-  ...icon,
-  ...disabled,
-  ...options,
-  ...loading,
-  ...noItemsFound(),
-  type: {
-    required: false,
-    default: "text",
-    type: String
-  },
-  autocomplete: {
-    required: false,
-    default: "off",
-    type: String
-  },
-  display: {
-    required: false,
-    default: "",
-    type: String
-  },
-  inputMode: {
-    required: false,
-    default: "text",
-    type: String
-  },
-  mode: {
-    required: false,
-    default: "normal",
-    type: String
-  },
-  tagLockOption: {
-    required: false,
-    default: false,
-    type: Boolean
-  }
-};