@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/pages/BtnToggle.vue

@@ -0,0 +1,131 @@
+<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

@@ -0,0 +1,62 @@
+<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

@@ -0,0 +1,108 @@
+<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 isShowTooltip = 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"
+  :isShowTooltip="isShowTooltip"
+  :offset="[14, 14]"
+  anchor="bottom middle"
+/>`
+
+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"
+          :isShowTooltip="isShowTooltip"
+          :offset="[14, 14]"
+          anchor="bottom middle"
+        />
+      </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="isShowTooltip"
+              label="Show Tooltip"
+            />
+          </div>
+
+          <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>

package/src/pages/ComponentBase.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { openURL } from 'quasar'
+
+defineProps({
+  figmaUrl: {
+    type: String,
+    default: 'https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components',
+  },
+  cardWidth: {
+    // cardWidth added for the tabs component only to show the tabs alignment left and right
+    type: String,
+    default: 'auto',
+  },
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center" style="width: 100%">
+    <q-card bordered flat :style="{ minWidth: '420px', width: cardWidth }">
+      <q-card-section>
+        <span class="text-h6">Component</span>
+        <div>
+          <slot name="component" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-neutral-4">
+        <span class="text-h6">Properties</span>
+        <div>
+          <slot name="properties" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-secondary text-grey-1">
+        <span class="text-h6">Code</span>
+        <div>
+          <slot name="code" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-primary text-grey-1">
+        <span class="text-h6">Figma</span>
+        <div>
+          <q-btn
+            label="Link to Figma"
+            icon-right="open_in_new"
+            flat
+            @click="openURL(figmaUrl)"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>

package/src/pages/Dialog.vue

@@ -0,0 +1,221 @@
+<script setup>
+import ComponentBase from './ComponentBase.vue'
+import UDialogStd from 'src/components/core/UDialogStd.vue'
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import { ref } from 'vue'
+
+const handleBackclick = () => {
+  alert('Back clicked')
+}
+const model = ref(true)
+const heading = ref('Test Heading')
+const position = ref('right')
+const leftIcon = ref('fa-kit-duotone fa-circle-arrow-left')
+const closeIcon = ref('fa-kit-duotone fa-circle-xmark')
+const showActionButtons = ref(true)
+const caption = ref('This is the caption')
+const divider = ref(true)
+const size = ref('half')
+const tab = ref('movie')
+const customSize = ref('75%')
+
+const htmlContent = `<UDialogStd
+  :heading="heading"
+  :position="position"
+  :size="size"
+  :customSize="customSize"
+  :headingCaption="caption"
+  @onBackIconClick="handleBackclick()"
+  :showActionButtons="showActionButtons"
+  :closeIcon="closeIcon"
+  :leftIcon="leftIcon"
+  leftIconLabel="Back Icon"
+  closeIconLabel="Close Icon"
+  :divider="divider"
+  v-model="model"
+>
+  <template #content>
+    ..Your Content
+  </template>
+  <template #secondary_row>
+  ...Your Content
+  </template>
+  <template #action_primary_one>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_primary_two>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_secondary_one>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_secondary_two>
+    ...Your Content. Mainly Button
+  </template>
+</UDialogStd>`
+defineOptions({
+  name: 'DialogStd',
+})
+
+const hideDialog = () => {
+  model.value = false
+}
+
+const showDialog = () => {
+  model.value = true
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4982-91225&t=BcmxEUWPCe0DzRmH-0"
+    >
+      <template v-slot:component>
+        <UBtnStd
+          color="primary"
+          label="Show"
+          size="md"
+          @onClick="showDialog()"
+        ></UBtnStd>
+        <UDialogStd
+          :heading="heading"
+          :position="position"
+          :size="size"
+          :customSize="customSize"
+          :headingCaption="caption"
+          @onBackIconClick="handleBackclick()"
+          :showActionButtons="showActionButtons"
+          :closeIcon="closeIcon"
+          :leftIcon="leftIcon"
+          leftIconLabel="Back Icon"
+          closeIconLabel="Close Icon"
+          :divider="divider"
+          v-model="model"
+        >
+          <template #content>
+            <p v-for="n in 15" :key="n">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
+              repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis
+              perferendis totam, ea at omnis vel numquam exercitationem aut,
+              natus minima, porro labore.
+            </p>
+          </template>
+          <template #secondary_row>
+            <q-tabs
+              v-model="tab"
+              dense
+              class="bg-primary text-white full-width"
+              active-color="white"
+              indicator-color="white"
+              align="justify"
+            >
+              <q-tab name="mails" label="Mails" />
+              <q-tab name="alarms" label="Alarms" />
+              <q-tab name="movies" label="Movies" />
+            </q-tabs>
+          </template>
+          <template #action_primary_one>
+            <UBtnStd
+              label="Cancel"
+              size="md"
+              color="primary"
+              outline
+              @onClick="hideDialog()"
+            ></UBtnStd>
+          </template>
+          <template #action_primary_two>
+            <UBtnStd label="Save" size="md" color="primary"></UBtnStd>
+          </template>
+          <template #action_secondary_one>
+            <UBtnStd label="Remove" size="md" color="accent"></UBtnStd>
+          </template>
+          <template #action_secondary_two>
+            <UBtnStd label="Delete" size="md" color="accent"></UBtnStd>
+          </template>
+        </UDialogStd>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Heading" v-model="heading" />
+          <q-input label="Caption" v-model="caption" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+          <q-input label="Close Icon" v-model="closeIcon" />
+
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Size</span>
+            <div>
+              <q-radio dense v-model="size" val="default" label="Default" />
+              <q-radio
+                dense
+                v-model="size"
+                val="half"
+                label="Half"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="size"
+                val="full"
+                label="Full"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="size"
+                val="custom"
+                label="Custom"
+                class="q-pa-sm"
+              />
+              <q-input
+                v-if="size === 'custom'"
+                label="Custom Size"
+                v-model="customSize"
+              />
+            </div>
+          </div>
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Position</span>
+            <div>
+              <q-radio dense v-model="position" val="left" label="Left" />
+              <q-radio
+                dense
+                v-model="position"
+                val="right"
+                label="Right"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="position"
+                val="top"
+                label="Top"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="position"
+                val="bottom"
+                label="Bottom"
+                class="q-pa-sm"
+              />
+            </div>
+          </div>
+          <div>
+            <q-checkbox
+              size="xs"
+              v-model="showActionButtons"
+              label="Show Buttons"
+            />
+            <q-checkbox size="xs" v-model="divider" label="Divider" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>