nuxt-glorious 1.2.3-9 → 1.2.4

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

@@ -1,48 +1,19 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: true,
-    type: [Boolean, String, Object],
-  },
-  color: {
-    required: false,
-    default: "green",
-    type: String as () => "orange" | "blue" | "gray" | "red" | "green",
-  },
-  size: {
-    required: false,
-    default: "md",
-    type: String as () => "xl" | "lg" | "md" | "sm" | "xs",
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  name: {
-    required: true,
-    type: String,
-  },
-  value: {
-    required: false,
-    default: "",
-    type: String,
-  },
-  checked: {
-    required: false,
-    type: Boolean,
-  },
-});
+import _props from '../props/Radio'
+const props = defineProps(_props)
+const modelValue = defineModel()
 
-const emits = defineEmits(["update:modelValue"]);
-
-const inputFunction = (event: any) =>
-  emits("update:modelValue", event.currentTarget.checked);
+const inputFunction = (event: Event) => {
+  const target = event.currentTarget as HTMLInputElement
+  modelValue.value = target.checked
+}
 </script>
 
 <template>
-  <label class="glorious-radio" :class="[props.color, `size-${props.size}`]">
+  <label
+    class="glorious-radio"
+    :class="[props.color, `size-${props.size}`]"
+  >
     <input
       :name="props.name"
       type="radio"
@@ -55,126 +26,4 @@ const inputFunction = (event: any) =>
   </label>
 </template>
 
-<style>
-.glorious-radio {
-  @apply block relative cursor-pointer;
-}
-.glorious-radio > input {
-  @apply hidden;
-}
-.glorious-radio > input:checked ~ div {
-  @apply border-none;
-}
-.glorious-radio > input:checked ~ div:after {
-  content: "";
-  @apply block w-1 h-1 bg-white rounded-full;
-}
-.glorious-radio > input:disabled ~ div {
-  @apply cursor-not-allowed;
-}
-.glorious-radio > div:last-child {
-  @apply border border-gray-500 rounded-full bg-white left-0 top-0 absolute hover:shadow-lg;
-}
-.glorious-radio > div:last-child > div:first-child {
-  @apply hidden;
-}
-.glorious-radio > div:last-child:after {
-  @apply absolute hidden right-0 top-0 left-0 bottom-0 m-auto w-10 h-10 bg-white rounded-full;
-}
-.glorious-radio.orange > input:checked ~ div {
-  @apply bg-orange-500;
-}
-.glorious-radio.blue > input:checked ~ div {
-  @apply bg-blue-500;
-}
-.glorious-radio.gray > input:checked ~ div {
-  @apply bg-gray-500;
-}
-.glorious-radio.red > input:checked ~ div {
-  @apply bg-red-500;
-}
-.glorious-radio.green > input:checked ~ div {
-  @apply bg-green-500;
-}
-.glorious-radio.size-5xl {
-  @apply w-[46px] h-[46px];
-}
-.glorious-radio.size-5xl > div:last-child {
-  @apply w-[46px] h-[46px];
-}
-.glorious-radio.size-5xl > input:checked ~ div:after {
-  @apply w-[36px] h-[36px];
-}
-.glorious-radio.size-4xl {
-  @apply w-[42px] h-[42px];
-}
-.glorious-radio.size-4xl > div:last-child {
-  @apply w-[42px] h-[42px];
-}
-.glorious-radio.size-4xl > input:checked ~ div:after {
-  @apply w-[32px] h-[32px];
-}
-.glorious-radio.size-3xl {
-  @apply w-[38px] h-[38px];
-}
-.glorious-radio.size-3xl > div:last-child {
-  @apply w-[38px] h-[38px];
-}
-.glorious-radio.size-3xl > input:checked ~ div:after {
-  @apply w-[28px] h-[28px];
-}
-.glorious-radio.size-2xl {
-  @apply w-[34px] h-[34px];
-}
-.glorious-radio.size-2xl > div:last-child {
-  @apply w-[34px] h-[34px];
-}
-.glorious-radio.size-2xl > input:checked ~ div:after {
-  @apply w-[24px] h-[24px];
-}
-.glorious-radio.size-xl {
-  @apply w-[30px] h-[30px];
-}
-.glorious-radio.size-xl > div:last-child {
-  @apply w-[30px] h-[30px];
-}
-.glorious-radio.size-xl > input:checked ~ div:after {
-  @apply w-[20px] h-[20px];
-}
-.glorious-radio.size-lg {
-  @apply w-[26px] h-[26px];
-}
-.glorious-radio.size-lg > div:last-child {
-  @apply w-[26px] h-[26px];
-}
-.glorious-radio.size-lg > input:checked ~ div:after {
-  @apply w-[16px] h-[16px];
-}
-.glorious-radio.size-md {
-  @apply w-[22px] h-[22px];
-}
-.glorious-radio.size-md > div:last-child {
-  @apply w-[22px] h-[22px];
-}
-.glorious-radio.size-md > input:checked ~ div:after {
-  @apply w-[12px] h-[12px];
-}
-.glorious-radio.size-sm {
-  @apply w-[18px] h-[18px];
-}
-.glorious-radio.size-sm > div:last-child {
-  @apply w-[18px] h-[18px];
-}
-.glorious-radio.size-sm > input:checked ~ div:after {
-  @apply w-[8px] h-[8px];
-}
-.glorious-radio.size-xs {
-  @apply w-[14px] h-[14px];
-}
-.glorious-radio.size-xs > div:last-child {
-  @apply w-[14px] h-[14px];
-}
-.glorious-radio.size-xs > input:checked ~ div:after {
-  @apply w-[4px] h-[4px];
-}
-</style>
+<style lang="scss" src="../../assets/style/components/radio.scss" />

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

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-const emits = defineEmits(['update:modelValue'])
+const modelValue = defineModel()
 const computeModelValue = (event: Event) => {
   const target = event.target as HTMLInputElement
-  emits('update:modelValue', target.value)
+  modelValue.value = target.value
 }
 
 const id = useId()
@@ -27,31 +27,4 @@ const value = [5, 4, 3, 2, 1]
   </div>
 </template>
 
-<style scoped>
-@charset "UTF-8";
-.rating {
-  display: inline-block;
-}
-
-.rating input {
-  display: none;
-}
-
-.rating label {
-  float: right;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.rating label:before {
-  content: "★";
-  font-size: 30px;
-}
-
-.rating input:checked ~ label,
-.rating label:hover,
-.rating label:hover ~ label {
-  color: #ffd700;
-  transition: color 0.3s;
-}
-</style>
+<style scoped lang="scss" src="../../assets/style/components/rating.scss" />

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

@@ -1,62 +1,14 @@
 <script lang="ts" setup>
 import { ref, watch } from '#imports'
-interface selectOptionsInterface {
-  text: string
-  value: [string, object]
-}
-const props: any = defineProps({
-  modelValue: {
-    required: false,
-    default: null,
-    type: [String, Number],
-  },
-  options: {
-    required: true,
-    default: [],
-    type: Array<selectOptionsInterface>,
-  },
-  color: {
-    required: false,
-    default: 'primary',
-    type: String,
-  },
-  size: {
-    required: false,
-    default: 'md',
-    type: String,
-  },
-  title: {
-    required: false,
-    default: '',
-    type: String,
-  },
-  error: {
-    required: false,
-    default: '|',
-    type: String,
-  },
-  disabled: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  placeholder: {
-    required: false,
-    default: '',
-    type: String,
-  },
-  displayTextKey: {
-    required: false,
-    default: 'text',
-    type: String,
-  },
-})
+import _props from '../props/Select'
+
+const props: any = defineProps(_props)
+const modelValue = defineModel()
 const selectValue: any = ref(null)
-const emits = defineEmits(['update:modelValue'])
 watch(
   () => selectValue.value,
   () => {
-    emits('update:modelValue', selectValue.value)
+    modelValue.value = selectValue.value
   }
 )
 
@@ -69,7 +21,7 @@ watch(
   }
 )
 
-emits('update:modelValue', null)
+modelValue.value = null
 selectValue.value = null
 </script>
 
@@ -103,59 +55,4 @@ selectValue.value = null
   </div>
 </template>
 
-<style>
-.xl.glorious-select-orange, .xl.glorious-select-blue, .xl.glorious-select-gray, .xl.glorious-select-red, .xl.glorious-select-primary {
-  @apply py-[0.657rem];
-}
-.lg.glorious-select-orange, .lg.glorious-select-blue, .lg.glorious-select-gray, .lg.glorious-select-red, .lg.glorious-select-primary {
-  @apply py-[0.532rem];
-}
-.md.glorious-select-orange, .md.glorious-select-blue, .md.glorious-select-gray, .md.glorious-select-red, .md.glorious-select-primary {
-  @apply py-[0.407rem];
-}
-.sm.glorious-select-orange, .sm.glorious-select-blue, .sm.glorious-select-gray, .sm.glorious-select-red, .sm.glorious-select-primary {
-  @apply py-[0.282rem];
-}
-.xsm.glorious-select-orange, .xsm.glorious-select-blue, .xsm.glorious-select-gray, .xsm.glorious-select-red, .xsm.glorious-select-primary {
-  @apply py-[0.157rem];
-}
-
-.glorious-select-orange:focus-visible, .glorious-select-blue:focus-visible, .glorious-select-gray:focus-visible, .glorious-select-red:focus-visible, .glorious-select-primary:focus-visible {
-  @apply outline-none ring-2;
-}
-
-.glorious-select-primary {
-  @apply rounded-md ring-1 ring-green-500 px-3 text-gray-500 text-[14px];
-}
-.glorious-select-primary:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-red {
-  @apply rounded-md ring-1 ring-red-500 px-3;
-}
-.glorious-select-red:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3;
-}
-.glorious-select-gray:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3;
-}
-.glorious-select-blue:disabled {
-  @apply cursor-not-allowed;
-}
-
-.glorious-select-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3;
-}
-.glorious-select-orange:disabled {
-  @apply cursor-not-allowed;
-}
-</style>
+<style lang="scss" src="../../assets/style/components/select.scss" />

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

@@ -1,26 +1,11 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    required: false,
-    default: true,
-    type: Boolean,
-  },
-  checked: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  color: {
-    required: false,
-    default: 'green',
-    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
-  },
-})
+import _props from '../props/Switch'
 
-const emits = defineEmits(['update:modelValue'])
+const props = defineProps(_props)
+const modelValue = defineModel()
 const input = (e: Event) => {
   const target = e.target as HTMLInputElement
-  emits('update:modelValue', target.checked)
+  modelValue.value = target.checked
 }
 </script>
 
@@ -40,66 +25,4 @@ const input = (e: Event) => {
   </div>
 </template>
 
-<style>
-.switch {
-  direction: ltr;
-  --button-width: 3em;
-  --button-height: 1.5em;
-  --toggle-diameter: 1em;
-  --button-toggle-offset: calc(
-    (var(--button-height) - var(--toggle-diameter)) / 2
-  );
-  --toggle-shadow-offset: 10px;
-  --toggle-wider: 3em;
-}
-.switch-slider {
-  @apply bg-gray-300;
-  display: inline-block;
-  width: var(--button-width);
-  height: var(--button-height);
-  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.color-orange input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.orange.500");
-}
-.switch.color-blue input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.blue.500");
-}
-.switch.color-gray input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.gray.500");
-}
-.switch.color-red input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.red.500");
-}
-.switch.color-green input[type=checkbox]:checked + .switch-slider {
-  background-color: theme("colors.green.500");
-}
-.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>
+<style lang="scss" src="../../assets/style/components/switch.scss" />

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

@@ -1,23 +1,9 @@
 <script lang="ts" setup>
-interface itemsType {
-  active: boolean
-  text: string
-  key: string
-}
-const props = defineProps({
-  items: {
-    required: true,
-    default: [],
-    type: Array<itemsType>,
-  },
-  modelValue: {
-    required: true,
-    type: String,
-  },
-})
-const emits = defineEmits(['update:modelValue'])
+import _props from '../props/Tab'
+const props: any = defineProps(_props)
+const modelValue = defineModel()
 const tabClicked: any = (key: string, event: any) => {
-  emits('update:modelValue', key)
+  modelValue.value = key
   Array.from(event.currentTarget.parentElement.parentElement.children).map(
     (item: any) => item.children[0].classList.remove('active')
   )
@@ -65,7 +51,7 @@ const scrollPrevious = (event: Event) => {
   <div class="glorious-tab relative">
     <div
       @click="scrollNext($event)"
-      class="bg-green-700 absolute right-0 h-full top-0 w-8 justify-center items-center rounded-r-lg hidden cursor-auto"
+      class="bg-green-700 absolute right-0 h-full top-0 w-8 justify-center items-center rounded-r-lg hidden cursor-pointer"
     >
       <GIcon
         name="glorious-arrow"
@@ -104,14 +90,4 @@ const scrollPrevious = (event: Event) => {
   </div>
 </template>
 
-<style>
-.glorious-tab {
-  @apply flex justify-between bg-green-100 rounded-lg gap-3 w-max max-w-full shadow-md;
-}
-.glorious-tab div > div > button {
-  @apply text-gray-700 text-[14px] hover:bg-green-200 hover:text-gray-800 cursor-pointer px-2 py-1 rounded-lg;
-}
-.glorious-tab div > div > button.active {
-  @apply font-bold text-white bg-green-700;
-}
-</style>
+<style lang="scss" src="../../assets/style/components/tab.scss" />

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

@@ -1,34 +1,6 @@
 <script lang="ts" setup>
-const props = defineProps({
-  color: {
-    required: false,
-    default: 'blue',
-    type: String as () => 'orange' | 'blue' | 'gray' | 'red' | 'green',
-  },
-  header: {
-    required: true,
-    type: Object,
-  },
-  body: {
-    required: true,
-    type: Array<Object>,
-    default: [],
-  },
-  loading: {
-    required: false,
-    default: false,
-    type: Boolean,
-  },
-  loadingOption: {
-    required: false,
-    default: {
-      color: 'green',
-    },
-    type: {
-      color: String,
-    },
-  },
-})
+import _props from '../props/Table'
+const props = defineProps(_props)
 </script>
 
 <template>
@@ -76,107 +48,15 @@ const props = defineProps({
     >
       <GLoading :color="props.loadingOption.color" />
     </div>
+    <div
+      class="flex justify-center mt-3"
+      v-if="!props.loading && props.body.length === 0"
+    >
+      <div class="bg-white shadow p-2 rounded w-max">
+        <span> {{ props.emptyText }} </span>
+      </div>
+    </div>
   </div>
 </template>
 
-<style>
-.glorious-table {
-  @apply overflow-x-auto;
-}
-.glorious-table.color-orange > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-orange > table > thead > tr > th:first-child {
-  @apply rounded-r-lg bg-orange-400;
-}
-.glorious-table.color-orange > table > thead > tr > th {
-  @apply bg-orange-400;
-}
-.glorious-table.color-orange > table > thead > tr > th:last-child {
-  @apply rounded-l-lg bg-orange-400;
-}
-.glorious-table.color-orange > table > tbody > tr:nth-child(even) {
-  @apply bg-orange-50;
-}
-.glorious-table.color-orange > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table.color-blue > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-blue > table > thead > tr > th:first-child {
-  @apply rounded-r-lg bg-blue-400;
-}
-.glorious-table.color-blue > table > thead > tr > th {
-  @apply bg-blue-400;
-}
-.glorious-table.color-blue > table > thead > tr > th:last-child {
-  @apply rounded-l-lg bg-blue-400;
-}
-.glorious-table.color-blue > table > tbody > tr:nth-child(even) {
-  @apply bg-blue-50;
-}
-.glorious-table.color-blue > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table.color-gray > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-gray > table > thead > tr > th:first-child {
-  @apply rounded-r-lg bg-gray-400;
-}
-.glorious-table.color-gray > table > thead > tr > th {
-  @apply bg-gray-400;
-}
-.glorious-table.color-gray > table > thead > tr > th:last-child {
-  @apply rounded-l-lg bg-gray-400;
-}
-.glorious-table.color-gray > table > tbody > tr:nth-child(even) {
-  @apply bg-gray-50;
-}
-.glorious-table.color-gray > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table.color-red > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-red > table > thead > tr > th:first-child {
-  @apply rounded-r-lg bg-red-400;
-}
-.glorious-table.color-red > table > thead > tr > th {
-  @apply bg-red-400;
-}
-.glorious-table.color-red > table > thead > tr > th:last-child {
-  @apply rounded-l-lg bg-red-400;
-}
-.glorious-table.color-red > table > tbody > tr:nth-child(even) {
-  @apply bg-red-50;
-}
-.glorious-table.color-red > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table.color-green > table > thead {
-  @apply rounded-t-md overflow-hidden;
-}
-.glorious-table.color-green > table > thead > tr > th:first-child {
-  @apply rounded-r-lg bg-green-400;
-}
-.glorious-table.color-green > table > thead > tr > th {
-  @apply bg-green-400;
-}
-.glorious-table.color-green > table > thead > tr > th:last-child {
-  @apply rounded-l-lg bg-green-400;
-}
-.glorious-table.color-green > table > tbody > tr:nth-child(even) {
-  @apply bg-green-50;
-}
-.glorious-table.color-green > table > tbody > tr > td {
-  @apply px-4 py-2 text-center;
-}
-.glorious-table > table {
-  @apply w-full;
-}
-.glorious-table > table > thead > tr > th {
-  @apply px-4 py-2 text-center;
-}
-</style>
+<style lang="scss" src="../../assets/style/components/table.scss" />