@bagelink/vue 0.0.447 → 0.0.449

package/dist/components/AccordionItem.vue.d.ts

@@ -1,10 +1,16 @@
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
     label?: string | undefined;
     id?: string | undefined;
-}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    open?: boolean | undefined;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
     label?: string | undefined;
     id?: string | undefined;
-}>>>, {}, {}>, {
+    open?: boolean | undefined;
+}>>> & {
+    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+}, {}, {}>, {
     head?(_: {}): any;
     default?(_: {}): any;
 }>;

package/dist/components/AccordionItem.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;;AA2MA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}
+{"version":3,"file":"AccordionItem.vue.d.ts","sourceRoot":"","sources":["../../src/components/AccordionItem.vue"],"names":[],"mappings":"AA2BA;;;;;;;;;;;;;;;;;AA6NA,wBAAwG;AACxG,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAAE,QAAO;QAClD,MAAM,EAAE,CAAC,CAAC;KACT,CAAA;CAAE,CAAC"}

package/dist/index.cjs

@@ -5576,25 +5576,38 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
-    id: {}
+    id: {},
+    open: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
-    let open = vue.ref(false);
+    const emit2 = __emit;
+    let openVal = vue.ref(false);
+    let isOpen = vue.computed({
+      get: () => openVal.value,
+      set: (value) => {
+        openVal.value = value;
+        emit2("update:open", value);
+      }
+    });
+    vue.onMounted(() => {
+      if (props2.open)
+        isOpen.value = true;
+    });
     const accordionState = vue.inject("accordionState");
     const id = props2.id || Math.random().toString(36).substring(7);
     vue.watch(
       () => accordionState == null ? void 0 : accordionState.openItem,
       (currentOpenId) => {
-        if (currentOpenId !== id) {
-          open.value = false;
-        }
+        if (currentOpenId !== id)
+          isOpen.value = false;
       },
       { immediate: true }
     );
     function toggle() {
-      open.value = !open.value;
-      if (open.value && (accordionState == null ? void 0 : accordionState.openItem))
+      isOpen.value = !isOpen.value;
+      if (isOpen.value && (accordionState == null ? void 0 : accordionState.openItem))
         accordionState.openItem = id;
       else if ((accordionState == null ? void 0 : accordionState.openItem) === id)
         accordionState.openItem = null;
@@ -5603,7 +5616,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$C, [
         vue.createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
-          "aria-expanded": vue.unref(open) ? "true" : "false",
+          "aria-expanded": vue.unref(isOpen) ? "true" : "false",
           class: "accordion-head",
           "aria-controls": `accordion-body-${vue.unref(id)}`
         }, [
@@ -5611,18 +5624,18 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
             vue.createElementVNode("span", _hoisted_3$l, vue.toDisplayString(_ctx.label), 1)
           ], true),
           vue.createElementVNode("div", {
-            class: vue.normalizeClass(["accordion-icon", { open: vue.unref(open) }])
+            class: vue.normalizeClass(["accordion-icon", { open: vue.unref(isOpen) }])
           }, [
             vue.createVNode(vue.unref(_sfc_main$K), { icon: "expand_more" })
           ], 2)
         ], 8, _hoisted_2$v),
         vue.createVNode(vue.Transition, { name: "expand" }, {
           default: vue.withCtx(() => [
-            vue.unref(open) ? (vue.openBlock(), vue.createElementBlock("div", {
+            vue.unref(isOpen) ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
               class: "accordion-body",
               id: `accordion-body-${vue.unref(id)}`,
-              "aria-hidden": vue.unref(open) ? "false" : "true"
+              "aria-hidden": vue.unref(isOpen) ? "false" : "true"
             }, [
               vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], 8, _hoisted_4$f)) : vue.createCommentVNode("", true)
@@ -5633,7 +5646,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-402c99d7"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-c1f34c59"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$u = { class: "p-1" };

package/dist/index.mjs

@@ -5574,25 +5574,38 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "AccordionItem",
   props: {
     label: {},
-    id: {}
+    id: {},
+    open: { type: Boolean }
   },
-  setup(__props) {
+  emits: ["update:open"],
+  setup(__props, { emit: __emit }) {
     const props2 = __props;
-    let open = ref(false);
+    const emit2 = __emit;
+    let openVal = ref(false);
+    let isOpen = computed({
+      get: () => openVal.value,
+      set: (value) => {
+        openVal.value = value;
+        emit2("update:open", value);
+      }
+    });
+    onMounted(() => {
+      if (props2.open)
+        isOpen.value = true;
+    });
     const accordionState = inject("accordionState");
     const id = props2.id || Math.random().toString(36).substring(7);
     watch(
       () => accordionState == null ? void 0 : accordionState.openItem,
       (currentOpenId) => {
-        if (currentOpenId !== id) {
-          open.value = false;
-        }
+        if (currentOpenId !== id)
+          isOpen.value = false;
       },
       { immediate: true }
     );
     function toggle() {
-      open.value = !open.value;
-      if (open.value && (accordionState == null ? void 0 : accordionState.openItem))
+      isOpen.value = !isOpen.value;
+      if (isOpen.value && (accordionState == null ? void 0 : accordionState.openItem))
         accordionState.openItem = id;
       else if ((accordionState == null ? void 0 : accordionState.openItem) === id)
         accordionState.openItem = null;
@@ -5601,7 +5614,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", _hoisted_1$C, [
         createElementVNode("button", {
           onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
-          "aria-expanded": unref(open) ? "true" : "false",
+          "aria-expanded": unref(isOpen) ? "true" : "false",
           class: "accordion-head",
           "aria-controls": `accordion-body-${unref(id)}`
         }, [
@@ -5609,18 +5622,18 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
             createElementVNode("span", _hoisted_3$l, toDisplayString(_ctx.label), 1)
           ], true),
           createElementVNode("div", {
-            class: normalizeClass(["accordion-icon", { open: unref(open) }])
+            class: normalizeClass(["accordion-icon", { open: unref(isOpen) }])
           }, [
             createVNode(unref(_sfc_main$K), { icon: "expand_more" })
           ], 2)
         ], 8, _hoisted_2$v),
         createVNode(Transition, { name: "expand" }, {
           default: withCtx(() => [
-            unref(open) ? (openBlock(), createElementBlock("div", {
+            unref(isOpen) ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "accordion-body",
               id: `accordion-body-${unref(id)}`,
-              "aria-hidden": unref(open) ? "false" : "true"
+              "aria-hidden": unref(isOpen) ? "false" : "true"
             }, [
               renderSlot(_ctx.$slots, "default", {}, void 0, true)
             ], 8, _hoisted_4$f)) : createCommentVNode("", true)
@@ -5631,7 +5644,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-402c99d7"]]);
+const AccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-c1f34c59"]]);
 const _sfc_main$E = {};
 const _hoisted_1$B = { class: "list-wrap bgl_card thin grid overflow-hidden h-100 p-0" };
 const _hoisted_2$u = { class: "p-1" };

package/dist/style.css

@@ -535,13 +535,13 @@ a[data-v-d09a83c5] {
 }
 }
 
-.accordion-item[data-v-402c99d7] {
+.accordion-item[data-v-c1f34c59] {
 	border-bottom: 1px solid var(--border-color);
 	transition: all 0.2s;
 	cursor: pointer;
 	overflow: hidden;
 }
-.accordion-head[data-v-402c99d7] {
+.accordion-head[data-v-c1f34c59] {
 	height: var(--input-height);
 	background: transparent;
 	display: flex;
@@ -550,19 +550,19 @@ a[data-v-d09a83c5] {
 	justify-content: space-between;
 	border: none;
 }
-.accordion-icon[data-v-402c99d7] {
+.accordion-icon[data-v-c1f34c59] {
 	transition: all 0.2s ease;
 }
-.accordion-icon.open[data-v-402c99d7] {
+.accordion-icon.open[data-v-c1f34c59] {
 	transform: rotate(180deg);
 }
-.accordion-label[data-v-402c99d7] {
+.accordion-label[data-v-c1f34c59] {
 	font-weight: bold;
 }
-.accordion-head:hover .accordion-label[data-v-402c99d7] {
+.accordion-head:hover .accordion-label[data-v-c1f34c59] {
 	text-decoration: underline;
 }
-.accordion-body[data-v-402c99d7] {
+.accordion-body[data-v-c1f34c59] {
 }
 
 .expand-enter-active,
@@ -3193,6 +3193,9 @@ p {
 .round {
     border-radius: var(--btn-border-radius);
 }
+.rounded {
+    border-radius: calc(var(--btn-border-radius) / 2);
+}
 .justify-items-center {
     justify-items: center;
 }
@@ -3262,6 +3265,16 @@ p {
     top: 0px;
     inset-inline-end: 0px;
 }
+.position-bottom-start {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+}
+.position-bottom-end {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0px;
+}
 .positioned-full {
     top: 0;
     bottom: 0;
@@ -4635,6 +4648,18 @@ p {
         inset-inline-end: 0px;
     }
 
+    .m_position-bottom-start {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-start: 0px;
+    }
+
+    .m_position-bottom-end {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-end: 0px;
+    }
+
     .m_positioned-full {
         top: 0;
         bottom: 0;
@@ -4642,6 +4667,7 @@ p {
         inset-inline-end: 0;
     }
 
+
     .m_auto-flow-rows {
         grid-auto-flow: row;
     }
@@ -6952,6 +6978,9 @@ select {
     min-width: 220px;
   }
 }
+.opacity-0 {
+    opacity: 0;
+}
 .opacity-1 {
     opacity: 0.1;
 }
@@ -7246,7 +7275,23 @@ select {
 .color-input-green input {
     color: var(--bgl-green) !important;
 }
+.cover,
+.object-fit-cover {
+    object-fit: cover;
+}
+.contain,
+.object-fit-contain {
+    object-fit: contain;
+}
+.scale-down,
+.object-fit-scale-down {
+    object-fit: scale-down;
+}
 @media screen and (max-width: 910px) {
+    .m_opacity-0 {
+        opacity: 0;
+    }
+
     .m_opacity-1 {
         opacity: 0.1;
     }
@@ -7635,6 +7680,21 @@ select {
     .m_color-input-green input {
         color: var(--bgl-green) !important;
     }
+
+    .m_cover,
+    .m_object-fit-cover {
+        object-fit: cover;
+    }
+
+    .m_contain,
+    .m_object-fit-contain {
+        object-fit: contain;
+    }
+
+    .m_scale-down,
+    .m_object-fit-scale-down {
+        object-fit: scale-down;
+    }
 }
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.447",
+  "version": "0.0.449",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/AccordionItem.vue

@@ -2,23 +2,23 @@
 	<div class="accordion-item">
 		<button
 			@click="toggle()"
-			:aria-expanded="open ? 'true' : 'false'"
+			:aria-expanded="isOpen ? 'true' : 'false'"
 			class="accordion-head"
 			:aria-controls="`accordion-body-${id}`"
 		>
 			<slot name="head" >
 				<span class="accordion-label">{{ label }}</span>
 			</slot>
-			<div class="accordion-icon" :class="{ open }">
+			<div class="accordion-icon" :class="{ open: isOpen }">
 				<MaterialIcon icon="expand_more" />
 			</div>
 		</button>
 		<Transition name="expand">
 			<div
-				v-if="open"
+				v-if="isOpen"
 				class="accordion-body"
 				:id="`accordion-body-${id}`"
-				:aria-hidden="open ? 'false' : 'true'"
+				:aria-hidden="isOpen ? 'false' : 'true'"
 			>
 				<slot />
 			</div>
@@ -28,13 +28,29 @@
 
 <script lang="ts" setup>
 import { MaterialIcon } from '@bagelink/vue';
-import { watch, inject } from 'vue';
+import { watch, inject, onMounted } from 'vue';
 
 const props = defineProps<{
 	label?: string;
 	id?: string;
+	open?: boolean;
 }>();
-let open = $ref(false);
+
+const emit = defineEmits(['update:open']);
+
+let openVal = $ref(false);
+
+let isOpen = $computed({
+	get: () => openVal,
+	set: (value: boolean) => {
+		openVal = value;
+		emit('update:open', value);
+	},
+});
+
+onMounted(() => {
+	if (props.open) isOpen = true;
+});
 
 const accordionState = inject('accordionState') as { openItem: string | null };
 const id = props.id || Math.random().toString(36).substring(7);
@@ -42,16 +58,14 @@ const id = props.id || Math.random().toString(36).substring(7);
 watch(
 	() => accordionState?.openItem,
 	(currentOpenId) => {
-		if (currentOpenId !== id) {
-			open = false;
-		}
+		if (currentOpenId !== id) isOpen = false;
 	},
 	{ immediate: true },
 );
 
 function toggle() {
-	open = !open;
-	if (open && accordionState?.openItem) accordionState.openItem = id;
+	isOpen = !isOpen;
+	if (isOpen && accordionState?.openItem) accordionState.openItem = id;
 	else if (accordionState?.openItem === id) accordionState.openItem = null;
 }
 </script>

package/src/styles/appearance.css

@@ -1,3 +1,7 @@
+.opacity-0 {
+    opacity: 0;
+}
+
 .opacity-1 {
     opacity: 0.1;
 }
@@ -390,9 +394,28 @@
     color: var(--bgl-green) !important;
 }
 
+.cover,
+.object-fit-cover {
+    object-fit: cover;
+}
+
+.contain,
+.object-fit-contain {
+    object-fit: contain;
+}
+
+.scale-down,
+.object-fit-scale-down {
+    object-fit: scale-down;
+}
+
 
 
 @media screen and (max-width: 910px) {
+    .m_opacity-0 {
+        opacity: 0;
+    }
+
     .m_opacity-1 {
         opacity: 0.1;
     }
@@ -781,4 +804,19 @@
     .m_color-input-green input {
         color: var(--bgl-green) !important;
     }
+
+    .m_cover,
+    .m_object-fit-cover {
+        object-fit: cover;
+    }
+
+    .m_contain,
+    .m_object-fit-contain {
+        object-fit: contain;
+    }
+
+    .m_scale-down,
+    .m_object-fit-scale-down {
+        object-fit: scale-down;
+    }
 }

package/src/styles/layout.css

@@ -15,6 +15,10 @@
     border-radius: var(--btn-border-radius);
 }
 
+.rounded {
+    border-radius: calc(var(--btn-border-radius) / 2);
+}
+
 .justify-items-center {
     justify-items: center;
 }
@@ -105,6 +109,18 @@
     inset-inline-end: 0px;
 }
 
+.position-bottom-start {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-start: 0px;
+}
+
+.position-bottom-end {
+    position: absolute;
+    bottom: 0px;
+    inset-inline-end: 0px;
+}
+
 .positioned-full {
     top: 0;
     bottom: 0;
@@ -1678,6 +1694,7 @@
     direction: rtl;
 }
 
+
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {
         grid-template-columns: repeat(1, 1fr);

package/src/styles/mobilLayout.css

@@ -128,6 +128,18 @@
         inset-inline-end: 0px;
     }
 
+    .m_position-bottom-start {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-start: 0px;
+    }
+
+    .m_position-bottom-end {
+        position: absolute;
+        bottom: 0px;
+        inset-inline-end: 0px;
+    }
+
     .m_positioned-full {
         top: 0;
         bottom: 0;
@@ -135,6 +147,7 @@
         inset-inline-end: 0;
     }
 
+
     .m_auto-flow-rows {
         grid-auto-flow: row;
     }