<template>
  <router-view />
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup></script>

<script>
const linksList = [
  {
    title: 'Typography',
    caption: 'quasar.dev',
    icon: 'school',
    link: 'https://quasar.dev',
  },
];
</script>

<script setup>
import { defineComponent, ref } from 'vue';
import EssentialLink from 'components/EssentialLink.vue';

const leftDrawerOpen = ref(false);
const essentialLinks = linksList;
const toggleLeftDrawer = () => (leftDrawerOpen.value = !leftDrawerOpen.value);
</script>

<script>
const linksList = [
  {
    title: 'Typography',
    caption: 'quasar.dev',
    icon: 'school',
    to: '/typography',
  },
];
</script>

// asis 코드
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'EssentialLink',
  props: {
    title: {
      type: String,
      required: true,
    },

    caption: {
      type: String,
      default: '',
    },

    link: {
      type: String,
      default: '#',
    },

    icon: {
      type: String,
      default: '',
    },
  },
});
</script>

// tobe 코드
// setup 문법으로 바뀌면서 defineProps() 사용
<script setup>
defineProps({
  title: {
    type: String,
    required: true,
  },

  caption: {
    type: String,
    default: '',
  },

  link: {
    type: String,
    default: '#',
  },

  icon: {
    type: String,
    default: '',
  },
});
</script>

<script>
export default {
  name: 'TypographyComp',
};
</script>

<template>
  <q-page class="q-pa-xl">
    <section>
      <div class="text-h4 nanumBrush">HEADINGS</div>
      <p class="text-h1">Headline 1</p>
      <p class="text-h6">Headline 6</p>
      <p class="text-subtitle1">Subtitle 1</p>
      <p class="text-subtitle2">Subtitle 2</p>
      <p class="text-body1">
        Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore
        consectetur, neque doloribus, cupiditate numquam dignissimos laborum
        fugiat deleniti? Eum quasi quidem quibusdam.
      </p>
      <p class="text-caption">Caption text</p>
      <p class="text-overline">Overline</p>
    </section>
    <section>
      <div class="text-h4 nanumBrush">CSS HELPER CLASS</div>
      <p class="text-weight-thin text-right">
        Lorem Ipsum is simply dummy text
      </p>
      <p class="text-weight-light text-center">
        Lorem Ipsum is simply dummy text
      </p>
      <p class="text-weight-regular text-strike text-uppercase">
        Lorem Ipsum is simply dummy text
      </p>
    </section>
  </q-page>
</template>

<q-page class="q-pa-xl">
    <section class="q-mb-xl">
      <div class="text-h4 nanumBrush">Brand Colors</div>
      <q-separator class="q-my-md" />
      <div class="bg-primary">Primary</div>
      <div class="bg-secondary">Secondary</div>
      <div class="bg-accent">Accent</div>
      <div class="bg-dark">Dark</div>
      <div class="bg-positive">Positive</div>
      <div class="bg-negative">Negative</div>
      <div class="bg-info">Info</div>
      <div class="bg-warning">Warning</div>
      <q-separator class="q-my-md" />
      <div class="text-h4 nanumBrush">Color List</div>
      <div class="bg-red-6">red-6</div>
      <div class="bg-lime-7">lime-7</div>
      <div class="bg-pink-4">pink-4</div>
      <div class="bg-yellow-8">yellow-8</div>
      <div class="bg-teal-14">teal-14</div>
      <q-separator class="q-my-md" />
      <div class="text-h4 nanumBrush">Text</div>
      <div class="text-primary bg-grey-2">Text Primary</div>
      <div class="text-secondary bg-grey-8">Text Secondary</div>
      <div class="text-red-6 bg-grey-10">Text Red</div>
    </section>
  </q-page>

<section class="q-mb-xl">
  <p>Variables</p>
</section>

<style lang="scss" scoped>
p {
  color: $yellow-6;
  background-color: $grey-7;
}
</style>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">Components</div>
  <q-separator class="q-my-md" />
  <div class="q-pa-md q-gutter-sm">
    <q-btn label="버튼" color="primary" text-color="yellow-7"></q-btn>
    <q-btn label="버튼" color="ynjch" text-color="ynjch"></q-btn>
  </div>
</section>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">Components</div>
  <q-separator class="q-my-md" />
  <div class="q-pa-md q-gutter-sm">
    <q-btn color="white" text-color="black" label="Standard" />
    <q-btn color="primary" label="Primary" />
    <q-btn color="secondary" label="Secondary" />
    <q-btn color="amber" glossy label="Amber" />
    <q-btn color="brown-5" label="Brown 5" />
    <q-btn color="deep-orange" glossy label="Deep Orange" />
    <q-btn color="purple" label="Purple" />
    <q-btn color="black" label="Black" />
    <q-btn style="background: #ff0080; color: white" label="Fuchsia" />
    <q-btn flat style="color: #ff0080" label="Fuchsia Flat" />
    <q-btn style="background: goldenrod; color: white" label="Goldenrod" />
    <q-btn outline style="color: goldenrod" label="Goldenrod" />
    <q-btn color="grey-4" text-color="purple" glossy unelevated icon="camera_enhance" label="Purple text" />
  </div>
</section>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">Spacing</div>
  <q-separator class="q-my-md" />
  <div class="bg-primary q-pa-xs q-mt-md">
    <div class="bg-dark text-white">
      There are CSS classes supplied by Quasar to help you with spacing for
      DOM elements or components.
    </div>
  </div>
  <div class="bg-primary q-pa-sm q-mt-md">
    <div class="bg-dark text-white">
      There are CSS classes supplied by Quasar to help you with spacing for
      DOM elements or components.
    </div>
  </div>
  <div class="bg-primary q-pa-md q-mt-md">
    <div class="bg-dark text-white">
      There are CSS classes supplied by Quasar to help you with spacing for
      DOM elements or components.
    </div>
  </div>
  <div class="bg-primary q-pa-lg q-mt-md">
    <div class="bg-dark text-white">
      There are CSS classes supplied by Quasar to help you with spacing for
      DOM elements or components.
    </div>
  </div>
  <div class="bg-primary q-pa-xl q-mt-md">
    <div class="bg-dark text-white">
      There are CSS classes supplied by Quasar to help you with spacing for
      DOM elements or components.
    </div>
  </div>
</section>

    <section class="q-mb-xl">
      <div class="text-h4 nanumBrush">Components</div>
      <q-separator class="q-my-md" />
      <q-card class="my-card bg-secondary text-white q-mx-auto" style="width: 400px">
        <q-card-section>
          <div class="text-h6">Our Changing Planet</div>
          <div class="text-subtitle2">by John Doe</div>
        </q-card-section>

        <q-card-section>
          {{ lorem }}
        </q-card-section>

        <q-separator dark />

        <q-card-actions>
          <q-btn outline padding="md">Action 1</q-btn>
          <q-btn outline padding="none">Action 2</q-btn>
        </q-card-actions>
      </q-card>
    </section>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">중앙 정렬</div>
  <q-separator class="q-my-md" />
  <div class="bg-primary q-mt-md flex flex-center" style="width: 100%; height: 400px">
    <div class="bg-dark text-white" style="width: 100px; height: 100px">
      중앙 정렬
    </div>
  </div>
</section>

<div class="target"></div>

<style lang="scss" scoped>
.target {
  height: 200px;
  background-color: $dark;
}

@media (max-width: 500px) {
  .target {
    height: 200px;
    background-color: $red;
  }
}
</style>

<div class="target"></div>

<style lang="scss" scoped>
.target {
  height: 200px;
  background-color: $dark;
}

@media (max-width: $breakpoint-xs-max) {
  .target {
    height: 200px;
    background-color: $red;
  }
}

.target {
  body.screen--sm & {
    background-color: $yellow-3;
  }
  body.screen--xs & {
    background-color: $teal-3;
  }
}
</style>

<script>
export default {
  mounted() {
    console.log('this.$q.screen > ', this.$q.screen);
  },
};
</script>

<script setup>
import { useQuasar } from 'quasar';
const $q = useQuasar();
console.log('setup -> q.screen > ', $q.screen);
</script>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">$q.screen</div>
  <q-separator class="q-my-md" />
  <div class="text-subtitle1">
    <ul>
      <li v-for="(value, key) in $q.screen" :key="key">
        <span class="inline-block" style="width: 120px">{{ key }}</span>
        : <span>{{ isFunction(value) ? '함수' : value }}</span>
      </li>
    </ul>
  </div>
</section>

<script setup>
  const isFunction = value => typeof value === 'function';
</script>

<section class="q-mb-xl">
  <div class="text-h4 nanumBrush">$q.screen 과 v-if</div>
  <q-separator class="q-my-md" />
  <div v-if="$q.screen.gt.sm" class="target flex flex-center">
    <span class="text-h2 text-weight-bold text-grey">
      {{ $q.screen.name }}
    </span>
  </div>
</section>

<template>
  <q-page class="q-pa-md q-pa-md-xl">
    <section class="q-mb-xl">