@bagelink/vue 0.0.322 → 0.0.331

package/src/components/form/inputs/TextInput.vue

@@ -1,65 +1,110 @@
 <template>
-  <div class="bagel-input text-input" :class="{
-      dense, small, shrink, toggleEdit, editMode, code,
-      textInputIconWrap: icon,
-      txtInputIconStart: iconStart,
-    }" :title="title">
-    <label :for="id">
-      {{ label }}
-      <input v-if="!multiline && !autoheight && !code" :title="title" :autocomplete="autocomplete" :id="id"
-        v-model="inputVal" :type="type" :rows="1" ref="input" :placeholder="placeholder || label" :disabled="!editMode"
-        :required="required" :pattern="pattern" v-bind="nativeInputAttrs" @dblclick="toggleEditAction">
-      <textarea v-else :title="title" :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
-        :placeholder="placeholder || label" :disabled="!editMode" :required="required" :pattern="pattern"
-        v-bind="nativeInputAttrs" @dblclick="toggleEditAction" />
-      <p v-if="helptext">{{ helptext }}</p>
-    </label>
-
-    <MaterialIcon class="iconStart" v-if="iconStart" :icon="iconStart" />
-    <MaterialIcon v-if="icon" :icon="icon" />
-    <Btn class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check'
-      : 'edit'" flat />
-  </div>
+	<div
+		class="bagel-input text-input"
+		:class="{
+			dense, small, shrink, toggleEdit, editMode, code,
+			textInputIconWrap: icon,
+			txtInputIconStart: iconStart,
+		}"
+		:title="title"
+	>
+		<label :for="id">
+			{{ label }}
+			<input
+				v-if="!multiline && !autoheight && !code"
+				:title="title"
+				:autocomplete="autocomplete"
+				:id="id"
+				v-model="inputVal"
+				:type="type"
+				:rows="1"
+				ref="input"
+				:placeholder="placeholder || label"
+				:disabled="!editMode"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
+				@dblclick="toggleEditAction"
+			>
+			<textarea
+				v-else
+				:title="title"
+				:id="id"
+				v-model="inputVal"
+				:type="type"
+				:rows="rows"
+				ref="input"
+				:placeholder="placeholder || label"
+				:disabled="!editMode"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
+				@dblclick="toggleEditAction"
+			/>
+			<p v-if="helptext">{{ helptext }}</p>
+		</label>
+
+		<MaterialIcon
+			class="iconStart"
+			v-if="iconStart"
+			:icon="iconStart"
+		/>
+		<MaterialIcon
+			v-if="icon"
+			:icon="icon"
+		/>
+		<Btn
+			class="toggleEditBtn"
+			v-if="toggleEdit"
+			thin
+			@click="toggleEditAction"
+			:icon="editMode ? 'check' : 'edit'"
+			flat
+		/>
+	</div>
 </template>
 
-<script setup lang="ts">
+<script
+	setup
+	lang="ts"
+>
 import { onMounted, watch } from 'vue';
 import {
-  debounce, Btn, type MaterialIcons, MaterialIcon,
+	debounce, Btn, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
-  defineProps<{
-    id?: string;
-    title?: string;
-    helptext?: string;
-    placeholder?: string;
-    modelValue?: string | number;
-    label?: string;
-    small?: boolean;
-    dense?: boolean;
-    required?: boolean;
-    pattern?: string;
-    shrink?: boolean;
-    toggleEdit?: boolean;
-    type?: string;
-    nativeInputAttrs?: Record<string, any>;
-    icon?: MaterialIcons;
-    iconStart?: MaterialIcons;
-    multiline?: boolean;
-    autoheight?: boolean;
-    code?: boolean;
-    lines?: number;
-    autocomplete?: string;
-    autofocus?: boolean;
-  }>(),
-  {
-    type: 'text',
-    toggleEdit: false,
-    modelValue: '',
-    autocomplete: 'off',
-  },
+	defineProps<{
+		id?: string;
+		title?: string;
+		helptext?: string;
+		placeholder?: string;
+		modelValue?: string | number;
+		label?: string;
+		small?: boolean;
+		dense?: boolean;
+		required?: boolean;
+		pattern?: string;
+		shrink?: boolean;
+		toggleEdit?: boolean;
+		type?: string;
+		nativeInputAttrs?: Record<string, any>;
+		icon?: MaterialIcons;
+		iconStart?: MaterialIcons;
+		multiline?: boolean;
+		autoheight?: boolean;
+		code?: boolean;
+		lines?: number;
+		autocomplete?: string;
+		autofocus?: boolean;
+	}>(),
+	{
+		type: 'text',
+		toggleEdit: false,
+		modelValue: '',
+		autocomplete: 'off',
+	},
 );
 let inputVal = $ref<string | number>();
 let editMode = $ref<boolean>(!props.toggleEdit);
@@ -67,53 +112,54 @@ let editMode = $ref<boolean>(!props.toggleEdit);
 const input = $ref<HTMLInputElement>();
 
 const toggleEditAction = () => {
-  if (!props.toggleEdit) return;
-  if (editMode) {
-    editMode = false;
-    emit('debounce', inputVal);
-    emit('update:modelValue', inputVal as string);
-  } else {
-    editMode = true;
-    setTimeout(() => input?.focus(), 10);
-  }
+	if (!props.toggleEdit) return;
+	if (editMode) {
+		editMode = false;
+		emit('debounce', inputVal);
+		emit('update:modelValue', inputVal as string);
+	} else {
+		editMode = true;
+		setTimeout(() => input?.focus(), 10);
+	}
 };
 
 const rows = $computed(() => {
-  if (props.lines) return props.lines;
-  if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
-  if (props.multiline || props.code) return 4;
-  return 1;
+	if (props.lines) return props.lines;
+	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
+	if (props.multiline || props.code) return 4;
+	return 1;
 });
 
 watch(
-  () => inputVal,
-  (newVal) => {
-    if (props.toggleEdit) return;
-    if (newVal === props.modelValue) return;
-    emit('update:modelValue', newVal as string);
-    debounce(() => emit('debounce', newVal));
-  },
+	() => inputVal,
+	(newVal) => {
+		if (props.toggleEdit) return;
+		if (newVal === props.modelValue) return;
+		emit('update:modelValue', newVal as string);
+		debounce(() => emit('debounce', newVal));
+	},
 );
 
 watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal !== inputVal) inputVal = newVal;
-  },
-  { immediate: true },
+	() => props.modelValue,
+	(newVal) => {
+		if (newVal !== inputVal) inputVal = newVal;
+	},
+	{ immediate: true },
 );
 
 onMounted(() => {
-  if (props.autofocus) setTimeout(() => input?.focus(), 10);
+	if (props.autofocus) setTimeout(() => input?.focus(), 10);
 });
 </script>
 
 <style>
 .bagel-input.shrink,
 .bagel-input.shrink input {
-  min-width: unset !important;
-  /* width: auto; */
+	min-width: unset !important;
+	/* width: auto; */
 }
+
 .bagel-input label {
 	font-size: var(--label-font-size);
 }
@@ -121,76 +167,76 @@ onMounted(() => {
 
 <style scoped>
 .bagel-input textarea {
-  min-height: unset;
-  font-size: var(--input-font-size);
+	min-height: unset;
+	font-size: var(--input-font-size);
 }
 
 .bagel-input.text-input textarea {
-  resize: none;
+	resize: none;
 }
 
 .code textarea {
-  font-family: 'Inconsolata', monospace;
-  background: var(--bgl-black) !important;
-  color: var(--bgl-white) !important;
+	font-family: 'Inconsolata', monospace;
+	background: var(--bgl-black) !important;
+	color: var(--bgl-white) !important;
 }
 
 .bagel-input.toggleEdit:hover {
-  background-color: var(--input-bg);
+	background-color: var(--input-bg);
 }
 
 .bagel-input.small {
-  margin-bottom: 0;
-  height: 30px;
+	margin-bottom: 0;
+	height: 30px;
 }
 
 .bagel-input.dense label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
 }
 
 .bagel-input label {
-  font-size: var(--label-font-size);
+	font-size: var(--label-font-size);
 }
 
 .toggleEditBtn {
-  position: absolute;
-  right: -24px;
-  top: 4;
-  opacity: 0;
+	position: absolute;
+	right: -24px;
+	top: 4;
+	opacity: 0;
 }
 
 .textInputIconWrap {
-  position: relative;
+	position: relative;
 }
 
 .textInputIconWrap .bgl_icon-font {
-  position: absolute;
-  inset-inline-end: 0.7rem;
-  bottom: 50%;
-  line-height: 0;
-  color: var(--bgl-gray);
+	position: absolute;
+	inset-inline-end: 0.7rem;
+	bottom: 50%;
+	line-height: 0;
+	color: var(--bgl-gray);
 }
 
 .txtInputIconStart .iconStart {
-  position: absolute;
-  inset-inline-start: 0.7rem;
-  top: 50%;
-  line-height: 0;
-  color: var(--bgl-gray);
+	position: absolute;
+	inset-inline-start: 0.7rem;
+	top: 50%;
+	line-height: 0;
+	color: var(--bgl-gray);
 }
 
 .txtInputIconStart textarea {
-  padding-inline-start: 2rem;
+	padding-inline-start: 2rem;
 }
 
 .bagel-input:hover .toggleEditBtn,
 .bagel-input.editMode .toggleEditBtn {
-  opacity: 1;
+	opacity: 1;
 }
 
 .bagel-input.small textarea {
-  height: 30px;
+	height: 30px;
 }
 </style>

package/src/styles/appearance.css

@@ -0,0 +1,39 @@
+.opacity-1 {
+    opacity: 0.1;
+}
+
+.opacity-2 {
+    opacity: 0.2;
+}
+
+.opacity-3 {
+    opacity: 0.3;
+}
+
+.opacity-4 {
+    opacity: 0.4;
+}
+
+.opacity-5 {
+    opacity: 0.5;
+}
+
+.opacity-6 {
+    opacity: 0.6;
+}
+
+.opacity-7 {
+    opacity: 0.7;
+}
+
+.opacity-8 {
+    opacity: 0.8;
+}
+
+.opacity-9 {
+    opacity: 0.9;
+}
+
+.opacity-10 {
+    opacity: 1;
+}

package/src/styles/bagel.css

@@ -1,10 +1,12 @@
 @import "layout.css";
+@import "mobilLayout.css";
 @import "inputs.css";
 @import "buttons.css";
 @import "text.css";
 @import "scrollbar.css";
 @import "transitions.css";
 @import "loginCard.css";
+@import "appearance.css";
 @import "theme.css";
 @import "dark.css";
 @import "./fonts/Ploni.css";

package/src/styles/layout.css

@@ -127,8 +127,10 @@
 }
 
 .w-100,
-.w100 {
+.width-100 {
     width: 100%;
+    max-width: 100px;
+
 }
 
 .w300,
@@ -140,11 +142,28 @@
 .w600,
 .w650,
 .w700,
+.w750,
 .w770,
+.w800,
+.w850,
 .w900,
+.w950,
 .w970,
+.w1000,
 .w1030,
-.w1170 {
+.w1050,
+.w1100,
+.w1150,
+.w1170,
+.w1200,
+.w1250,
+.w1300,
+.w1350,
+.w1400,
+.w1450,
+.w1500,
+.w1550,
+.w1600 {
     margin-inline-start: auto;
     margin-inline-end: auto;
     width: 98%;
@@ -190,30 +209,98 @@
     max-width: 650px;
 }
 
-.w650 {
+.w700 {
     max-width: 700px;
 }
 
+.w750 {
+    max-width: 750px;
+}
+
 .w770 {
     max-width: 770px;
 }
 
+.w800 {
+    max-width: 800px;
+}
+
+.w850 {
+    max-width: 850px;
+}
+
 .w900 {
     max-width: 900px;
 }
 
+.w950 {
+    max-width: 950px;
+}
+
 .w970 {
     max-width: 970px;
 }
 
+.w1000 {
+    max-width: 1000px;
+}
+
 .w1030 {
     max-width: 1030px;
 }
 
+.w1050 {
+    max-width: 1050px;
+}
+
+.w1100 {
+    max-width: 1100px;
+}
+
+.w1150 {
+    max-width: 1150px;
+}
+
 .w1170 {
     max-width: 1170px;
 }
 
+.w1200 {
+    max-width: 1200px;
+}
+
+.w1250 {
+    max-width: 1250px;
+}
+
+.w1300 {
+    max-width: 1300px;
+}
+
+.w1350 {
+    max-width: 1350px;
+}
+
+.w1400 {
+    max-width: 1400px;
+}
+
+.w1450 {
+    max-width: 1450px;
+}
+
+.w1500 {
+    max-width: 1500px;
+}
+
+.w1550 {
+    max-width: 1550px;
+}
+
+.w1600 {
+    max-width: 1600px;
+}
+
 .w-all,
 .wall {
     width: -webkit-fill-available;
@@ -1077,10 +1164,6 @@
     display: inline-block;
 }
 
-.flex-wrap {
-    flex-wrap: wrap;
-}
-
 .flex-end {
     justify-content: flex-end;
 }