@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.210

package/src/pages/BadgeStd.vue

@@ -1,83 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue'
-import ComponentBase from './ComponentBase.vue'
-import { UBadgeStd } from 'src/components'
-
-const color = ref('primary')
-const colorOptions = ['primary', 'accent', 'warning', 'positive', 'neutral']
-
-const size = ref('md')
-const type = ref('basic')
-const sizeOptions = ['xxs', 'xs', 'sm', 'md', 'lg']
-watch(type, () => {
-  size.value = type.value === 'indicator' ? 'xxs' : 'md'
-})
-const filteredSizeOptions = computed(() => {
-  if (type.value === 'indicator') {
-    return sizeOptions.filter((size) => size !== 'md' && size !== 'lg')
-  }
-  return ['md', 'lg']
-})
-const label = ref('01')
-const htmlContent = `<UBadgeStd
-  :label="label"
-  :color="color"
-  :size="size"
-  :type="type"
-/>`
-defineOptions({
-  name: 'BtnStd',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=508-19370&t=DR7gF8DTYY1JvngY-0"
-    >
-      <template v-slot:component>
-        <UBadgeStd :label="label" :color="color" :size="size" :type="type" />
-      </template>
-
-      <template v-slot:properties
-        ><div class="column q-gutter-y-lg">
-          <div class="container column">
-            <div class="q-gutter-sm">
-              <div class="q-mt-md">
-                <q-label>Label</q-label>
-                <q-input v-model="label"></q-input>
-              </div>
-              <q-select v-model="color" :options="colorOptions" label="Color" />
-              <q-select
-                v-model="size"
-                :options="filteredSizeOptions"
-                label="Size"
-              />
-              <div>
-                <q-label class="q-mr-sm">Type</q-label>
-
-                <q-radio
-                  dense
-                  v-model="type"
-                  val="basic"
-                  label="Basic"
-                  class="q-pr-sm"
-                />
-                <q-radio
-                  dense
-                  v-model="type"
-                  val="indicator"
-                  label="Indicator"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/BannerPage.vue

@@ -1,76 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import ComponentBase from './ComponentBase.vue'
-import { UBannerStd } from 'src/components'
-
-defineOptions({
-  name: 'BannerPage',
-})
-
-const htmlContent = `<UBannerStd
-  :type="type"
-  :show="show"
-  :primaryActionLabel="primaryActionLabel"
-  :secondaryActionLabel="secondaryActionLabel"
-  :message="message"
-  @primaryAction="handlePrimaryActionClick"
-  @secondaryAction="handleSecondaryActionClick"
-  :icon="icon"
-/>`
-
-const typeOptions = ['info', 'positive', 'accent', 'warning', 'primary']
-
-const type = ref('primary')
-const message = ref('This is banner message.')
-const icon = ref('fa-kit-duotone fa-circle-info')
-const primaryActionLabel = ref('Submit')
-const secondaryActionLabel = ref('Close')
-const show = ref(true)
-
-const handlePrimaryActionClick = () => {
-  alert('First Clicked')
-}
-
-const handleSecondaryActionClick = () => {
-  alert('Second Clicked')
-}
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2145-13266&m=dev"
-      cardWidth="70%"
-    >
-      <template v-slot:component>
-        <UBannerStd
-          :type="type"
-          :show="show"
-          :primaryActionLabel="primaryActionLabel"
-          :secondaryActionLabel="secondaryActionLabel"
-          :message="message"
-          @primaryAction="handlePrimaryActionClick"
-          @secondaryAction="handleSecondaryActionClick"
-          :icon="icon"
-        />
-      </template>
-      <template v-slot:properties>
-        <div class="column q-gutter-y-md">
-          <q-toggle v-model="show" label="Show" />
-          <q-input label="Message" v-model="message" />
-          <q-input label="Icon" v-model="icon" />
-          <q-select v-model="type" :options="typeOptions" label="Type" />
-          <q-input label="Primary Action label" v-model="primaryActionLabel" />
-          <q-input
-            label="Secondary Action label"
-            v-model="secondaryActionLabel"
-          />
-        </div>
-      </template>
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>
-<style lang="sass"></style>

package/src/pages/BtnIcon.vue

@@ -1,120 +0,0 @@
-<script setup>
-import { UBtnIcon } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-import { ref } from 'vue'
-
-const color = ref('primary')
-const colorOptions = ['primary', 'neutral', 'accent', 'transparent']
-
-const tooltip = ref('Tooltip')
-const anchorOptions = [
-  'top left',
-  'top middle',
-  'top right',
-  'top start',
-  'top end',
-  'center left',
-  'center middle',
-  'center right',
-  'center start',
-  'center end',
-  'bottom left',
-  'bottom middle',
-  'bottom right',
-  'bottom start',
-  'bottom end',
-]
-
-const selfOptions = [
-  'top left',
-  'top middle',
-  'top right',
-  'top start',
-  'top end',
-  'center left',
-  'center middle',
-  'center right',
-  'center start',
-  'center end',
-  'bottom left',
-  'bottom middle',
-  'bottom right',
-  'bottom start',
-  'bottom end',
-]
-const ariaLabel = ref('Btn Icon')
-const size = ref('sm')
-const sizeOptions = ['sm', 'md', 'lg']
-const anchor = ref('center left')
-const self = ref('center end')
-
-const iconClass = ref('fa-kit-duotone fa-circle-bolt')
-
-const htmlContent = `<UBtnIcon
-   ref="btn-icon"
-  :size="size"
-  :ariaLabel="ariaLabel"
-  :color="color"
-  :iconClass="iconClass"
-  :tooltip="tooltip"
-  :anchor="anchor"
-  :self="self"
-  />`
-
-defineOptions({
-  name: 'BtnIcon',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2710-35247"
-    >
-      <template v-slot:component>
-        <UBtnIcon
-          ref="btn-icon"
-          :size="size"
-          :ariaLabel="ariaLabel"
-          :color="color"
-          :iconClass="iconClass"
-          :tooltip="tooltip"
-          :anchor="anchor"
-          :self="self"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Aria Label" v-model="ariaLabel"></q-input>
-          <q-select v-model="color" :options="colorOptions" label="Color" />
-          <q-input label="Icon Class" v-model="iconClass"></q-input>
-          <q-select v-model="size" :options="sizeOptions" label="Icon Size" />
-
-          <div class="q-my-md">
-            <q-input v-model="tooltip" label="Tooltip"></q-input>
-          </div>
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Tooltip Position</span>
-            <div>
-              <q-select
-                v-model="anchor"
-                :options="anchorOptions"
-                label="Anchor Origin"
-              />
-              <q-select
-                v-model="self"
-                :options="selfOptions"
-                label="Self Origin"
-              />
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/BtnStd.vue

@@ -1,126 +0,0 @@
-<script setup>
-import ComponentBase from './ComponentBase.vue'
-import UBtnStd from '../components/core/UBtnStd.vue'
-import { computed, ref } from 'vue'
-
-const color = ref('primary')
-const colorOptions = [
-  'positive',
-  'info',
-  'warning',
-  'neutral',
-  'primary',
-  'accent',
-]
-
-const size = ref('sm')
-const sizeOptions = ['sm', 'md', 'lg']
-const disabled = ref(false)
-const type = ref('standard')
-const label = ref('Button')
-
-const flat = computed(() => {
-  return type.value === 'flat'
-})
-const outline = computed(() => {
-  return type.value === 'outline'
-})
-
-const leftIcon = computed(() => {
-  return iconLeft.value ? 'fa-kit-duotone fa-triangle-exclamation' : ''
-})
-const rightIcon = computed(() => {
-  return iconRight.value ? 'fa-kit-duotone fa-triangle-exclamation' : ''
-})
-
-const iconLeft = ref(false)
-const iconRight = ref(false)
-const fullWidth = ref(false)
-const htmlContent =
-  '<UBtnStd\n :size="size"\n :label="label"\n :color="color"\n :outline="outline"\n :disable="disabled"\n :flat="flat"\n :left-icon="leftIcon"\n :right-icon="rightIcon"\n :full-width="fullWidth"\n/>'
-
-defineOptions({
-  name: 'BtnStd',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-18&t=W9U6NqDHbuiUvAxN-0"
-    >
-      <template v-slot:component>
-        <u-btn-std
-          ref="btn"
-          :size="size"
-          :label="label"
-          :color="color"
-          :outline="outline"
-          :disable="disabled"
-          :flat="flat"
-          :left-icon="leftIcon"
-          :right-icon="rightIcon"
-          :full-width="fullWidth"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Label" v-model="label" />
-
-          <q-select v-model="color" :options="colorOptions" label="Color" />
-          <q-select v-model="size" :options="sizeOptions" label="Size" />
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Type</span>
-            <div>
-              <q-radio
-                dense
-                v-model="type"
-                val="standard"
-                label="Default/Standard"
-              />
-              <q-radio
-                dense
-                v-model="type"
-                val="flat"
-                label="Flat"
-                class="q-pa-sm"
-              />
-              <q-radio dense v-model="type" val="outline" label="Outline" />
-            </div>
-          </div>
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Icons</span>
-            <div>
-              <q-checkbox
-                size="xs"
-                v-model="iconLeft"
-                val="fa-kit-duotone fa-triangle-exclamation"
-                label="Left Icon"
-              />
-              <q-checkbox
-                size="xs"
-                v-model="iconRight"
-                val="fa-kit-duotone fa-triangle-exclamation"
-                label="Right Icon"
-              />
-            </div>
-          </div>
-
-          <div>
-            <q-checkbox size="xs" v-model="fullWidth" label="Full Width" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="disabled" label="Disable" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/BtnToggle.vue

@@ -1,131 +0,0 @@
-<script setup>
-import ComponentBase from './ComponentBase.vue'
-import UBtnToggle from 'src/components/core/UBtnToggle.vue'
-
-import { computed, ref } from 'vue'
-
-const toggleOptions = ref([
-  {
-    value: 'one',
-    slot: 'first',
-    name: 'Add new',
-    iconClass: 'fa-kit-duotone fa-circle-info',
-  },
-  {
-    value: 'two',
-    slot: 'second',
-    name: 'Pending invitations',
-    iconClass: 'fa-kit-duotone fa-circle-info',
-  },
-])
-
-const onAdd = () => {
-  toggleOptions.value.push({
-    value: '',
-    slot: '',
-    name: '',
-    iconClass: '',
-  })
-}
-
-const onRemove = () => {
-  toggleOptions.value.pop()
-}
-
-const model = ref('two')
-
-const htmlContent = `<UBtnToggle
-  :options="toggleOptions"
-  v-model="model"
-/>`
-
-const contentInfo = `The options should looklike [{
-    value: 'one',
-    slot: 'first',
-    name: 'Add new',
-    iconClass: 'fa-kit-duotone fa-circle-info',
-  },
-  {
-    value: 'two',
-    slot: 'second',
-    name: 'Pending invitations',
-    iconClass: 'fa-kit-duotone fa-circle-info',
-  },`
-
-defineOptions({
-  name: 'BtnToggle',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-18&t=lUWZsHyIzqTPpTfg-0"
-      card-width="70%"
-    >
-      <template v-slot:component>
-        <UBtnToggle :options="toggleOptions" v-model="model" />
-        <span>You selected option {{ model }}</span>
-      </template>
-
-      <template v-slot:properties>
-        <div class="q-gutter-x-sm q-pb-sm">
-          <q-btn label="Add" @click="onAdd()"></q-btn>
-          <q-btn
-            label="Remove"
-            @click="onRemove()"
-            :disable="toggleOptions.length <= 2"
-          ></q-btn>
-          <p>Make sure to have different slot and value name</p>
-        </div>
-
-        <div class="column q-gutter-y-lg" style="position: relative">
-          <div
-            v-for="(option, index) in toggleOptions"
-            :key="option"
-            class="column"
-          >
-            <div class="justify-start items-center">Option {{ index + 1 }}</div>
-            <div class="row q-gutter-x-sm">
-              <q-input
-                class="col-12 col-md-3"
-                placeholder="Slot"
-                v-model="option.slot"
-                label="Slot"
-                @input="updateItem(index, 'slot', option.slot)"
-              ></q-input>
-              <q-input
-                class="col-12 col-md-3"
-                placeholder="Value"
-                label="Value"
-                v-model="option.value"
-                @input="updateItem(index, 'value', option.value)"
-              ></q-input>
-              <q-input
-                class="col-12 col-md-3"
-                placeholder="Label"
-                label="Label"
-                v-model="option.name"
-                @input="updateItem(index, 'name', option.name)"
-              ></q-input>
-              <q-input
-                placeholder="Icon"
-                label="Icon"
-                class="col-12 col-md-4"
-                v-model="option.iconClass"
-                @input="updateItem(index, 'iconClass', option.iconClass)"
-              ></q-input>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-        <pre class="text-neutral-6" style="font-size: 12px; font-weight: 600">{{
-          contentInfo
-        }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/CheckBox.vue

@@ -1,62 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue'
-import ComponentBase from './ComponentBase.vue'
-import { UCheckboxStd } from 'src/components'
-
-const label = ref('Checkbox')
-const checked = ref(false)
-const disabled = ref(false)
-const variant = ref('With Label')
-const variantOptions = ['With Label', 'Without Label']
-const showLabel = computed(() => {
-  return variant.value === 'With Label'
-})
-
-const htmlContent = `<UCheckboxStd
-  v-model="checked"
-  :label="label"
-  :showLabel="showLabel"
-  :disabled="disabled"
-  :id="u-checkbox"
-/>`
-
-defineOptions({
-  name: 'CheckBox',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2293-164568&t=W9U6NqDHbuiUvAxN-0"
-    >
-      <template v-slot:component>
-        <div class="q-mt-sm">
-          <UCheckboxStd
-            v-model="checked"
-            :label="label"
-            :showLabel="showLabel"
-            :disabled="disabled"
-            id="playground"
-          />
-        </div>
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Label" v-model="label" />
-          <q-select
-            v-model="variant"
-            :options="variantOptions"
-            label="Variant"
-          />
-          <q-checkbox size="xs" v-model="disabled" label="Disable" />
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/Chip.vue

@@ -1,92 +0,0 @@
-<script setup>
-import { UChip } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-import { ref } from 'vue'
-
-const chipLabel = ref('Label')
-const avatarLabel = ref('OR')
-const type = ref('primary')
-const iconClass = ref('')
-const typeOptions = [
-  'primary',
-  'accent',
-  'positive',
-  'warning',
-  'info',
-  'neutral',
-  'yellow',
-  'teal',
-  'gold',
-  'pink',
-]
-
-const dense = ref(false)
-const removable = ref(false)
-const modelVal = ref(true)
-
-const htmlContent = ` <UChip
-          ref="chip"
-          v-model="modelVal"
-          @update:modelValue="modelVal = $event"
-          :type="type"
-          :dense="dense"
-          :iconClass="iconClass"
-          :avatarLabel="avatarLabel"
-          :chipLabel="chipLabel"
-          :removable="removable"
-        />`
-
-defineOptions({
-  name: 'UChip',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2281-51609"
-    >
-      <template v-slot:component>
-        <UChip
-          ref="chip"
-          v-model="modelVal"
-          @update:modelValue="modelVal = $event"
-          :type="type"
-          :dense="dense"
-          :iconClass="iconClass"
-          :avatarLabel="avatarLabel"
-          :chipLabel="chipLabel"
-          :removable="removable"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Chip Label" v-model="chipLabel"></q-input>
-          <q-input label="Avatar Label" v-model="avatarLabel"></q-input>
-          <!-- <q-input label="Icon" v-model="icon"></q-input> -->
-          <q-input label="Icon Class" v-model="iconClass"></q-input>
-          <q-select v-model="type" :options="typeOptions" label="Chip Type" />
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
-            <q-checkbox size="xs" v-model="dense" :val="true" label="Dense" />
-          </div>
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Removable</span>
-            <q-checkbox
-              size="xs"
-              v-model="removable"
-              :val="true"
-              label="Removable"
-            />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>