frappe-ui 0.1.234 → 0.1.237

package/frappe/DataImport/DataImport.vue

@@ -87,10 +87,16 @@ const fields = createResource({
   auto: false,
 })
 
+
+const updateData = () => {
+  data.value = dataImports.data?.find(
+    (di: DataImport) => di.name === props.importName,
+    ) || null
+}
+
 watch(
   () => [route.params, props, dataImports.data],
   () => {
-    if (!dataImports.data?.length) return
     if (props.doctype) {
       step.value = 'upload'
       fields.reload({
@@ -121,12 +127,6 @@ watch(() => route.query, () => {
   }
 })
 
-const updateData = () => {
-  data.value = dataImports.data?.find(
-    (di: DataImport) => di.name === props.importName,
-    ) || null
-}
-
 const updateStep = (newStep: 'list' | 'upload' | 'map' | 'preview', newData: DataImport) => {
   step.value = newStep
   if (newData) {

package/frappe/DataImport/PreviewStep.vue

@@ -312,13 +312,15 @@ const mapping = computed(() => {
     let warningMap: string[][] = [];
     if (!preview.value?.warnings?.length) return [];
     preview.value.warnings.forEach((warning: any) => {
-        const regex = /<strong>(.*?)<\/strong>/g;
-        let match;
-        const fields = [];
-        while ((match = regex.exec(warning.message)) !== null) {
-            fields.push(match[1]);
+        if (warning.type == "info") {
+            const regex = /<strong>(.*?)<\/strong>/g;
+            let match;
+            const fields = [];
+            while ((match = regex.exec(warning.message)) !== null) {
+                fields.push(match[1]);
+            }
+            warningMap.push(fields);
         }
-        warningMap.push(fields);
     })
     return warningMap;
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.234",
+  "version": "0.1.237",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/MonthPicker/MonthPicker.story.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MonthPicker from './MonthPicker.vue'
+const val = ref('')
+</script>
+
+<template>
+  <Story :layout="{ type: 'grid', width: 500 }">
+    <Variant title="Default">
+      <div class="p-2">
+        <MonthPicker v-model="val" />
+      </div>
+    </Variant>
+
+    <Variant title="Fit width">
+      <div class="p-2">
+        <MonthPicker v-model="val" class="w-fit" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/MonthPicker/MonthPicker.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { MonthPickerProps } from './types'
+
+import Popover from '../Popover/Popover.vue'
+import LucideCalender from '~icons/lucide/calendar'
+import LucideChevronLeft from '~icons/lucide/chevron-left'
+import LucideChevronRight from '~icons/lucide/chevron-right'
+
+const props = withDefaults(defineProps<MonthPickerProps>(), {
+  placeholder: 'Select month',
+})
+
+const viewMode = ref('month')
+const model = defineModel<String>({ default: '' })
+
+const months = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+const currentYear = ref(new Date().getFullYear())
+
+const yearRangeStart = computed(
+  () => currentYear.value - (currentYear.value % 12),
+)
+const yearRange = computed(() =>
+  Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
+)
+
+const pickerList = computed(() =>
+  viewMode.value == 'year' ? yearRange.value : months,
+)
+
+const toggleViewMode = () => {
+  viewMode.value = viewMode.value == 'year' ? 'month' : 'year'
+}
+
+const handleOnClick = (v: string | number) => {
+  let ar = model.value.split(' ')
+  const indexToModify = viewMode.value == 'year' ? 1 : 0
+  ar[indexToModify] = String(v)
+  model.value = ar.join(' ')
+}
+
+const prevClick = () => {
+  currentYear.value += viewMode.value == 'year' ? -12 : -1
+}
+
+const nextClick = () => {
+  currentYear.value += viewMode.value == 'year' ? 12 : 1
+}
+
+const formatBtn = (v: string | number) =>
+  viewMode.value == 'month' ? (v as String).slice(0, 3) : v
+</script>
+
+<template>
+  <Popover
+    popover-class="mt-2 shadow-xl rounded-lg border bg-surface-modal p-2"
+  >
+    <template #target="{ togglePopover }">
+      <Button @click="togglePopover" class="w-full justify-between">
+        {{ model || props.placeholder }}
+        <template #suffix> <LucideCalender class="size-4" /> </template>
+      </Button>
+    </template>
+
+    <template #body>
+      <div class="flex gap-2 justify-between">
+        <Button variant="ghost" @click="prevClick">
+          <LucideChevronLeft class="size-4 text-ink-gray-5" />
+        </Button>
+
+        <!-- view toggler -->
+        <Button @click="toggleViewMode">
+          <template v-if="viewMode == 'month'">
+            {{ model.split(' ')[1] ?? currentYear }}
+          </template>
+          <template v-else>
+            {{ yearRangeStart }} - {{ yearRangeStart + 11 }}
+          </template>
+        </Button>
+
+        <Button variant="ghost" @click="nextClick">
+          <LucideChevronRight class="size-4 text-ink-gray-5" />
+        </Button>
+      </div>
+
+      <hr class="my-2" />
+
+      <!-- picker btns  -->
+      <div class="grid grid-cols-3 gap-3">
+        <Button
+          v-for="x in pickerList"
+          @click="() => handleOnClick(x)"
+          :variant="model.includes(String(x)) ? 'solid' : 'ghost'"
+          :key="x"
+          class="text-sm text-ink-gray-9"
+        >
+          {{ formatBtn(x) }}
+        </Button>
+      </div>
+    </template>
+  </Popover>
+</template>

package/src/components/MonthPicker/index.ts

@@ -0,0 +1 @@
+export { default as MonthPicker } from "./MonthPicker.vue";

package/src/components/MonthPicker/types.ts

@@ -0,0 +1,3 @@
+export interface MonthPickerProps {
+  placeholder?: string;
+}

package/src/components/MultiSelect/MultiSelect.vue

@@ -13,6 +13,7 @@ import {
 } from "reka-ui";
 
 import LucideX from "~icons/lucide/x";
+import Button from "../Button/Button.vue";
 import Popover from "../Popover/Popover.vue";
 import LucideCheck from "~icons/lucide/check";
 import LoadingIndicator from "../LoadingIndicator.vue";

package/src/components/Select/Select.vue

@@ -104,18 +104,16 @@ const selectOptions = computed(() => {
       >
         <SelectViewport class="p-1 flex flex-col">
           <SelectItem
-            v-for="(option, index) in selectOptions"
+            v-for="option in selectOptions"
             :disabled="option.disabled"
-            :key="index"
+            :key="option.value"
             :value="option.value"
             :class="[sizeClasses, paddingClasses, fontSizeClasses]"
             class="text-base text-ink-gray-9 flex items-center relative data-[highlighted]:bg-surface-gray-2 border-0 [data-state=checked]:bg-surface-gray-2 data-[disabled]:text-ink-gray-4"
           >
-            <slot name="option" v-bind="{ option }">
-              <SelectItemText>
-                {{ option.label }}
-              </SelectItemText>
-            </slot>
+            <SelectItemText>
+              <slot name="option" v-bind="{ option }">{{ option.label }}</slot>
+            </SelectItemText>
           </SelectItem>
 
           <slot name="footer" />

package/src/components/TextEditor/TextEditor.vue

@@ -94,6 +94,7 @@ const props = withDefaults(defineProps<TextEditorProps>(), {
   tags: () => [],
 })
 
+const model = defineModel()
 const emit = defineEmits<TextEditorEmits>()
 
 const editor = ref<Editor | null>(null)
@@ -119,10 +120,12 @@ const editorProps = computed(() => {
 })
 
 watch(
-  () => props.content,
-  (val) => {
+  () => [props.content, model.value],
+  ([content, modelVal]) => {
+    const val = content || modelVal
+
     if (editor.value) {
-      let currentHTML = editor.value.getHTML()
+      const currentHTML = editor.value.getHTML()
       if (currentHTML !== val) {
         editor.value.commands.setContent(val)
       }
@@ -153,7 +156,7 @@ watch(
 
 onMounted(() => {
   editor.value = new Editor({
-    content: props.content || null,
+    content: props.content || model.value || null,
     editorProps: editorProps.value,
     editable: props.editable,
     autofocus: props.autofocus,
@@ -237,7 +240,9 @@ onMounted(() => {
       ...(props.extensions || []),
     ],
     onUpdate: ({ editor }) => {
-      emit('change', editor.getHTML())
+      const html = editor.getHTML()
+      emit('change', html)
+      model.value = html
     },
     onTransaction: ({ editor }) => {
       emit('transaction', editor)

package/src/fonts/Inter/inter.css

@@ -30,293 +30,32 @@
   src: url('Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
 }
-/* static fonts "Inter" */
+/* Aliased 'InterVar' font as 'Inter' */
+/* To prevent breaking usage of `font-family: 'Inter'` */
 @font-face {
   font-family: 'Inter';
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-Thin.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-ThinItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-ExtraLight.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-ExtraLightItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-Light.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-LightItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-Regular.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-Italic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-Medium.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-MediumItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-SemiBold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-SemiBoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-Bold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-BoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url('Inter-ExtraBold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
-  font-style: italic;
-  font-weight: 800;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('Inter-ExtraBoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'Inter';
   font-style: normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url('Inter-Black.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
+  src:
+    url('Inter.var.woff2?v=3.19') format('woff2-variations'),
+    url('Inter.var.woff2?v=3.19') format('woff2');
+  src: url('Inter.var.woff2?v=3.19') format('woff2') tech('variations');
+  unicode-range:
+    U+0000-05FF, /* Latin, Greek, Cyrillic, Hebrew */
+    U+0700-1FFF, /* Extended Latin, Greek, Cyrillic, Armenian, Georgian */
+    U+2C00-2FFF, /* Additional scripts */
+    U+4E00-9FFF, /* CJK (Chinese, Japanese, Korean) */
+    U+AC00-D7AF; /* Hangul (Korean) */
 }
 @font-face {
   font-family: 'Inter';
-  font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url('Inter-BlackItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-/* static fonts "InterDisplay" */
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-DisplayThin.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url('Inter-DisplayThinItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-DisplayExtraLight.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url('Inter-DisplayExtraLightItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-DisplayLight.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('Inter-DisplayLightItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-DisplayRegular.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('Inter-DisplayItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-DisplayMedium.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('Inter-DisplayMediumItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-DisplaySemiBold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url('Inter-DisplaySemiBoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-DisplayBold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('Inter-DisplayBoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url('Inter-DisplayExtraBold.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url('Inter-DisplayExtraBoldItalic.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style: normal;
-  font-weight: 900;
+  font-weight: 100 900;
   font-display: swap;
-  src: url('Inter-DisplayBlack.woff2?v=3.19') format('woff2');
-  unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
-}
-@font-face {
-  font-family: 'InterDisplay';
   font-style: italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url('Inter-DisplayBlackItalic.woff2?v=3.19') format('woff2');
+  src:
+    url('Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
+    url('Inter-Italic.var.woff2?v=3.19') format('woff2');
+  src: url('Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
   unicode-range: U+0000-05FF, U+0700-1FFF, U+2C00-2FFF, U+4E00-9FFF, U+AC00-D7AF;
 }

package/src/index.ts

@@ -10,6 +10,7 @@ export { default as Card } from './components/Card.vue'
 export * from './components/Combobox'
 export * from './components/Checkbox'
 export * from './components/DatePicker'
+export * from './components/MonthPicker'
 export * from './components/Dialog'
 export { default as Dialogs } from './components/Dialogs.vue'
 export * from './components/Divider'

package/src/tailwind/plugin.js

@@ -11,13 +11,8 @@ let cssVariables = generateCSSVariables()
 
 let globalStyles = (theme) => ({
   html: {
-    'font-family': `Inter, ${theme('fontFamily.sans')}`,
-  },
-  '@supports (font-variation-settings: normal)': {
-    html: {
-      'font-family': `InterVar, ${theme('fontFamily.sans')}`,
-      'font-optical-sizing': 'auto',
-    },
+    'font-family': `InterVar, ${theme('fontFamily.sans')}`,
+    'font-optical-sizing': 'auto',
   },
   'html, body, button, p, span, div': {
     fontVariationSettings: "'opsz' 24",