@ozdao/prometheus-framework 0.2.39 → 0.2.41

package/src/components/Feed/Masonry.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+// Assuming the default props are handled similarly in JS
+const props = defineProps({
+  columnWidth: { type: [Number, Array], default: 400 },
+  items: { type: Array, required: true },
+  gap: { type: Number, default: 0 },
+  rtl: { type: Boolean, default: false },
+  ssrColumns: { type: Number, default: 0 },
+  minColumns: { type: Number, default: 1 },
+  maxColumns: { type: Number, default: 3 },
+  keyMapper: { default: undefined },
+})
+
+const emit = defineEmits(['redraw', 'redrawSkip'])
+
+
+const columns = ref([])
+const wall = ref(null)
+const scrollContainer = ref(null);
+
+function useMasonryWall({
+  columns,
+  columnWidth,
+  emit,
+  gap,
+  items,
+  maxColumns,
+  minColumns,
+  rtl,
+  scrollContainer,
+  ssrColumns,
+  wall
+}) {
+  // Helper function to recursively count the number of columns that can fit
+  function countIteratively(containerWidth, gap, count, consumed) {
+    const nextWidth = getColumnWidthTarget(count);
+    if (consumed + gap + nextWidth <= containerWidth) {
+      return countIteratively(containerWidth, gap, count + 1, consumed + gap + nextWidth);
+    }
+    return count;
+  }
+
+  // Calculate target width for a column at given index
+  function getColumnWidthTarget(columnIndex) {
+    const widths = Array.isArray(columnWidth.value) ? columnWidth.value : [columnWidth.value];
+    return widths[columnIndex % widths.length];
+  }
+
+  // Determine the number of columns based on the container's width
+  function columnCount() {
+    const count = countIteratively(
+      wall.value.getBoundingClientRect().width,
+      gap.value,
+      0,
+      -gap.value // Account for initial gap
+    );
+    const boundedCount = Math.max(minColumns.value || 0, Math.min(count, maxColumns.value || count));
+    return boundedCount > 0 ? boundedCount : 1;
+  }
+
+  // Create columns arrays based on count
+  function createColumns(count) {
+    return Array.from({ length: count }, () => []);
+  }
+
+  // Initial columns setup for SSR
+  if (ssrColumns.value > 0) {
+    const newColumns = createColumns(ssrColumns.value);
+    props.items.forEach((_, i) => newColumns[i % ssrColumns.value].push(i));
+    columns.value = newColumns;
+  }
+
+  // Asynchronously fill columns with items
+  async function fillColumns(itemIndex) {
+    if (itemIndex >= props.items.length) return;
+    await nextTick();
+    const columnDivs = [...wall.value.children];
+    if (rtl.value) columnDivs.reverse();
+    const target = columnDivs.reduce((prev, curr) =>
+      curr.getBoundingClientRect().height < prev.getBoundingClientRect().height ? curr : prev
+    );
+    columns.value[+target.dataset.index].push(itemIndex);
+    await fillColumns(itemIndex + 1);
+  }
+
+  // Redraw columns, optionally forcing a refresh
+  async function redraw(force = false) {
+    if (columns.value.length === columnCount() && !force) {
+      emit('redrawSkip');
+      return;
+    }
+    columns.value = createColumns(columnCount());
+    // const scrollY = scrollContainer.value ? scrollContainer.value.scrollTop : window.scrollY;
+    await fillColumns(0);
+    // if (scrollContainer.value) {
+      // scrollContainer.value.scrollTop = scrollY;
+    // } else {
+      // window.scrollTo({ top: scrollY });
+    // }
+    emit('redraw');
+  }
+
+  // Observe wall size changes to trigger redraw
+  const resizeObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(() => redraw()) : undefined;
+
+  onMounted(() => {
+    redraw();
+    if (resizeObserver) resizeObserver.observe(wall.value);
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeObserver) resizeObserver.unobserve(wall.value);
+  });
+
+  // Watchers for reactive properties
+  watch([items, rtl, columnWidth, gap, minColumns, maxColumns, ssrColumns], () => redraw(true));
+
+  return { getColumnWidthTarget };
+}
+
+const { getColumnWidthTarget } = useMasonryWall({
+  columns,
+  columnWidth: props.columnWidth,
+  emit,
+  gap: props.gap,
+  items: props.items,
+  maxColumns: props.maxColumns,
+  minColumns: props.minColumns,
+  rtl: props.rtl,
+  scrollContainer: props.scrollContainer,
+  ssrColumns: props.ssrColumns,
+  wall
+});
+
+
+</script>
+
+<template>
+  <div
+    ref="wall"
+    class="masonry-wall"
+    :style="{ display: 'flex', gap: `${props.gap}px` }"
+  >
+    <div
+      v-for="(column, columnIndex) in columns"
+      :key="columnIndex"
+      class="masonry-column"
+      :data-index="columnIndex"
+      :style="{
+        'display': 'flex',
+        'flex-basis': `${getColumnWidthTarget(columnIndex)}px`,
+        'flex-direction': 'column',
+        'flex-grow': 1,
+        'gap': `${props.gap}px`,
+        'height': '-webkit-max-content, -moz-max-content, max-content',
+        'min-width': 0,
+      }"
+    >
+      <div
+        v-for="(itemIndex, row) in column"
+        :key="props.keyMapper ? props.keyMapper(props.items[itemIndex], columnIndex, row, itemIndex) : itemIndex"
+        class="masonry-item"
+      >
+        <slot
+          :item="props.items[itemIndex]"
+          :column="columnIndex"
+          :row="row"
+          :index="itemIndex"
+        >
+          {{ props.items[itemIndex] }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/FieldBig/FieldBig.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pd-thin radius-extra flex-nowrap flex">
+  <div class=" pd-thin radius-extra flex-nowrap flex">
     <Field
       v-model:field="inputField"
       @update:field="updateInput"
@@ -7,9 +7,9 @@
       @input="handleInput"
       @focus="handleFocus"
       @blur="checkInput"
-      class="w-100 t-semi uppercase pd-small p-big"
+      class="w-100 p-medium t-regular uppercase pd-small"
     />
-    <button v-if="action" @click="emitAction" class="w-max hover-bg-black hover-t-white t-black bg-main  button" v-html="action"/>
+    <button v-if="action" @click="emitAction" class="t-medium radius-big uppercase cursor-pointer pd-l-semi pd-r-semi w-max hover-bg-fifth t-semi transition-linear transition-timing-1 t-black bg-main" v-html="action"/>
   </div>
 </template>
 

package/src/components/Header/Header.vue

@@ -61,6 +61,8 @@
 		<Button
 			:submit="a => store.shopcart.actions.toggleShopcart()" 
 			:counter="store.shopcart.getters.cartTotalAmount" 
+			:showSucces="false"
+			:showLoader="false"
 			class="pd-zero mn-l-auto"
 			> 
 			<IconShopcart class="i-semi"/>

package/src/components/Navigation/Navigation.vue

@@ -111,4 +111,6 @@ const { t } = useI18n(text)
   color: rgb(var(--main)) !important;
 }
 
+a:hover   { cursor: pointer; color: rgb(var(--main));;} 
+
 </style>

package/src/components/Shader/Shader.vue

@@ -1,123 +1,168 @@
 <template>
-  <canvas ref="refCanvas"></canvas>
+  <canvas id="glcanvas" ref="refCanvas"/>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
-
-let refCanvas = ref(null)
-const vertexShaderSource = `
-  void main() {
-    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  }
-`;
-
-const fragmentShaderSource = `
-  precision mediump float;
-
-  #define time (iTime * 0.9)
-
-  vec4 gradient(float f)
-  {
-      vec4 c = vec4(0);
-      f = mod(f, 1.5);
-      for (int i = 0; i < 3; ++i)
-          c[i] = pow(0.5 + 0.5 * sin(2.0 * (f + 0.2 * float(i))), 10.0);
-      return c;
-  }
-
-  float offset(float th)
-  {
-      return 0.5 * sin(25.0 * th) * sin(time);
-  }
-
-  vec4 tunnel(float th, float radius)
-  {
-      return gradient(offset(th + 0.25 * time) + 3.0 * log(3.0 * radius) - time);
-  }
-
-  void main() {
-      vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / iResolution.xy;
-      p.x *= iResolution.x / iResolution.y;
-      gl_FragColor = tunnel(atan(p.y, p.x), 2.0 * length(p));
-  }
-`;
-
-onMounted(() => {
-  const canvas = refCanvas.value;
-  const gl = canvas.getContext("webgl");
-
-  if (!gl) {
-    console.error("Unable to initialize WebGL. Your browser may not support it.");
-    return;
-  }
-
-  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
-  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
-
-  const program = createProgram(gl, vertexShader, fragmentShader);
-
-  gl.useProgram(program);
-
-  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
-  const positionBuffer = gl.createBuffer();
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  const positions = new Float32Array([-1, -1, 3, -1, -1, 3]);
-  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
-
-  const vao = gl.createVertexArray();
-  gl.bindVertexArray(vao);
-  gl.enableVertexAttribArray(positionAttributeLocation);
-
-  const size = 2;
-  const type = gl.FLOAT;
-  const normalize = false;
-  const stride = 0;
-  const offset = 0;
-
-  gl.vertexAttribPointer(
-    positionAttributeLocation, size, type, normalize, stride, offset
-  );
-
-  gl.clearColor(0, 0, 0, 0);
-  gl.clear(gl.COLOR_BUFFER_BIT);
-
-  gl.useProgram(program);
-  gl.bindVertexArray(vao);
-
-  gl.drawArrays(gl.TRIANGLES, 0, 3);
-});
-
-function createShader(gl, type, source) {
-  const shader = gl.createShader(type);
-  gl.shaderSource(shader, source);
-  gl.compileShader(shader);
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    console.error(gl.getShaderInfoLog(shader));
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}
-
-function createProgram(gl, vertexShader, fragmentShader) {
-  const program = gl.createProgram();
-  gl.attachShader(program, vertexShader);
-  gl.attachShader(program, fragmentShader);
-  gl.linkProgram(program);
-
-  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-    console.error(gl.getProgramInfoLog(program));
-    gl.deleteProgram(program);
-    return null;
-  }
-
-  return program;
-}
+  import {onMounted, ref} from 'vue'
+
+  onMounted(() => {
+      const canvas = document.getElementById('glcanvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+      const vsSource = `
+        attribute vec4 aVertexPosition;
+        void main() {
+          gl_Position = aVertexPosition;
+        }
+     `;
+
+     // Fragment shader (your GLSL code goes here)
+     const fsSource = `
+        precision mediump float;
+
+       const float PI = 3.14159265358979323846264;
+       const float TWOPI = PI * 2.0;
+       const vec4 WHITE = vec4(0.0, 1.0, 0.533, 1); // Для цвета F6F9F7
+       const vec4 BLACK = vec4(0.0, 0.9, 0.48, 1); // Для цвета EBF2ED
+
+       const int MAX_RINGS = 30;
+       const float RING_DISTANCE = 0.03;
+       const float WAVE_COUNT = 60.0;
+       const float WAVE_DEPTH = 0.08;
+
+       uniform float iTime;
+       uniform vec2 iResolution;
+
+       void main() {
+           float rot = mod(iTime * 0.6, TWOPI);
+           vec2 fragCoord = gl_FragCoord.xy;
+           vec2 pos = vec2(fragCoord.x / iResolution.x, fragCoord.y / iResolution.y);
+           pos = vec2(3.0 * (pos.x - 0.5), 3.0 * (pos.y - 0.4));
+           float x = pos.x;
+           float y = pos.y;
+
+           bool black = false;
+           float prevRingDist = RING_DISTANCE;
+           for (int i = 0; i < MAX_RINGS; i++) {
+               vec2 center = vec2(0.0, 0.7 - RING_DISTANCE * float(i) * 1.2);
+               float radius = 0.5 + RING_DISTANCE / (pow(float(i + 5), 1.1) * 0.006);
+               float dist = distance(center, pos);
+               dist = pow(dist, 0.3);
+               float ringDist = abs(dist - radius);
+               if (ringDist < RING_DISTANCE * prevRingDist * 7.0) {
+                   float angle = atan(y - center.y, x - center.x);
+                   float thickness = 1.1 * abs(dist - radius) / prevRingDist;
+                   float depthFactor = WAVE_DEPTH * sin((angle + rot * radius) * WAVE_COUNT);
+                   if (dist > radius) {
+                       black = (thickness < RING_DISTANCE * 5.0 - depthFactor * 2.0);
+                   } else {
+                       black = (thickness < RING_DISTANCE * 5.0 + depthFactor);
+                   }
+                   break;
+               }
+               if (dist > radius) break;
+               prevRingDist = ringDist;
+           }
+
+           gl_FragColor = black ? BLACK : WHITE;
+       }
+
+     `;
+
+     function compileShader(gl, type, source) {
+         const shader = gl.createShader(type);
+         gl.shaderSource(shader, source);
+         gl.compileShader(shader);
+
+         // Check for compilation errors
+         if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+             alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+             gl.deleteShader(shader);
+             return null;
+         }
+
+         return shader;
+     }
+
+     const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vsSource);
+     const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+     // Create the shader program
+     const shaderProgram = gl.createProgram();
+
+     gl.attachShader(shaderProgram, vertexShader);
+     gl.attachShader(shaderProgram, fragmentShader);
+     gl.linkProgram(shaderProgram);
+
+     // Check for linking errors
+     if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+         alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+     }
+
+     function resizeCanvasToDisplaySize(canvas) {
+          const width = canvas.clientWidth * window.devicePixelRatio;
+          const height = canvas.clientHeight * window.devicePixelRatio;
+          if (canvas.width !== width || canvas.height !== height) {
+              canvas.width = width;
+              canvas.height = height;
+              return true; // размер изменился
+          }
+          return false; // размер не изменился
+      }
+
+
+     function render() {
+      if (resizeCanvasToDisplaySize(gl.canvas)) {
+          gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+        }
+        gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+        gl.clearDepth(1.0);                 // Clear everything
+        gl.enable(gl.DEPTH_TEST);           // Enable depth testing
+        gl.depthFunc(gl.LEQUAL);            // Near things obscure far things
+
+        // Clear the canvas before we start drawing on it
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+        // Set the shader program
+        gl.useProgram(shaderProgram);
+
+        // Set up geometry, attributes, uniforms here
+        // Create a buffer for the square's positions
+        const positionBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+        // Now create an array of positions for the square
+        const positions = [
+            -1.0,  1.0,
+            1.0,  1.0,
+            -1.0, -1.0,
+            1.0, -1.0,
+        ];
+
+        // Pass the positions to WebGL
+        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+        // Tell WebGL how to pull out the positions from the position buffer
+        const vertexPosition = gl.getAttribLocation(shaderProgram, 'aVertexPosition');
+        gl.vertexAttribPointer(vertexPosition, 2, gl.FLOAT, false, 0, 0);
+        gl.enableVertexAttribArray(vertexPosition);
+
+        // Set the shader uniforms
+        var timeUniformLocation = gl.getUniformLocation(shaderProgram, 'iTime');
+        var resolutionUniformLocation = gl.getUniformLocation(shaderProgram, 'iResolution');
+
+        gl.uniform1f(timeUniformLocation, performance.now() / 3000.0);
+        gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
+
+        // Draw the scene
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+        // Call render again on the next frame
+        requestAnimationFrame(render);
+     }
+    requestAnimationFrame(render);
+
+  });
 </script>
 
 <style scoped>

package/src/components/Slider/Slider.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="embla" ref="emblaNode">
+    <div class="embla__container">
+     
+      <div class="embla__slide pd-nano" v-for="(entity, key, index) in entitiesState" :key="key">
+        <transition name="fade" mode="out-in" appear>
+          <!-- <div 
+            v-if="!isLoading && entitiesState.length > 0" 
+            class="h-100 w-100 radius-big flex-center bg-grey"
+          >
+            <Loader class="pos-relative"/>
+          </div>
+   -->
+          <slot
+            :item="entity"
+            :user="user"
+          ></slot>
+        </transition>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+
+<script setup scoped>
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import emblaCarouselVue from 'embla-carousel-vue'
+import Autoplay from 'embla-carousel-autoplay'
+
+import Loader from '@pf/src/components/Loader/Loader.vue'
+
+// Props for customization
+const props = defineProps({
+  store: Object, // Expect a store object with a 'read' function
+  options: Object, // Options to pass to the store's read function
+  text: Object, // Optional: Custom text for i18n
+});
+
+const router = useRouter()
+
+const { t } = useI18n(props.text || {
+  messages: {
+    en: {
+      title: 'Explore Our Collection',
+    },
+  }
+})
+
+const entitiesState = ref([])
+const isLoading = ref(true);
+
+
+const autoplayOptions = {
+  delay: 2000,
+  jump: false,
+  stopOnInteraction: false,
+  stopOnMouseEnter: false,
+  stopOnFocusIn: true,
+  stopOnLastSnap: false,
+  rootNode: (emblaRoot) => emblaRoot.parentElement
+}
+
+const [emblaNode, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay(autoplayOptions)])
+
+const scrollTo = (index) => emblaApi.value && emblaApi.value.scrollTo(index);
+// const onInit = (embla) =>  scrollSnaps.value = emblaApi.value.scrollSnapList();
+const onSelect = (embla) => selectedIndex.value = emblaApi.value.selectedScrollSnap();
+
+onMounted(async() => {
+  entitiesState.value = await props.store.read({
+    ...props.options
+  });
+
+  console.log(entitiesState.value)
+
+  isLoading.value = false;
+
+  onInit(emblaApi);
+  onSelect(emblaApi);
+
+  emblaApi.value.on('reInit', onInit);
+  emblaApi.value.on('reInit', onSelect);
+  emblaApi.value.on('select', onSelect);
+});
+</script>

package/src/modules/applications/applications.client.js

@@ -0,0 +1,2 @@
+
+import SubscribeNewsletter from './components/sections/SubscribeNewsletter.vue';