1,569th Commit

app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/+page.vue

@@ -2,21 +2,25 @@
 import { reactive } from 'vue';
 import { XBreadcrumb, XCard, XSelect } from '@x/ui';
 
-import WithTable from './WithTable.vue';
-import WithTableInDialog from './WithTableInDialog.vue';
 import WithinPopover from './WithinPopover.vue';
+import WithinTableCell from './WithinTableCell.vue';
+import WithinTableCellWithinDialog from './WithinTableCellWithinDialog.vue';
 
 const flux = reactive({
   select1: '',
   select1Options: [
-    { label: 'Angular', value: 'f1' },
-    { label: 'React', value: 'f2' },
-    { label: 'Svelte', value: 'f3' },
-    { label: 'Vue', value: 'f4' },
-    { label: 'Nest', value: 'b1' },
-    { label: 'Express', value: 'b2' },
-    { label: 'Fastify', value: 'b3' },
-    { label: 'Koa', value: 'b4' },
+    { label: 'Angular', value: 'angular' },
+    { label: 'React', value: 'react' },
+    { label: 'Svelte', value: 'svelte' },
+    { label: 'Vue', value: 'vue' },
+    { label: 'Nest', value: 'nest' },
+    { label: 'Express', value: 'express' },
+    { label: 'Fastify', value: 'fastify' },
+    { label: 'Koa', value: 'koa' },
+    { label: 'Analog', value: 'analog' },
+    { label: 'Next', value: 'next' },
+    { label: 'SvelteKit', value: 'svelte-kit' },
+    { label: 'Nuxt', value: 'nuxt' },
   ],
 });
 </script>
@@ -86,31 +90,31 @@ const flux = reactive({
   </section>
 
   <section class="my-8">
-    <h2 class="text-3xl font-bold my-4 pt-6">With Table</h2>
+    <h2 class="text-3xl font-bold my-4 pt-6">Within Popover</h2>
 
     <XCard>
-      <WithTable />
+      <WithinPopover />
     </XCard>
-
-    <section class="my-4">
-      <h3 class="text-2xl font-semibold my-4 pt-2">In Dialog</h3>
-
-      <XCard>
-        <WithTableInDialog />
-      </XCard>
-    </section>
   </section>
 
   <section class="my-8">
-    <h2 class="text-3xl font-bold my-4 pt-6">Within Popover</h2>
+    <h2 class="text-3xl font-bold my-4 pt-6">Within TableCell</h2>
 
     <XCard>
-      <WithinPopover />
+      <WithinTableCell />
     </XCard>
+
+    <section class="my-4">
+      <h3 class="text-2xl font-semibold my-4 pt-2">Within TableCell within Dialog</h3>
+
+      <XCard>
+        <WithinTableCellWithinDialog />
+      </XCard>
+    </section>
   </section>
 
   <section class="my-8">
-    <h2 class="text-3xl font-bold my-4 pt-6">Option Groups (TODO)</h2>
+    <h2 class="text-3xl font-bold my-4 pt-6">Group (TODO)</h2>
 
     <XCard>
       <!--  -->

app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/WithTable.vue → app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/WithinTableCell.vue

@@ -47,27 +47,31 @@ const flux = reactive({
     :rows="flux.rows"
   >
     <template #C="{ row }">
-      <XSelect
-        v-model:value="row.C"
-        :options="
-          ['Padding', 'Margin', 'Space Between'].map((item) => ({ label: item, value: item }))
-        "
-      />
+      <div class="w-48 py-1">
+        <XSelect
+          v-model:value="row.C"
+          :options="
+            ['Padding', 'Margin', 'Space Between'].map((item) => ({ label: item, value: item }))
+          "
+        />
+      </div>
     </template>
 
     <template #H="{ row }">
-      <XSelect
-        v-model:value="row.H"
-        :options="
-          [
-            'Box Shadow',
-            'Box Shadow Color',
-            'Opacity',
-            'Mix Blend Mode',
-            'Background Blend Mode',
-          ].map((item) => ({ label: item, value: item }))
-        "
-      />
+      <div class="w-48 py-1">
+        <XSelect
+          v-model:value="row.H"
+          :options="
+            [
+              'Box Shadow',
+              'Box Shadow Color',
+              'Opacity',
+              'Mix Blend Mode',
+              'Background Blend Mode',
+            ].map((item) => ({ label: item, value: item }))
+          "
+        />
+      </div>
     </template>
   </XTable>
 </template>

app/src/routes/(backstage)/(library)/data-entry/selects/single-selects/WithinTableCellWithinDialog.vue

@@ -0,0 +1,47 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { XButton, XDialog, XDivider } from '@x/ui';
+
+import WithinTableCell from './WithinTableCell.vue';
+
+const status = ref(false);
+const more = ref(false);
+</script>
+
+<template>
+  <XButton label="Launch" @click="status = true" />
+
+  <XDialog v-model="status" title="With Table in Dialog">
+    <p>
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+      been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
+      galley of type and scrambled it to make a type specimen book. It has survived not only five
+      centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
+      was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
+      passages, and more recently with desktop publishing software like Aldus PageMaker including
+      versions of Lorem Ipsum.
+    </p>
+
+    <XDivider />
+
+    <WithinTableCell />
+
+    <XDivider />
+
+    <div>
+      <XButton color="info" @click="more = !more">More</XButton>
+
+      <div v-if="more" class="flex flex-col gap-4 mt-4">
+        <p v-for="num in 5" :key="num">
+          {{ num }}. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+          Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
+          unknown printer took a galley of type and scrambled it to make a type specimen book. It
+          has survived not only five centuries, but also the leap into electronic typesetting,
+          remaining essentially unchanged. It was popularised in the 1960s with the release of
+          Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+          software like Aldus PageMaker including versions of Lorem Ipsum.
+        </p>
+      </div>
+    </div>
+  </XDialog>
+</template>