@kalisio/kdk 2.1.7 → 2.1.9

package/core/client/components/media/KShape.vue

@@ -1,120 +1,120 @@
-<template>
-  <div>
-    <svg :width="width" :height="height" style="display:block">
-      <circle
-        v-if="type === 'circle'"
-        :cx="width/2"
-        :cy="height/2"
-        :r="(Math.min(height, width)/2)-borderWidth"
-        class="k-shape"
-      />
-      <ellipse
-        v-if="type === 'ellipse'"
-        :cx="width/2"
-        :cy="height/2"
-        :rx="(width/2)-borderWidth"
-        :ry="(height/2)-borderWidth"
-        class="k-shape"
-      />
-      <rect
-        v-if="type === 'rect'"
-        :x="borderWidth"
-        :y="borderWidth"
-        :width="width-(2*borderWidth)"
-        :height="height-(2*borderWidth)"
-        :rx="borderRadius"
-        :ry="borderRadius"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-up'"
-        :points="`${width/2},${borderWidth} ${borderWidth},${height-borderWidth} ${width-borderWidth},${height-borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-down'"
-        :points="`${width/2},${height-borderWidth} ${borderWidth},${borderWidth} ${width-borderWidth},${borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-right'"
-        :points="`0,0 0,${height} ${width},${height/2}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'triangle-left'"
-        :points="`0,${(height-borderWidth)/2} ${width-borderWidth},${height-borderWidth} ${width-borderWidth},${borderWidth}`"
-        class="k-shape"
-      />
-      <polygon
-        v-if="type === 'diamond'"
-        :points="`${width/2},${height-borderWidth} ${width-borderWidth},${height/2} ${width/2},${borderWidth} ${borderWidth},${height/2}`"
-        class="k-shape"
-      />
-    </svg>
-    <q-tooltip v-if="tooltip">
-      {{ tooltip }}
-    </q-tooltip>
-  </div>
-</template>
-
-<script setup>
-import { getCssVar } from 'quasar'
-
-// props
-defineProps({
-  type: {
-    type: String,
-    default: 'circle',
-    validator: (value) => {
-      return ['circle', 'ellipse', 'rect', 'triangle-up', 'triangle-down', 'triangle-right', 'triangle-left', 'diamond'].includes(value)
-    }
-  },
-  width: {
-    type: Number,
-    default: 18
-  },
-  height: {
-    type: Number,
-    default: 18
-  },
-  color: {
-    type: String,
-    default: getCssVar('primary')
-  },
-  opacity: {
-    type: Number,
-    default: 1
-  },
-  borderColor: {
-    type: String,
-    default: 'black'
-  },
-  borderWidth: {
-    type: Number,
-    default: 1
-  },
-  borderRadius: {
-    type: Number,
-    default: 0
-  },
-  dashArray: {
-    type: String,
-    default: ''
-  },
-  tooltip: {
-    type: String,
-    default: undefined
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-.k-shape {
-  fill: v-bind(color);
-  fill-opacity: v-bind(opacity);
-  stroke: v-bind(borderColor);
-  stroke-width: v-bind(borderWidth);
-  stroke-dasharray: v-bind(dashArray);
-}
-</style>
+<template>
+  <div>
+    <svg :width="width" :height="height" style="display:block">
+      <circle
+        v-if="type === 'circle'"
+        :cx="width/2"
+        :cy="height/2"
+        :r="(Math.min(height, width)/2)-borderWidth"
+        class="k-shape"
+      />
+      <ellipse
+        v-if="type === 'ellipse'"
+        :cx="width/2"
+        :cy="height/2"
+        :rx="(width/2)-borderWidth"
+        :ry="(height/2)-borderWidth"
+        class="k-shape"
+      />
+      <rect
+        v-if="type === 'rect'"
+        :x="borderWidth"
+        :y="borderWidth"
+        :width="width-(2*borderWidth)"
+        :height="height-(2*borderWidth)"
+        :rx="borderRadius"
+        :ry="borderRadius"
+        class="k-shape"
+      />
+      <polygon
+        v-if="type === 'triangle-up'"
+        :points="`${width/2},${borderWidth} ${borderWidth},${height-borderWidth} ${width-borderWidth},${height-borderWidth}`"
+        class="k-shape"
+      />
+      <polygon
+        v-if="type === 'triangle-down'"
+        :points="`${width/2},${height-borderWidth} ${borderWidth},${borderWidth} ${width-borderWidth},${borderWidth}`"
+        class="k-shape"
+      />
+      <polygon
+        v-if="type === 'triangle-right'"
+        :points="`0,0 0,${height} ${width},${height/2}`"
+        class="k-shape"
+      />
+      <polygon
+        v-if="type === 'triangle-left'"
+        :points="`0,${(height-borderWidth)/2} ${width-borderWidth},${height-borderWidth} ${width-borderWidth},${borderWidth}`"
+        class="k-shape"
+      />
+      <polygon
+        v-if="type === 'diamond'"
+        :points="`${width/2},${height-borderWidth} ${width-borderWidth},${height/2} ${width/2},${borderWidth} ${borderWidth},${height/2}`"
+        class="k-shape"
+      />
+    </svg>
+    <q-tooltip v-if="tooltip">
+      {{ tooltip }}
+    </q-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { getCssVar } from 'quasar'
+
+// props
+defineProps({
+  type: {
+    type: String,
+    default: 'circle',
+    validator: (value) => {
+      return ['circle', 'ellipse', 'rect', 'triangle-up', 'triangle-down', 'triangle-right', 'triangle-left', 'diamond'].includes(value)
+    }
+  },
+  width: {
+    type: Number,
+    default: 18
+  },
+  height: {
+    type: Number,
+    default: 18
+  },
+  color: {
+    type: String,
+    default: getCssVar('primary')
+  },
+  opacity: {
+    type: Number,
+    default: 1
+  },
+  borderColor: {
+    type: String,
+    default: 'black'
+  },
+  borderWidth: {
+    type: Number,
+    default: 1
+  },
+  borderRadius: {
+    type: Number,
+    default: 0
+  },
+  dashArray: {
+    type: String,
+    default: ''
+  },
+  tooltip: {
+    type: String,
+    default: undefined
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.k-shape {
+  fill: v-bind(color);
+  fill-opacity: v-bind(opacity);
+  stroke: v-bind(borderColor);
+  stroke-width: v-bind(borderWidth);
+  stroke-dasharray: v-bind(dashArray);
+}
+</style>

package/core/client/components/media/index.js

@@ -1,13 +1,13 @@
-import KColorScale from './KColorScale.vue'
-import KImageViewer from './KImageViewer.vue'
-import KMarkdownViewer from './KMarkdownViewer.vue'
-import KMediaBrowser from './KMediaBrowser.vue'
-import KShape from './KShape.vue'
-
-export {
-  KColorScale,
-  KMarkdownViewer,
-  KMediaBrowser,
-  KImageViewer,
-  KShape
-}
+import KColorScale from './KColorScale.vue'
+import KImageViewer from './KImageViewer.vue'
+import KMarkdownViewer from './KMarkdownViewer.vue'
+import KMediaBrowser from './KMediaBrowser.vue'
+import KShape from './KShape.vue'
+
+export {
+  KColorScale,
+  KMarkdownViewer,
+  KMediaBrowser,
+  KImageViewer,
+  KShape
+}

package/core/client/components/menu/KMenu.vue

@@ -1,147 +1,147 @@
-<template>
-  <q-btn-dropdown
-    v-if="hasContent"
-    :id="id"
-    :icon="icon"
-    :color="color"
-    :size="size"
-    :dropdown-icon="dropdownIcon"
-    :no-icon-animation="!dropdownAnimation"
-    :disable="disabled"
-    :dense="dense"
-    :persistent="persistent"
-    :auto-close="autoClose"
-    :menu-anchor="direction === 'vertical' ? 'bottom left' : 'bottom middle' "
-    menu-self="top left"
-    flat
-    rounded
-    no-caps
-    @click="onClicked">
-      <template v-slot:label>
-        <div class="row items-center no-wrap">
-          <q-badge v-if="badge" v-bind="badge" />
-          <div class="text-center">
-            {{ $tie(label) }}
-          </div>
-        </div>
-      </template>
-      <KPanel
-        id="menu-entries"
-        :content="content"
-        :mode="mode"
-        :context="context"
-        :action-renderer="actionRenderer"
-        :direction="direction"
-        class="no-wrap"
-      />
-  </q-btn-dropdown>
-</template>
-
-<script setup>
-import _ from 'lodash'
-import { computed } from 'vue'
-import KPanel from '../KPanel.vue'
-
-// Props
-const props = defineProps({
-  id: {
-    type: String,
-    required: true
-  },
-  label: {
-    type: String,
-    default: ''
-  },
-  icon: {
-    type: String,
-    default: undefined
-  },
-  color: {
-    type: String,
-    default: 'grey-9'
-  },
-  size: {
-    type: String,
-    default: 'md'
-  },
-  tooltip: {
-    type: String,
-    default: undefined
-  },
-  dropdownIcon: {
-    type: String,
-    default: undefined
-  },
-  dropdownAnimation: {
-    type: Boolean,
-    default: true
-  },
-  badge: {
-    type: Object,
-    default: () => null
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  dense: {
-    type: Boolean,
-    default: false
-  },
-  autoClose: {
-    type: Boolean,
-    default: true
-  },
-  persistent: {
-    type: Boolean,
-    default: false
-  },
-  propagate: {
-    type: Boolean,
-    default: true
-  },
-  content: {
-    type: [Object, Array],
-    default: () => null
-  },
-  mode: {
-    type: String,
-    default: undefined
-  },
-  filter: {
-    type: Object,
-    default: () => {}
-  },
-  context: {
-    type: Object,
-    default: () => null
-  },
-  direction: {
-    type: String,
-    default: () => 'vertical'
-  },
-  actionRenderer: {
-    type: String,
-    default: 'button',
-    validator: (value) => {
-      return ['button', 'item'].includes(value)
-    }
-  }
-})
-
-// Computed
-const hasContent = computed(() => {
-  return !_.isEmpty(props.content)
-})
-
-// Functions
-function onClicked (event) {
-  if (!props.propagate) event.stopPropagation()
-}
-</script>
-
-<style lang="scss" scoped>
-  .q-btn-dropdown__arrow {
-    margin-left: 0px !important;
-  }
-</style>
+<template>
+  <q-btn-dropdown
+    v-if="hasContent"
+    :id="id"
+    :icon="icon"
+    :color="color"
+    :size="size"
+    :dropdown-icon="dropdownIcon"
+    :no-icon-animation="!dropdownAnimation"
+    :disable="disabled"
+    :dense="dense"
+    :persistent="persistent"
+    :auto-close="autoClose"
+    :menu-anchor="direction === 'vertical' ? 'bottom left' : 'bottom middle' "
+    menu-self="top left"
+    flat
+    rounded
+    no-caps
+    @click="onClicked">
+      <template v-slot:label>
+        <div class="row items-center no-wrap">
+          <q-badge v-if="badge" v-bind="badge" />
+          <div class="text-center">
+            {{ $tie(label) }}
+          </div>
+        </div>
+      </template>
+      <KPanel
+        id="menu-entries"
+        :content="content"
+        :mode="mode"
+        :context="context"
+        :action-renderer="actionRenderer"
+        :direction="direction"
+        class="no-wrap"
+      />
+  </q-btn-dropdown>
+</template>
+
+<script setup>
+import _ from 'lodash'
+import { computed } from 'vue'
+import KPanel from '../KPanel.vue'
+
+// Props
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  icon: {
+    type: String,
+    default: undefined
+  },
+  color: {
+    type: String,
+    default: 'grey-9'
+  },
+  size: {
+    type: String,
+    default: 'md'
+  },
+  tooltip: {
+    type: String,
+    default: undefined
+  },
+  dropdownIcon: {
+    type: String,
+    default: undefined
+  },
+  dropdownAnimation: {
+    type: Boolean,
+    default: true
+  },
+  badge: {
+    type: Object,
+    default: () => null
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  dense: {
+    type: Boolean,
+    default: false
+  },
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  persistent: {
+    type: Boolean,
+    default: false
+  },
+  propagate: {
+    type: Boolean,
+    default: true
+  },
+  content: {
+    type: [Object, Array],
+    default: () => null
+  },
+  mode: {
+    type: String,
+    default: undefined
+  },
+  filter: {
+    type: Object,
+    default: () => {}
+  },
+  context: {
+    type: Object,
+    default: () => null
+  },
+  direction: {
+    type: String,
+    default: () => 'vertical'
+  },
+  actionRenderer: {
+    type: String,
+    default: 'button',
+    validator: (value) => {
+      return ['button', 'item'].includes(value)
+    }
+  }
+})
+
+// Computed
+const hasContent = computed(() => {
+  return !_.isEmpty(props.content)
+})
+
+// Functions
+function onClicked (event) {
+  if (!props.propagate) event.stopPropagation()
+}
+</script>
+
+<style lang="scss" scoped>
+  .q-btn-dropdown__arrow {
+    margin-left: 0px !important;
+  }
+</style>