@bagelink/vue 0.0.160 → 0.0.164

package/src/components/FormKitTable.vue

@@ -1,298 +1,284 @@
 <template>
-	<div class="table-list-wrap h-100">
-		<!-- <Transition name="fade">  -->
-		<div class="table-list">
-			<table class="infinite-wrapper">
-				<thead class="row first-row">
-					<th
-						class="col"
-						v-for="field in columns"
-						:key="field.id"
-						@click="sort(field.id)"
-					>
-						<div class="flex">
-							{{ field?.label || field.id }}
-							<div
-								class="list-arrows"
-								:class="{ sorted: sortField === field.id }"
-							>
-								<MaterialIcon
-									:class="{ desc: sortDirection === 'DESC' }"
-									icon="keyboard_arrow_up"
-								/>
-							</div>
-						</div>
-					</th>
-				</thead>
-				<tbody
-					ref="infinite"
-					class="rows infinite"
-					:class="{ loading }"
-				>
-					<tr
-						@click="selectElement(row)"
-						class="row row-item position-relative"
-						v-for="row in data"
-						:key="row.id"
-					>
-						<td
-							class="col"
-							v-for="field in columns"
-							:key="`${field.id}-${row.id}`"
-						>
-							<slot
-								v-if="slots[field.id]"
-								:name="field.id"
-								:row="row"
-								:field="field"
-							/>
-							<div v-else>
-								<div v-if="field.inputType === 'DateInput'">
-									{{ new Date(row[field.id]).toLocaleDateString() }}
-								</div>
-								<div v-else-if="field.inputType === 'CheckInput'">
-									<MaterialIcon
-										icon="check"
-										class="pill green"
-										v-if="row[field.id]"
-									/>
-									<MaterialIcon
-										icon="close"
-										class="pill"
-										v-else
-									/>
-								</div>
-								<div v-else-if="field.inputType === 'ItemRef' && row[field.id]">
-									<Btn
-										v-if="field.refCollection"
-										color="gray"
-										class="thin"
-										@click="
-											$router.push(
-												`/${field.refCollection}/${row[field.id].id}`,
-											)"
-									>
-										{{
-											field.refFields
-												?.map((k) => row[field.id][k])
-												.join(' ') || row[field.id].id
-										}}
-										<MaterialIcon icon="arrow_forward" />
-									</Btn>
-									<Btn
-										icon="receipt"
-										is="a"
-										thin
-										v-else-if="field.link"
-										:href="row[field.id][field.link]"
-										target="_blank"
-									>
-										{{
-											field.refFields
-												?.map((k) => row[field.id][k])
-												.join(' ') || row[field.id].id
-										}}
-									</Btn>
-									<div
-										class="pill"
-										v-else
-										:class="getPillClass(row, field)"
-									>
-										{{
-											field.refFields
-												?.map((k) => row[field.id][k])
-												.join(' ') || row[field.id].id
-										}}
-									</div>
-								</div>
-								<div
-									class="max-col-width"
-									v-else
-								>
-									{{ row[field.id] }}
-								</div>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-		<!-- </Transition> -->
-	</div>
+  <div class="table-list-wrap h-100">
+    <!-- <Transition name="fade">  -->
+    <div class="table-list">
+      <table class="infinite-wrapper">
+        <thead class="row first-row">
+          <th
+            class="col"
+            v-for="field in columns"
+            :key="field.id"
+            @click="sort(field.id)"
+          >
+            <div class="flex">
+              {{ field?.label || field.id }}
+              <div
+                class="list-arrows"
+                :class="{ sorted: sortField === field.id }"
+              >
+                <MaterialIcon
+                  :class="{ desc: sortDirection === 'DESC' }"
+                  icon="keyboard_arrow_up"
+                />
+              </div>
+            </div>
+          </th>
+        </thead>
+        <tbody ref="infinite" class="rows infinite" :class="{ loading }">
+          <tr
+            @click="selectElement(row)"
+            class="row row-item position-relative"
+            v-for="row in data"
+            :key="row.id"
+          >
+            <td
+              class="col"
+              v-for="field in columns"
+              :key="`${field.id}-${row.id}`"
+            >
+              <slot
+                v-if="slots[field.id]"
+                :name="field.id"
+                :row="row"
+                :field="field"
+              />
+              <div v-else>
+                <div v-if="field.inputType === 'DateInput'">
+                  {{ new Date(row[field.id]).toLocaleDateString() }}
+                </div>
+                <div v-else-if="field.inputType === 'CheckInput'">
+                  <MaterialIcon
+                    icon="check"
+                    class="pill green"
+                    v-if="row[field.id]"
+                  />
+                  <MaterialIcon icon="close" class="pill" v-else />
+                </div>
+                <div v-else-if="field.inputType === 'ItemRef' && row[field.id]">
+                  <Btn
+                    v-if="field.refCollection"
+                    color="gray"
+                    class="thin"
+                    @click="
+                      $router.push(
+                        `/${field.refCollection}/${row[field.id].id}`
+                      )
+                    "
+                  >
+                    {{
+                      field.refFields?.map((k) => row[field.id][k]).join(" ") ||
+                      row[field.id].id
+                    }}
+                    <MaterialIcon icon="arrow_forward" />
+                  </Btn>
+                  <Btn
+                    icon="receipt"
+                    is="a"
+                    thin
+                    v-else-if="field.link"
+                    :href="row[field.id][field.link]"
+                    target="_blank"
+                  >
+                    {{
+                      field.refFields?.map((k) => row[field.id][k]).join(" ") ||
+                      row[field.id].id
+                    }}
+                  </Btn>
+                  <div class="pill" v-else :class="getPillClass(row, field)">
+                    {{
+                      field.refFields?.map((k) => row[field.id][k]).join(" ") ||
+                      row[field.id].id
+                    }}
+                  </div>
+                </div>
+                <div class="max-col-width" v-else>
+                  {{ row[field.id] }}
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <!-- </Transition> -->
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots } from 'vue';
-import { BagelField, Btn, MaterialIcon } from '@bagelink/vue';
+import { computed, ref, useSlots } from "vue";
+import { BagelField, Btn, MaterialIcon } from "@bagelink/vue";
 
 const slots = useSlots();
 const loading = ref(true);
 
 const props = defineProps<{
-	data: any[];
-	schema?: BagelField[];
+  data: any[];
+  schema?: BagelField[];
 }>();
 
-const emit = defineEmits(['selectElement']);
+const emit = defineEmits(["selectElement"]);
 
 const selectElement = (data: Record<string, any>) => {
-	emit('selectElement', data);
+  emit("selectElement", data);
 };
 
 // const sortList = () => {};
-const sortDirection = ref('');
-const sortField = ref('');
+const sortDirection = ref("");
+const sortField = ref("");
 
 const sort = (fieldname: string) => {
-	if (sortField.value === fieldname) {
-		if (sortDirection.value === 'ASC') sortDirection.value = 'DESC';
-		else sortField.value = '';
-	} else {
-		sortField.value = fieldname;
-		sortDirection.value = 'ASC';
-	}
+  if (sortField.value === fieldname) {
+    if (sortDirection.value === "ASC") sortDirection.value = "DESC";
+    else sortField.value = "";
+  } else {
+    sortField.value = fieldname;
+    sortDirection.value = "ASC";
+  }
 };
 
 const columns = computed<BagelField[]>(
-	(): BagelField[] => props.schema ||
-		Object.keys(props.data[0]).map((k: string) => ({
-			id: k,
-			inputType: 'PlainText',
-		})),
+  (): BagelField[] =>
+    props.schema ||
+    Object.keys(props.data[0]).map((k: string) => ({
+      id: k,
+      inputType: "PlainText",
+    }))
 );
 
 function getPillClass(row: Record<string, any>, field: BagelField) {
-	return field.refFields?.map((k) => row[field.id][k]).join(' ') || row[field.id].id;
+  return (
+    field.refFields?.map((k) => row[field.id][k]).join(" ") || row[field.id].id
+  );
 }
 </script>
 
 <style scoped>
 .Paid {
-	background-color: var(--bgl-green);
-	color: white;
+  background-color: var(--bgl-green);
+  color: white;
 }
 
 .Error {
-	background-color: var(--bgl-red-tint);
-	color: var(--bgl-red)
+  background-color: var(--bgl-red-tint);
+  color: var(--bgl-red);
 }
 
 .list-arrows {
-	opacity: 0;
+  opacity: 0;
 }
 
 .list-arrows .icon-font {
-	transition: all ease-in-out 0.2s;
+  transition: all ease-in-out 0.2s;
 }
 
 .list-arrows.sorted {
-	opacity: 1;
+  opacity: 1;
 }
 
 .list-arrows.sorted .desc {
-	transform: rotate(180deg);
+  transform: rotate(180deg);
 }
 
 table {
-	border-collapse: separate;
-	border-spacing: 0 15px;
-	border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0 15px;
+  border-collapse: collapse;
 }
 
 th {
-	font-weight: 400;
+  font-weight: 400;
 }
 
 .row {
-	border-bottom: 1px solid var(--border-color);
-	cursor: pointer;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
 }
 
 .row.first-row {
-	font-size: 0.8rem;
-	color: var(--bgl-black-tint);
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	background: var(--bgl-white);
-	height: 50px;
-	vertical-align: bottom;
+  font-size: 0.8rem;
+  color: var(--bgl-black-tint);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background: var(--bgl-white);
+  height: 50px;
+  vertical-align: bottom;
 }
 
 .row.first-row::after {
-	content: '';
-	border-bottom: 1px solid var(--border-color);
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: -1px;
+  content: "";
+  border-bottom: 1px solid var(--border-color);
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
 }
 
 .first-row .col {
-	cursor: pointer;
-	background: var(--bgl-white);
+  cursor: pointer;
+  background: var(--bgl-white);
 }
 
 .col {
-	white-space: nowrap;
-	padding: 14px;
-	transition: var(--bgl-transition);
-	line-height: 1;
-	padding-left: 1rem;
-	padding-right: 1rem;
-	align-items: center;
+  white-space: nowrap;
+  padding: 14px;
+  transition: var(--bgl-transition);
+  line-height: 1;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  align-items: center;
 }
 
-.col>div {
-	display: flex;
-	gap: 0.5rem;
+.col > div {
+  display: flex;
+  gap: 0.5rem;
 }
 
 .max-col-width {
-	max-width: 30vw;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  max-width: 30vw;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .col.check .icon-font {
-	border-radius: 100%;
-	background: var(--bgl-blue-20);
-	color: var(--bgl-blue);
-	width: 20px;
-	height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: -2px;
+  border-radius: 100%;
+  background: var(--bgl-blue-20);
+  color: var(--bgl-primary);
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: -2px;
 }
 
 .rows {
-	font-size: 0.8125em;
+  font-size: 0.8125em;
 }
 
 .table-list {
-	height: 100%;
-	position: relative;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	overflow: auto;
+  height: 100%;
+  position: relative;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  overflow: auto;
 }
 
 .BagelTable .table-list {
-	overflow: unset;
+  overflow: unset;
 }
 
 .row-item {
-	height: 50px;
-	transition: all 200ms ease;
+  height: 50px;
+  transition: all 200ms ease;
 }
 
 .row-item:hover {
-	background: var(--bgl-gray-light);
+  background: var(--bgl-gray-light);
 }
 
 .infinite-wrapper {
-	overflow-y: auto;
-	width: 100%;
+  overflow-y: auto;
+  width: 100%;
 }
 </style>

package/src/components/LangText.vue

@@ -1,32 +1,32 @@
 <template>
-	<span ref="el" />
-	{{ input }}
-	<!-- v-html="i18nT(input)" -->
+  <span ref="el" />
+  {{ input }}
+  <!-- v-html="i18nT(input)" -->
 </template>
 <script setup lang="ts">
 defineProps<{
-	input: any;
+  input: any;
 }>();
 </script>
 <style>
 .translate {
-	cursor: pointer;
-	position: relative;
+  cursor: pointer;
+  position: relative;
 }
 
 /*
 .translate:hover {
-	color: var(--bgl-blue);
+	color: var(--bgl-primary);
 }
 */
 
 .translate-globe {
-	position: absolute;
-	top: -5px;
-	right: -5px;
-	width: 10px;
-	height: 10px;
-	background-size: contain;
-	/* background-image: url('@/assets/globe.svg'); */
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  width: 10px;
+  height: 10px;
+  background-size: contain;
+  /* background-image: url('@/assets/globe.svg'); */
 }
 </style>